<template>
  <div>
    <div class="flex items-center mb-6">
      回访事项：
      <el-select
        v-model="state.node"
        placeholder="请选择"
        style="width: 115px"
        @change="handleSearchrRelatedNode"
      >
        <el-option
          v-for="item in state.nodeList"
          :label="item.properties.name"
          :value="item.id"
          :key="item.id"
        />
      </el-select>
      <el-button type="primary" plain @click="handleAdd" class="ml-2"
        >确认添加</el-button
      >
    </div>
    <div>
      <ComponentTableSetItem
        :tableData="state.tableData"
        :config="config"
        @remove="handleRemove"
      ></ComponentTableSetItem>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { onMounted, reactive } from "vue";
import ComponentTableSetItem from "./TableSetItem.vue";
const state = reactive({
  node: "", // 检查项目
  related: "",
  nodeList: [],
  relatedList: [],
  tableData: []
});
const config = {
  name: { label: "检查项目", prop: "name" },
  content: { label: "包含的检查内容", prop: "content" },
  time: { label: "完成时间", prop: "time", width: "300" },
  timePreview: { label: "完成时间预览", prop: "timePreview" },
  completeNum: { label: "完成次数", prop: "completeNum" },
  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) {
    return ElMessage.error("请选择检查项目");
  }
  state.node = "";
  state.related = "";
  let config = {
    name: state.nodeList.find(v => v.id == state.node)?.properties.name,
    content: state.related,
    timeType: "day",
    time: "",
    timePreview: "",
    completeNum: "", // 完后次数
    remark: "",
    handle: ""
  };
  state.tableData.push(config);
};
const handleRemove = index => {
  state.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 = () => {
  state.related = "";
  state.node = "";
  state.tableData = [];
  getNodeList();
};
onMounted(onReset);
</script>
