<template>
  <div>
    <div class="flex items-center mb-6">
      设置回访项目：
      <el-select
        v-model="curDiseaseId"
        placeholder="请选择回访类型"
        style="width: 115px"
        filterable
        clearable
        @change="handleChangeIll"
      >
        <el-option
          v-for="(item, index) in diseaseVisitList"
          :key="index"
          :label="item.properties?.name"
          :value="item.id"
        ></el-option>
      </el-select>

      <el-select
        v-model="sn"
        :disabled="!curDiseaseId"
        placeholder="请选择回访类型"
        filterable
        clearable
      >
        <el-option
          v-for="(item, index) in diseaseVisitFormList"
          :key="index"
          :label="item?.properties?.name"
          :value="item?.properties?.name"
        ></el-option>
      </el-select>
      <el-select
        v-model="state.frequencyType"
        placeholder="请选择检查周期/时间"
      >
        <el-option label="每天" :value="0"> </el-option>
        <el-option label="每周" :value="1"> </el-option>
        <el-option label="每月" :value="2"> </el-option>
        <el-option :label="`指定时间后 ${props.date}`" :value="3"> </el-option>
      </el-select>
      <el-button type="primary" plain @click="handleAdd" class="ml-2"
        >确认添加</el-button
      >
    </div>
    <div>
      <ComponentTableSetItem
        :tableData="props.tableData"
        :config="config"
        @remove="handleRemove"
        :date="props.date"
      ></ComponentTableSetItem>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref } from "vue";
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { onMounted, reactive, defineProps } from "vue";
import ComponentTableSetItem from "./TableSetItem.vue";

import { useManageProjectStoreHook } from "@/store/modules/manageProject";
const useManageProject = useManageProjectStoreHook();

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  date: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["add"]);
const currentArchiveId = computed(() => {
  return useManageProjectStoreHook()?.currentArchiveId;
});
const state = reactive({
  node: "", // 检查项目
  related: "",
  nodeList: [],
  relatedList: [],
  frequencyType: 3
  // tableData: []
});

const curDiseaseId = ref();
const sn = ref();
const transferRawJson = ref();

const config = {
  name: { label: "回访类型", prop: "name" },
  content: { label: "回访内容", prop: "content" },
  duration: { label: "回访周期", prop: "duration", width: "420" },
  timePreview: { label: "回访时间预览", prop: "timePreview" },
  frequency: { label: "每次完成次数", prop: "frequency" },
  remark: { label: "备注信息", prop: "remark" },
  handle: { label: "操作", prop: "handle" }
};

const diseaseVisitList = ref([]);
const diseaseVisitFormList = ref([]);
const authForm = ref([]);
const getDiseaseVisitData = async () => {
  const { data } = await request.get(`/graphService/open/node/paginate`, {
    params: {
      page: 1,
      pageSize: 9999,
      tag: "可回访"
    }
  });
  const responseData = await request.get(
    `/idcService/mechanism/formConfig/get`
  );
  diseaseVisitList.value = [];

  if (responseData?.data?.list?.length) {
    diseaseVisitList.value = [
      {
        id: "patrol",
        properties: {
          name: "巡访"
        },
        key: "patrol"
      }
    ];
    authForm.value = responseData?.data?.list.map(v => {
      return {
        ...v,
        id: v.formId,
        properties: {
          name: v.formTitle
        }
      };
    });
  }
  diseaseVisitList.value.push(...data.list);
  console.log("diseaseVisitList", diseaseVisitList.value);
};
const handleChangeIll = async id => {
  if (id == "patrol") {
    return (diseaseVisitFormList.value = authForm.value);
  }
  diseaseVisitFormList.value = await searchRelateNodes(id, "回访表单信息");
};
const searchRelateNodes = async (id, relationship) => {
  if (!id) return;
  const { data } = await request.get(`/graphService/open/node/related`, {
    params: {
      id,
      relationship
    }
  });
  return data;
};
const handleAdd = () => {
  if (!curDiseaseId.value || !sn.value) {
    return ElMessage.error("请选择回访疾病");
  }
  let config = {
    name: diseaseVisitList.value.find(v => v.id == curDiseaseId.value)
      ?.properties.name,
    content: sn.value,
    frequencyType: state.frequencyType,
    duration: state.frequencyType == 3 ? props.date : "",
    timePreview: "",
    frequency: 1, // 完后次数
    remark: "",
    handle: "",
    type: 2
  };
  console.log(props.tableData);

  emits("add", config);

  state.node = "";
  state.related = "";
};
const handleRemove = index => {
  props.tableData.splice(index, 1);
};
const handleSearchrRelatedNode = id => {
  request
    .get("/platformApi/graphService/open/node/related", {
      params: {
        id: id,
        relationship: "可检测"
      }
    })
    .then(resp => {
      state.relatedList = resp.data;
    });
};
const onReset = () => {
  curDiseaseId.value = "";
  sn.value = "";
  getDiseaseVisitData();
};
onMounted(onReset);

//这里需要暴露出去不然父组件调用不到这个方法
const getTableData = () => {
  return {
    name: "检查项目",
    list: props.tableData
  };
};
defineExpose({
  getTableData,
  onReset
});
</script>
