<template>
  <div class="p-4 space-y-4 h-full overflow-y-auto">
    <div class="border border-solid border-gray-100 rounded shadow-lg p-4">
      <div class="space-y-4">
        <div class="font-bold text-base">综合评估:</div>

        <div class="space-y-2">
          <span>临床诊断</span>
          <div>

            <div v-if="medicalHistory.length">
              <el-tag
                v-for="(t, tIdx) in medicalHistory"
                :key="tIdx"
                class="mr-1 mb-1"
              >
                <span class="inline-block align-middle">{{ t }} </span>
              </el-tag>
            </div>
            <div v-else class="text-sm text-gray-500">暂无数据</div>
          </div>
        </div>
        <div class="space-y-2">
          <span>重大疾病风险评估</span>
          <div>
            <div v-if="highRiskDiseaseList.length">
              <el-tag
                v-for="(t, tIdx) in highRiskDiseaseList"
                :key="tIdx"
                class="mr-1 mb-1"
              >
                <span class="inline-block align-middle">{{ t.name }} </span>
              </el-tag>
            </div>

            <div v-else class="text-sm text-gray-500">暂无有明显风险疾病</div>
          </div>
        </div>
        <div class="space-y-2">
          <span>功能医学分析</span>
          <div>
            <div v-if="etiologies.length">
              <el-tag
                v-for="(child, childIdx) in etiologies"
                :key="childIdx"
                class="mr-1 mb-1"
                type="danger"
                >{{ child.label }}</el-tag
              >
            </div>
            <div v-else class="text-sm text-gray-500">暂未选择</div>
          </div>
        </div>
      </div>
    </div>
    <div class="border border-solid border-gray-100 rounded shadow-lg p-4">
      <el-form label-position="top">
        <el-form-item
          :label="
            lastEvaluation
              ? `健康综合评分(${dayjs(lastEvaluation.createdAt).format(
                  'YYYY-MM-DD'
                )}至${dayjs().format('YYYY-MM-DD')}):`
              : '健康综合评分：'
          "
          required
        >
          <!-- <el-select v-model="evaluation" filterable @change="evaluationChange">
            <el-option
              v-for="(item, index) in situation"
              :key="index"
              :label="item.label"
              :value="index"
            ></el-option>
          </el-select> -->
          <div class="flex items-center">
            <div class="w-[300px] mx-4">
              <el-slider v-model="evaluation" @change="evaluationChange" />
            </div>
            <span class="text-gray-600">{{ evaluation }}</span>
            <span class="text-gray-600 text-xs">分</span>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- <div v-if="lastEvaluation" class="space-y-4">
      <div class="border border-solid border-gray-100 rounded shadow-lg p-4">
        <div class="space-y-4">
          <div class="font-bold text-base">病因变化对比:</div>
          <div class="">
            <div class="text-gray-500 text-sm m-1">
              上次（{{
                dayjs(lastEvaluation.createdAt).format("YYYY-MM-DD")
              }}）分析后的主要病因:
            </div>
            <el-tag
              v-for="(tag, tagIdx) in lastEvaluation.etiologies"
              :key="tagIdx"
              size="large"
              type="danger"
              class="m-1"
              >{{ tag.label }}</el-tag
            >
          </div>
          <div class="">
            <div class="text-gray-500 text-sm m-1">今天分析后的主要病因:</div>

            <div v-if="etiologies.length">
              <el-tag
                v-for="(child, childIdx) in etiologies"
                :key="childIdx"
                class="m-1"
                type="danger"
                >{{ child.label }}</el-tag
              >
            </div>
            <div v-else class="text-sm text-gray-500">暂未选择</div>
          </div>
        </div>
      </div>
      <div class="border border-solid border-gray-100 rounded shadow-lg p-4">
        <div>
          <div class="font-bold text-base">上次设定的期望达成目标:</div>
          <div class="p-2 bg-gray-50 rounded">
            <div v-html="lastEvaluation?.target"></div>
          </div>
        </div>
      </div>
      <div class="border border-solid border-gray-100 rounded shadow-lg p-4">
        <div class="space-y-4">
          <div class="font-bold text-base">上次制定的个性化干预方案:</div>
          <div
            v-for="(child, childIdx) in lastEvaluation.personalizeInterventions"
            :key="childIdx"
          >
            <template v-if="child.content">
              <div class="font-bold">{{ child.title }}:</div>
              <div class="p-2 bg-gray-50 rounded">
                <div v-html="child.content"></div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import {
  computed,
  watch,
  markRaw,
  ref,
  inject,
  onMounted,
  provide,
  defineAsyncComponent,
  nextTick,
  shallowRef
} from "vue";
import { useRoute, useRouter } from "vue-router";
import dayjs from "dayjs";
import { debounce, request } from "@/utils";

const [route, router] = [useRoute(), useRouter()];
const parentState = inject("parentState");
const healthHistoryList = inject("healthHistoryList");
const getNodes = inject("getNodes");
const updateStateValueForKey = inject("updateStateValueForKey");
const situation = ref([]);
const evaluation = ref(parentState.value.score);

const etiologies = computed(() => parentState.value.etiologies);
const lastEvaluation = ref();

const medicalHistory = shallowRef([]);
const highRiskDiseaseList = shallowRef([]);
const init = async () => {
  const nodes = await getNodes({
    tag: "管理效果"
  });
  situation.value = (nodes?.list || [])
    .map(v => {
      return {
        id: v.id,
        label: v.properties?.name,
        sort: v.properties?.["程度"]
      };
    })
    .sort((a, b) => a.sort - b.sort);

  // if (healthHistoryList.value[0]) {
  //   lastEvaluation.value = healthHistoryList.value[0];
  //   console.log(lastEvaluation.value);
  // }

  const { data } = await request.get(
    `/archivesService/mechanism/archives/portrait`,
    {
      params: {
        archivesId: route.query.archivesId
      }
    }
  );
  medicalHistory.value = (data.list.find(v => v.sort == 4)?.list || [])
    .map(v => v.list)
    .flat()
    .map(v => v.value)
    .flat();

  const { data: archivesData } = await request.get(
    "/archivesService/mechanism/archives/detail",
    {
      params: {
        archivesId: route.query?.archivesId
      }
    }
  );
  highRiskDiseaseList.value = archivesData.highRiskDiseaseList;
};
init();

const evaluationChange = debounce(() => {
  updateStateValueForKey("score", evaluation.value);
}, 100);
</script>

<style lang="scss" scoped>
::v-deep .el-slider__bar {
  background: transparent;
  // background-image: linear-gradient(to right, #ff5f6d, #ffb641, #42f57b);
}
::v-deep .el-slider__runway {
  background-image: linear-gradient(to right, #ff5f6d, #ffb641, #42f57b);
}
</style>
