<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="bg-white rounded shadow p-4 mt-4">
        <el-timeline>
          <el-timeline-item v-for="(item, index) in historyList" :key="index">
            <div class="space-x-4">
              <span class="text-gray-500 font-bold">
                {{
                  index == historyList.length - 1
                    ? "-"
                    : historyList[
                        index - 1 > 0 ? index - 1 : 0
                      ]?.nextTime?.split(" ")[0]
                }}
                至
                {{ item.nextTime?.split(" ")[0] }}
              </span>
              <el-tag v-if="index != historyList.length - 1">{{
                manageLevel[item.level]?.anotherName
              }}</el-tag>
            </div>
            <div v-if="index !== historyList.length - 1">
              <div>管理目标:</div>
              <el-text size="small">{{
                historyList[index + 1]?.target
              }}</el-text>
            </div>
            <div class="mt-2">
              <span>管理效果评价: </span> <span>{{ item.effect?.name }}</span>
            </div>
            <div>
              <span>主要存在问题:</span>
              <span v-if="item.focus || item?.focus?.length">
                <el-tag class="ml-2" v-for="(pro, i) in item.focus" :key="i">{{
                  pro
                }}</el-tag>
              </span>
              <span v-else>-</span>
            </div>

            <div v-if="index !== historyList.length - 1">
              <span>个性化健康建议:</span>
              <span>{{ historyList[index + 1]?.advise }}</span>
            </div>
          </el-timeline-item>
        </el-timeline>
      </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 { 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 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.effect["程度"])).reverse(),
        type: "line",
        label: {
          show: true,
          position: "top",
          formatter: params => {
            return props.list.find(v => v.effect["程度"] == params.value)
              ?.effect?.name;
          }
        },
        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>
