<template>
  <div>
    <el-dialog title="添加管理计划" v-model="dialogVisible">
      <el-form ref="formRef" :model="form" label-width="180px">
        <el-form-item
          label="请选择管理级别："
          prop="level"
          :rules="[
            { required: true, message: '请选择管理级别', trigger: 'blur' }
          ]"
        >
          <el-select
            v-model="form.level"
            filterable
            placeholder="请选择管理级别"
            class="w-full"
            @change="form.selectValue = ''"
          >
            <el-option
              v-for="item in state.levelList"
              :key="item.id"
              :label="`${item.title} （${item.scope} ）`"
              :value="item?.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="请选择要管理的疾病："
          prop="selectValue"
          :rules="[{ required: true, message: '请选择疾病', trigger: 'blur' }]"
          v-if="[1, 2].includes(form.level)"
        >
          <el-select
            v-model="form.selectValue"
            filterable
            placeholder=""
            class="w-full"
          >
            <el-option
              v-for="item in state.nodeList"
              :key="item.id"
              :label="item.properties?.name"
              :value="item?.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleNext">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import {
  ref,
  computed,
  defineProps,
  defineEmits,
  watch,
  reactive,
  nextTick
} from "vue";
import { useRouter } from "vue-router";
const [router] = [useRouter()];

import { useManageProjectStoreHook } from "@/store/modules/manageProject";

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  nodeTag: {
    type: String,
    default: "可管理"
  },
  confirmFn: {
    type: Function,
    default: undefined
  }
});
const emits = defineEmits(["update:show"]);

const currentArchiveId = computed(() => {
  return useManageProjectStoreHook()?.currentArchiveId;
});
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});
const state = reactive({
  selectValue: "",
  nodeList: [],
  filterData: [],
  levelList: []
});
const formRef = ref();
const form = reactive({
  selectValue: "",
  level: ""
});
watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      initData();
    } else {
    }
  }
);
const getNodeList = () => {
  request
    .get("/platformApi/graphService/open/node/paginate", {
      params: {
        pageSize: 9999,
        tag: props.nodeTag
      }
    })
    .then(async resp => {
      await getDetail();
      const filterData = state.filterData?.map(v => v.disease);
      state.nodeList = resp.data.list.filter(v => {
        return !filterData.includes(v.properties?.name);
      });
    });
};
const getDetail = () => {
  const url =
    props.nodeTag == "功能医学管理"
      ? `/dataService/healthManage/detail`
      : "/dataService/diseaseManage/detail";
  return new Promise(resolve => {
    request
      .get(url, {
        params: {
          archiveId: currentArchiveId.value
        }
      })
      .then(resp => {
        state.filterData = resp.data;
        resolve();
      });
  });
};
const handleNext = () => {
  const illness = state.nodeList?.find(v => form.selectValue == v.id);
  formRef.value.validate(valid => {
    if (!valid) return;

    if (props.confirmFn) {
      props.confirmFn(form.selectValue, illness.properties?.name, form.level);
    } else {
      router.push(
        `/healthManagement/evaluate?illnessId=${form.selectValue || ""}&name=${
          illness?.properties?.name || ""
        }&archivesId=${currentArchiveId.value}&level=${form.level}`
      );
    }
  });
};

const getLevelList = () => {
  request.get("dataService/schemeManage/diseaseManageLevels").then(resp => {
    state.levelList = resp.data;
  });
};
const initData = () => {
  nextTick(() => {
    formRef.value.resetFields();
  });
  getNodeList();
  getLevelList();
};
</script>
