<template>
  <div class="p-4">
    <div v-if="props.list.length">
      <div class="bg-white h-64 rounded shadow">
        <Chart ref="chartRef" />
      </div>
      <div class="flex mt-4 w-full space-x-4">
        <div class="bg-white rounded shadow p-1">
          <div
            v-for="(item, index) in historyList"
            :key="index"
            class="cursor-pointer hover:bg-gray-50 flex items-center justify-between space-x-4 p-2 py-3 last:border-b-0 border-b border-solid border-gray-100"
            :class="{
              'text-blue-500': currentHistory == index,
              'text-gray-500': currentHistory != index
            }"
            @click="currentHistory = index"
          >
            <span class="font-bold">
              {{
                index == historyList.length - 1
                  ? "以前"
                  : historyList[
                      index - 1 > 0 ? index - 1 : 0
                    ]?.createdAt?.split(" ")[0]
              }}
              至
              {{ item.createdAt?.split(" ")[0] }}
            </span>
            <div class="flex items-center">
              <span class="">评估记录</span>
              <ArrowRight class="w-4" />
            </div>
          </div>
        </div>
        <div class="bg-white rounded shadow p-4 flex-1 space-y-4">
          <div>
            <div class="font-bold text-base">管理评估对应时间段:</div>
            <div>
              {{
                currentHistory == historyList.length - 1
                  ? "以前"
                  : historyList[
                      currentHistory - 1 > 0 ? currentHistory - 1 : 0
                    ]?.createdAt?.split(" ")[0]
              }}
              至
              {{ historyList[currentHistory].createdAt?.split(" ")[0] }}
            </div>
          </div>
          <div
            v-if="
              currentHistory !== historyList.length - 1 &&
              historyList[currentHistory]?.etiologies?.length
            "
          >
            <div class="font-bold text-base">期间对应的病因:</div>
            <el-tag
              v-for="(tag, tagIdx) in historyList[currentHistory + 1]
                .etiologies"
              :key="tagIdx"
              size="large"
              type="danger"
              class="m-1"
              >{{ tag.label }}</el-tag
            >
          </div>
          <div>
            <div class="font-bold text-base">健康综合评分:</div>
            <el-tag size="large" class="m-1"
              >{{ historyList[currentHistory]?.score }}分</el-tag
            >
          </div>
          <template v-if="currentHistory !== historyList.length - 1">
            <div>
              <div class="font-bold text-base">期间期望达成的效果:</div>
              <div class="p-2 bg-gray-50 rounded">
                <div v-html="historyList[currentHistory + 1]?.target"></div>
              </div>
            </div>
            <div class="space-y-4">
              <div class="font-bold text-base">期间执行的个性化干预方案:</div>
              <div
                v-for="(child, childIdx) in historyList[currentHistory + 1]
                  .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 class="font-bold text-base">需要进一步检查:</div>
              <div class="p-2 bg-gray-50 rounded">
                <el-table :data="historyList[currentHistory + 1]?.furtherInfo">
                  <el-table-column
                    label="检查项目"
                    prop="label"
                    width="200"
                  ></el-table-column>
                  <el-table-column
                    label="检查意义"
                    prop="tip"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div v-else>
      <el-empty description="暂无评估历史"></el-empty>
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  watch,
  ref,
  reactive,
  inject,
  onActivated,
  onMounted,
  defineAsyncComponent,
  defineProps,
  nextTick,
  defineExpose
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { manageLevel } from "@/enums/managementPlan.ts";
import {
  CopyDocument,
  Fold,
  ArrowLeft,
  ArrowRight
} from "@element-plus/icons-vue";
import { useManageProjectStoreHook } from "@/store/modules/manageProject";
const useManageProject = useManageProjectStoreHook();

import { request, formateArchivesModuleValue, deepClone } from "@/utils";
import Chart from "@/components/Chart.vue";

const currentArchiveId = computed(() => {
  return useManageProjectStoreHook()?.currentArchiveId;
});
const props = defineProps({
  list: {
    type: Array
  }
});
const currentHistory = ref(0);
const historyList = computed(() => {
  let arr = props.list;
  console.log(arr, "历史数据");
  return arr;
});
const chartRef = ref();

const list = ref([]);

const init = async () => {
  chartRef?.value?.setOption({
    title: {
      text: "管理效果趋势",
      top: "10",
      left: "10"
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "15%"
    },
    // tooltip: {
    //   trigger: "axis",
    //   showContent: true
    // },
    xAxis: {
      type: "category",
      data: props.list.map(v => v.createdAt?.split(" ")[0]).reverse()
    },
    yAxis: {
      type: "value",
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false }
    },
    series: [
      {
        data: props.list.map(v => Number(v.score)).reverse(),
        type: "line",
        label: {
          show: true,
          position: "top",
          formatter: params => {
            return `${params.value}分`;
          }
        },
        smooth: true
      }
    ]
  });
};
watch(
  props.list,
  (n, o) => {
    nextTick(() => {
      setTimeout(init, 1000);
    });
  },
  { deep: true, immediate: true }
);
onMounted(() => {
  // init();
});

defineExpose({
  initChart: () => {
    nextTick(init);
  }
});
</script>

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