<template>
  <!-- <div class="bg-[#f0f2f5] sticky z-10 top-0 h-4"></div> -->

  <div class="p-4 space-y-4 ">
    <div v-for="(item, index) in list" :key="index" class="shadow">
      <div
        class="cursor-pointer py-2 px-4 flex items-center justify-between"
        :class="{
          'bg-gray-50': !item.expand,
          'bg-blue-50 text-blue-700': item.expand
        }"
        @click="item.expand = !item.expand"
      >
        <span>{{ item.name }}</span>
        <ArrowUp class="w-4 text-gray-500" v-if="!item.expand" />
        <ArrowDown class="w-4 text-gray-500" v-else />
      </div>
      <div class="w-full overflow-x-auto">
        <table
          v-if="item.expand"
          class="min-w-full bg-white text-gray-700 table-fixed"
        >
          <tr class="font-bold">
            <td
              class="border border-solid border-gray-100 p-2 whitespace-nowrap"
            >
              项目
            </td>
            <td
              class="border border-solid border-gray-100 p-2 whitespace-nowrap"
              v-for="(col, index) in item.list?.[0]?.list"
              :key="index"
            >
              {{ dayjs(col[0].date * 1000).format("YYYY-MM-DD HH:mm:ss") }}
            </td>
          </tr>
          <tr v-for="(child, childIdx) in item.list" :key="childIdx">
            <td
              class="border border-solid border-gray-100 p-2 whitespace-nowrap"
            >
              {{ child.name }}
            </td>
            <td
              v-for="(col, colIdx) in child.list"
              :key="colIdx"
              class="border border-solid border-gray-100"
            >
              <div class="p-2 text-sm">
                <div v-for="(subCol, subColIdx) in col" :key="subColIdx">
                  <span class="align-middle"
                    >{{ subCol.value
                    }}{{ subCol.unit && subCol.unit != "-" ? subCol.unit : "" }}
                  </span>
                  <template v-if="subCol.reference">
                    <el-tooltip>
                      <QuestionFilled
                        class="w-4 h-4 inline align-middle ml-1 cursor-pointer opacity-50"
                      />
                      <template #content>
                        <div class="text-sm">参考范围：{{ subCol.reference }}</div>
                      </template>
                    </el-tooltip>
                  </template>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <el-empty v-if="!list.length"></el-empty>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, provide, inject } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";

import { request } from "@/utils";
import dayjs from "dayjs";
import { QuestionFilled, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();

const getNodeRelationship = inject("getNodeRelationship");
const diseaseMangeNode = inject("diseaseMangeNode");

const projects = ref([]);
const list = ref([]);
const search = async () => {
  const { data } = await request.post(
    "/idcService/mechanism/medicalData/transferItem/query",
    {
      archivesId: route.query.archivesId,
      itemIds: projects.value.map(v => v.id),
      nodeIds: [],
      date: []
    }
  );
  list.value = (data.list || []).map(v => {
    v.expand = true;
    v.list = v.list.map(v2 => {
      const dateList = {};
      v2.list.forEach(v3 => {
        if (dateList[v3.date]) {
          dateList[v3.date].push(v3);
        } else {
          dateList[v3.date] = [v3];
        }
        v2.list = Object.values(dateList);
      });
      return v2;
    });
    return v;
  });
  console.log(list.value)
};

const recognitionType = ["医学检查项目", "身体物质/部位"];

const relatedRelationship = ["异常属于", "可检测"];
const searchNodes = async (type = 0, name = "") => {
  // const { data } = await request.post(
  //   "/idcService/mechanism/medicalData/transferItem/query",
  //   {
  //     archivesId: route.query.archivesId,
  //     itemIds: [],
  //     nodeIds: [],
  //     date: []
  //   }
  // );
  // projects.value = data.list || []
  const data = await getNodeRelationship(diseaseMangeNode.value, '功能医学关注的检查')
  projects.value = (data || []).map(v => {
    return {
      id: v.mId,
      label: v.mProperties?.name
    }
  })

};
const searchRelateNodes = async () => {
  nodes.value = filter.value.project
    .map(id => {
      return projects.value.find(v => v.id == id)?.list || [];
    })
    .flat();
};

const init = async () => {
  await searchNodes();
  search();
};
init();
</script>

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