<template>
  <div>
    <div class="flex items-center mb-6">
      设置检查项目：
      <el-select
        v-model="state.node"
        placeholder="检查项目"
        style="width: 115px"
        filterable
        @change="handleSearchrRelatedNode"
      >
        <el-option
          v-for="item in state.nodeList"
          :label="item.properties.name"
          :value="item.id"
          :key="item.id"
        />
      </el-select>
      <el-select
        v-model="state.related"
        placeholder="请选择包含的检查项目"
        style="width: 315px"
        multiple
        filterable
      >
        <el-option
          v-for="item in state.relatedList"
          :label="item.properties.name"
          :value="item.properties.name"
          :key="item.id"
        />
      </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 { request } from "@/utils";
import { ElMessage } from "element-plus";
import { onMounted, reactive, defineProps } from "vue";
import ComponentTableSetItem from "./TableSetItem.vue";

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  date: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["add"]);
const state = reactive({
  node: "", // 检查项目
  related: [],
  nodeList: [],
  relatedList: [],
  frequencyType: 3
  // tableData: []
});
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 getNodeList = () => {
  request
    .get("/platformApi/graphService/open/node/paginate", {
      params: {
        pageSize: 999,
        tag: "医学检查项目"
      }
    })
    .then(resp => {
      state.nodeList = resp.data.list;
    });
};
const handleAdd = () => {
  if (!state.node || !state.related.length) {
    return ElMessage.error("请选择检查项目");
  }
  let config = {
    name: state.nodeList.find(v => v.id == state.node)?.properties.name,
    content: state.related?.join("、"),
    frequencyType: state.frequencyType,
    duration: state.frequencyType == 3 ? props.date : "",
    timePreview: "",
    frequency: 1, // 完后次数
    remark: "",
    handle: "",
    type: 0
  };
  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;
      state.related = [];
    });
};
const onReset = () => {
  state.node = "";
  state.related = [];
  getNodeList();
};
onMounted(onReset);

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