<template>
  <!-- <div class="bg-[#f0f2f5] sticky z-10 top-0 h-4"></div> -->
  <div
    class="bg-white p-4 flex items-center flex-wrap space-x-2 border border-gray-100 rounded"
  >
    <el-select v-model="filterDisease" filterable>
      <el-option label="全部疾病" :value="''"></el-option>
      <el-option
        v-for="(item, index) in diseaseList"
        :key="index"
        :label="item.name"
        :value="item.nodeId"
      ></el-option>
    </el-select>

    <!-- <el-select v-model="filter.year">
      <el-option
        v-for="(item, index) in 5"
        :key="index"
        :label="`最近${index + 1}年数据`"
        :value="index + 1"
      ></el-option>
    </el-select>

    <el-select v-model="filter.dateType">
      <el-option label="按每年分析统计" :value="1"></el-option>
      <el-option label="按每半年分析统计" :value="2"></el-option>
      <el-option label="按每季度分析统计" :value="3"></el-option>
    </el-select>
    <el-checkbox
      v-model="filter.calcBySegment"
      label="只取统计时间段内的数据进行分析"
    />
    <el-tooltip>
      <QuestionFilled
        class="w-4 h-4 inline align-middle cursor-pointer opacity-50 outline-none"
      />
      <template #content>
        <div class="text-sm">
          <p>1、假设当前时间为2023年6月1日，如选择最近3年数据，按每年分析统计</p>
          <p>2、如果勾选该设置，则系统将会分别取出该用户2023年1月1日至6月1日、2022年1月1日至12月31日、2021年1月1日至12月31日这3年数据分别进行计算后形成分析统计结果</p>
          <p>3、如果不勾选该设置，则系统分别取出该用户2023年6月1日及其之前所有数据、2022年12月31日及其之前所有数据，2021年12月31日及其之前所有数据分别进行计算后形成分析统计结果</p>
          <p>4、其他类型统计以此类推</p>
        </div>
      </template>
    </el-tooltip>

    <el-button type="primary" @click="getReportCharts">确定</el-button> -->
  </div>
  <div class="mt-2">
    <div
      v-for="(item, index) in diseaseList"
      :key="index"
      class="bg-white p-4 mb-4 border shadow-sm border-gray-100 rounded"
      :class="{
        hidden: filterDisease && item.nodeId != filterDisease
      }"
    >
      <div class="h-80 w-full">
        <Chart
          :ref="
            r => {
              chartRefs[index] = r;
            }
          "
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  watch,
  ref,
  reactive,
  inject,
  nextTick,
  onMounted,
  defineAsyncComponent
} from "vue";
import dayjs from "dayjs";
import { useRoute, useRouter } from "vue-router";
import { QuestionFilled, ArrowUp, ArrowDown } from "@element-plus/icons-vue";

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

const route = useRoute();
const router = useRouter();

const props = defineProps({
  nodeId: {
    type: String,
    default: ""
  }
});
const filterDisease = ref("");
const filter = ref({
  archivesId: route.query.archivesId,
  dateType: 1,
  year: 3,
  calcBySegment: false
});

const diseaseList = ref([]);
const medDataList = ref([]);
const tableHeaderColumns = ref([]);

const compareReportData = inject("compareReportData");
const getReportCharts = async () => {
  // const { data } = await request.post(
  //   "/idcService/mechanism/archivesReport/charts",
  //   filter.value
  // );
  // diseaseList.value = data.detail.diseaseList;
  // medDataList.value = data.detail.medDataList;
  // tableHeaderColumns.value = data.detail.tableHeaderColumns;
  // nextTick(() => {
  //   diseaseList.value.forEach((v, i) => {
  //     setOption(chartRefs.value[i], v);
  //   });
  // });
  console.log("compareReportData", compareReportData);
  if (compareReportData && compareReportData.value) {
    const compareDataForYear = compareReportData.value.compareDataForYear;
    console.log("compareDataForYear", compareDataForYear);

    diseaseList.value = compareDataForYear.diseaseList;
    medDataList.value = compareDataForYear.medDataList;

    tableHeaderColumns.value = compareDataForYear.tableHeaderColumns;
    nextTick(() => {
      diseaseList.value.forEach((v, i) => {
        setOption(chartRefs.value[i], v);
      });
    });
  }
};

const init = async () => {
  getReportCharts();
};

watch(() => compareReportData.value, () => {
  init()
}, {
  immediate: true
})
const chartRefs = ref([]);
const setOption = (cRef, item) => {
  // console.log(cRef, item);
  const opt = {
    title: {
      text: item.name + "风险趋势",
      top: "10",
      left: "10"
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "20%"
    },
    legend: {
      top: "bottom"
    },
    xAxis: {
      type: "category",
      data: tableHeaderColumns.value
    },
    tooltip: {
      formatter(param) {
        return `${param.seriesName}: ${param.data.label}`;
      }
    },
    yAxis: {
      type: "value",
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
      max: 6
    },
    series: []
  };
  if (item.name == "血压") {
    const arr1 = [];
    const arr2 = [];
    item.list.forEach(v => {
      const val = v.value.split("/");
      arr1.push({
        ...v,
        value: val[0]
      });
      arr2.push({
        ...v,
        value: val[1]
      });
    });

    opt.series = [
      {
        name: "收缩压",
        data: arr1,
        type: "line",
        label: {
          show: true
        },
        smooth: true
      },
      {
        name: "舒张压",
        data: arr2,
        type: "line",
        label: {
          show: true
        },
        smooth: true
      }
    ];
  } else {
    opt.series = [
      {
        name: item.name,
        data: item.list.map(v => ({
          label: v.riskDesc,
          value: v.riskDegree
        })),
        type: "line",
        label: {
          show: true,
          formatter: param => {
            return `${param.data.label}`;
          }
        },
        smooth: true
      }
    ];
  }
  opt.series.forEach(v => {
    v.data = v.data
      .map(d => {
        const val = /(\d+(\.\d+)?)/.exec(String(d.value));
        if (val) {
          d.value = val[0] || d.value;
        }
        if (isNaN(Number(d.value))) {
          d.value = null;
        }
        return d;
      })
      .filter(d => d.value != null);
  });
  // console.log(opt);

  cRef && cRef.setOption(opt);
};

</script>

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