<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="请输入监测主题，如血压日常监测"
        />
      </el-form-item>
      <el-form-item label="监测周期:" required>
        <el-space wrap>
          <el-select
            v-model="form.frequencyType"
            placeholder="请选择检查周期/时间"
            :disabled="props.isEdit"
          >
            <el-option label="每天" :value="0" />
            <el-option label="每周" :value="1" />
            <el-option label="每月" :value="2" />
          </el-select>
          <el-date-picker
            value-format="YYYY-MM-DD"
            v-model="form.date"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleChangeDate"
          />
        </el-space>
      </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.currentMonitors"
              placeholder="请选择"
              class="w-3/4"
              multiple
              filterable
            >
              <el-option
                v-for="item in monitorItems"
                :key="item.id"
                :label="item.properties.name"
                :value="item.id"
              />
            </el-select>
            <el-button type="primary" plain @click="handleAdd">确定</el-button>
            <el-button
              type="primary"
              :icon="Refresh"
              link
              @click="getMonitorItems"
              >刷新</el-button
            >
          </div>
        </el-form-item>
        <el-table :data="tableList" style="width: 100%">
          <el-table-column label="监测项目">
            <template #default="{ row }">
              {{ row.properties.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:value="form.remark"
          placeholder="(选填)输入事项提醒备注，设置后用户可见"
      /></template>
    </el-form>
  </div>
</template>
<script setup>
import { ref, reactive, defineExpose, defineProps } from "vue";
import { Refresh } from "@element-plus/icons-vue";
import { request, unique } from "@/utils";
import Editor from "@/components/Editor.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  isEdit: {
    type: Boolean,
    default: false
  }
});
const form = reactive({
  theme: "",
  date: [],
  frequencyType: 0,
  currentMonitors: [],
  remark: ""
});
const formRef = ref();
const type = ref(1);
const dayList = ref([]);
const monitorItems = ref([]);
const tableList = ref([]);
const handleChangeDate = value => {
  if (!value) return;
  if (dayList.value.includes(value)) return;
  dayList.value.push(value);
};
const handleAdd = () => {
  const list = monitorItems.value.filter(v =>
    form.currentMonitors.includes(v.id)
  );
  tableList.value = unique([...tableList.value, ...list], "id");
  form.currentMonitors = [];
};
const handleRemove = index => {
  tableList.value.splice(index, 1);
};
const getMonitorItems = () => {
  request
    .get("/platformApi/graphService/open/node/paginate", {
      params: {
        pageSize: 9999,
        tag: "日常监测指标"
      }
    })
    .then(resp => {
      monitorItems.value = resp.data.list;
    });
};
getMonitorItems();

const onSubmit = callback => {
  if (!form.theme) {
    return ElMessage.error("请输入监测主题");
  }
  if (!form.date.length) {
    return ElMessage.error("监测日期时间不能为空");
  }
  if (!tableList.value?.length) {
    return ElMessage.error("监测项目不能为空");
  }
  const [startDate, endDate] = form.date;
  const params = {
    theme: form.theme,
    frequencyType: form.frequencyType,
    startDate,
    endDate,
    content: tableList.value,
    remark: form.remark == "<p><br></p>" ? "" : form.remark
  };
  callback(params);
};
const onReset = () => {
  form.currentMonitors = [];
  form.date = [];
  form.theme = "";
  form.frequencyType = 0;
  form.remark = "";
  tableList.value = [];
};
const onInitEditData = data => {
  onReset();
  form.theme = data.theme;
  form.frequencyType = data.frequencyType;
  form.remark = data.remark == "<p><br></p>" ? "" : data.remark;
  form.date = [data.startDate, data.endDate];
  tableList.value = data.content || [];
};
defineExpose({
  onSubmit,
  onReset,
  onInitEditData
});
</script>
<style lang="scss " scoped></style>
