<template>
  <div class="h-full w-full flex">
    <LeftMenu v-model:active="menuActive" :menus="menus" />
    <div class="flex-1 h-full overflow-y-auto" :key="menuActive">
      <template v-if="!menuActive">
        <div class="p-4">
          <Editor
            v-model:value="recommendationDietaryAdvice"
            @change="editorChange"
          ></Editor>
        </div>
      </template>
      <template v-else-if="menuActive == 1">
        <div class="p-4">
          <div class="shadow rounded flex items-center p-2">
            <span>新增检查：</span>
            <el-select
              v-model="searchVal"
              multiple
              filterable
              remote
              :remote-method="q => searchProject(q)"
            >
              <el-option
                v-for="(item, index) in searchList"
                :key="index"
                :label="item.label"
                :value="item.id"
              ></el-option
            ></el-select>
            <el-button
              type="primary"
              :disabled="!searchVal.length"
              class="ml-2"
              @click="addSearchVal"
              >新增</el-button
            >
          </div>
          <div class="mt-4 p-2 shadow rounded">
            <el-table v-if="furtherInfo.length" :data="furtherInfo">
              <el-table-column
                label="检查项目"
                prop="label"
                width="200"
              ></el-table-column>
              <el-table-column label="检查意义" prop="tip"></el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="{ row, $index }">
                  <el-button
                    type="danger"
                    link
                    @click="furtherInfo.splice($index, 1)"
                    >移除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-empty v-else :image="emptyImg" class=""> </el-empty>
          </div>
        </div>
      </template>
      <template v-else-if="menuActive == 2">
        <component v-if="archives" :is="archives"></component>
      </template>
      <template v-else-if="menuActive == 3">
        <component v-if="checkData" :is="checkData"></component>
      </template>
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  watch,
  markRaw,
  ref,
  inject,
  onMounted,
  provide,
  defineAsyncComponent,
  nextTick
} from "vue";
import { useRoute, useRouter } from "vue-router";
import LeftMenu from "./LeftMenu.vue";
import Editor from "@/components/Editor.vue";
import emptyImg from "@/assets/icon-empty-right.png";
import { debounce, deduplicateArrayByKeys } from "@/utils";

const parentState = inject("parentState");
const updateStateValueForKey = inject("updateStateValueForKey");
const getNodes = inject("getNodes");
const [route, router] = [useRoute(), useRouter()];

const archives = defineAsyncComponent(() =>
  import("../components/PlanArchives.vue")
);
const checkData = defineAsyncComponent(() =>
  import("./HealthPlanCheckData.vue")
);

const menus = [
  { label: "主要症状和描述" },
  { label: "需要进一步的检查" },
  { label: "问卷数据收集" },
  { label: "检查数据收集" }
];
const menuActive = ref(0);
const recommendationDietaryAdvice = ref(parentState.value.additionalInfo || "");
const searchVal = ref([]);
const searchList = ref([]);
let cachesList = [];
const searchProject = async (q, init = false) => {
  if (!init && !q) return;
  const data = await getNodes({
    name: q,
    tag: "医学检查项目",
    pageSize: 50,
    pagesize: 50
  });
  console.log(data);
  cachesList = searchList.value.filter(v => searchVal.value.includes(v.id));
  let temp = (data.list || []).map(v => {
    return {
      id: v.id,
      label: v.properties.name,
      tip: v.properties["检查意义"]
    };
  });
  temp = deduplicateArrayByKeys([...temp, ...cachesList], ["id"]);
  searchList.value = temp;
};
searchProject("", true);
const addSearchVal = () => {
  console.log(searchVal.value);
  furtherInfo.value.push(
    ...searchList.value.filter(v => searchVal.value.includes(v.id))
  );
  searchVal.value = [];
};
const furtherInfo = ref(parentState.value.furtherInfo || []);

const editorChange = e => {
  updateStateValueForKey(
    "additionalInfo",
    recommendationDietaryAdvice.value,
    "测试"
  );
};
watch(
  () => furtherInfo.value,
  () => {
    updateStateValueForKey("furtherInfo", furtherInfo.value);
  }
);
const defaultArchivesId = ref(route.query?.archivesId);
provide("defaultArchivesId", defaultArchivesId);
</script>

<style lang="scss" scoped></style>
