<template>
  <div>
    <el-form
      ref="formRef"
      :model="form"
      label-width="120px"
      label-position="left"
    >
      <el-form-item
        label="复查主题:"
        :rules="[
          {
            required: true,
            message: '请输入复查主题',
            trigger: 'blur'
          }
        ]"
      >
        <el-input
          v-model="form.theme"
          class="w-96"
          placeholder="请输入复查主题，如XX疾病定期复查"
        />
      </el-form-item>
      <el-form-item label="复查时间:" required>
        <TagsDatePicker v-model:list="dayList" placeholder="复查时间" />
      </el-form-item>
      <el-radio-group v-model="type">
        <el-radio-button :label="1">复查项目</el-radio-button>
        <el-radio-button :label="2">事项提醒备注</el-radio-button>
      </el-radio-group>
      <el-form-item label="" />
      <template v-if="type === 1">
        <el-form-item label="复查项目:" required>
          <div class="flex w-full">
            <el-select
              v-model="form.hospitalId"
              placeholder="请选择"
              @change="getMedicalCheckItems"
            >
              <el-option
                v-for="item in medicalCheckList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-select
              v-model="form.projectIds"
              class="w-3/4"
              placeholder="请选择"
              filterable
              multiple
            >
              <el-option
                v-for="item in medicalCheckItemsList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-button plain type="primary" @click="handleAdd">确定</el-button>
            <el-button type="primary" :icon="Refresh" link @click="onRefresh"
              >刷新</el-button
            >
          </div>
        </el-form-item>

        <el-table :data="tableList" style="width: 100%">
          <el-table-column label="复查项目">
            <template #default="{ row }">
              {{ row.name }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ _index }">
              <el-button type="danger" link @click="handleRemove(_index)"
                >移除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-else>
        <Editor
          v-model="form.remark"
          placeholder="(选填)输入事项提醒备注，设置后用户可见"
        />
      </template>
    </el-form>
  </div>
</template>
<script setup>
import { ref, reactive, defineExpose } from "vue";
import { Refresh } from "@element-plus/icons-vue";
import TagsDatePicker from "@/components/TagsDatePicker.vue";
import Editor from "@/components/Editor.vue";
import { request, unique } from "@/utils";
import { ElMessage } from "element-plus";

const form = reactive({
  theme: "",
  date: "",
  hospitalId: "",
  projectIds: "",
  remark: ""
});
const type = ref(1);
const dayList = ref([]);
const medicalCheckList = ref([]);
const medicalCheckItemsList = ref([]);
const tableList = ref([]);

const onInitEditData = data => {
  form.theme = data.theme;
  dayList.value = data.dates?.split("、");
  tableList.value = data.content;
  form.remark = data.remark == "<p><br></p>" ? "" : data.remark;
};
const getMedicalCheckList = () => {
  request
    .get("dataService/schemeManage/medicalCheck/hospital/paginate", {
      params: {
        pageSize: 999
      }
    })
    .then(resp => {
      const data = resp.data.list;
      if (resp.data.total && !form.hospitalId) {
        form.hospitalId = data[0].id;
        getMedicalCheckItems();
      }
      medicalCheckList.value = data;
    });
};
const getMedicalCheckItems = () => {
  request
    .get("dataService/schemeManage/medicalCheck/item/paginate", {
      params: {
        hospitalId: form.hospitalId,
        pageSize: 999
      }
    })
    .then(resp => {
      medicalCheckItemsList.value = resp.data.list;
    });
};
const handleAdd = () => {
  const list = medicalCheckItemsList.value.filter(v =>
    form.projectIds.includes(v.id)
  );
  tableList.value = unique([...tableList.value, ...list], "id");
  // 这是是为了日常监测定义的content一致
  tableList.value.forEach(v => {
    v.properties = {
      name: v.name
    };
  });
  form.projectIds = [];
};

const handleRemove = index => {
  tableList.value.splice(index, 1);
};
const onSubmit = callback => {
  if (!form.theme) {
    return ElMessage.error("请输入复查主题");
  }
  if (!dayList.value.length) {
    return ElMessage.error("复查时间不能为空");
  }
  if (!tableList.value.length) {
    return ElMessage.error("复查项目不能为空");
  }
  const params = {
    theme: form.theme,
    frequencyType: 3,
    dates: dayList.value.join("、"),
    content: tableList.value,
    remark: form.remark == "<p><br></p>" ? "" : form.remark
  };
  callback(params);
};
const onRefresh = () => {
  getMedicalCheckList();
  getMedicalCheckItems();
};
const onReset = () => {
  form.theme = "";
  dayList.value = [];
  tableList.value = [];
  form.remark = "";
};
const initData = () => {
  getMedicalCheckList();
};
initData();
defineExpose({
  onSubmit,
  onReset,
  onInitEditData
});
</script>
<style lang="scss " scoped></style>
