<template>
    <div class="card-chart" ref="chartRef"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { galleryIndicatorLine } from "./chartSeting";
import { deepClone } from "@/common/commonFun";
import eventBus from "@/api/eventBus";

const props = defineProps({
    indexName: {
        type: String,
        default: "",
    },
    type: {
        type: String,
        default: "",
    },
    chartData: {
        type: Object,
        default: () => {},
    },
    isDark: {
        type: Boolean,
        default: false
    },
});

let myChart = ref(null);
const chartRef = ref();
const options = ref({});


onMounted(() => {
    myChart.value = echarts.init(chartRef.value);
    options.value = deepClone(galleryIndicatorLine);
    updateValue(false)
});

eventBus.on("chart:updateOption",(data)=>{
    updateValue(true, data)
})

const updateValue = (isUpdate, data) =>{
    let chartList = {}
    if (isUpdate) {
        // const filterData = filterDataAfterJanuary(data)
        chartList = data
    } else {
        chartList = props.chartData
    }
    myChart.value.clear()
    if(chartList.dates?.length){
        options.value.xAxis.data = chartList.dates
        options.value.series[0].name = chartList.diseaseRiskName
        options.value.legend.data[0] = chartList.diseaseRiskName
        options.value.series[0].data = chartList.diseaseRisk
        options.value.series[1].name = chartList.growthRiskName
        options.value.legend.data[1] = chartList.growthRiskName
        options.value.series[1].data = chartList.growthRisk
        options.value.series[2].name = chartList.phenoParam1Name
        options.value.legend.data[2] = chartList.phenoParam1Name
        options.value.series[2].data = chartList.phenoParam1
        options.value.series[3].name = chartList.phenoParam2Name
        options.value.legend.data[3] = chartList.phenoParam2Name
        options.value.series[3].data = chartList.phenoParam2
        options.value.series[4].name = chartList?.phenoParam3Name
        options.value.legend.data[4] = chartList.phenoParam3Name
        options.value.series[4].data = chartList?.phenoParam3
        if (props.isDark) {
            options.value.yAxis[0].splitLine.lineStyle.color = "#333333"
            options.value.yAxis[0].axisLabel.textStyle.color = "#999999"
            options.value.xAxis.axisLine.lineStyle.color = "#333333"
            options.value.xAxis.axisLabel.textStyle.color = "#999999"
            options.value.legend.textStyle.color = "rgba(255, 255, 255, 0.6)"
        }
        myChart.value.setOption(options.value);
    }
}

// 过滤函数，根据日期截取数据
const filterDataAfterJanuary = (rawData) => {
      const startDate = new Date('2025-01-01');
      const filtered = {
        dates: [],
        growthRisk: [],
        diseaseRiskName: "",
        growthRiskName: "",
        phenoParam1Name: "",
        phenoParam2Name: "",
        phenoParam3Name: "",
        phenoParam4Name: "",
        phenoParam1: [],
        phenoParam2: [],
        phenoParam3: [],
        phenoParam4: [],
      };
 
      rawData?.dates.forEach((dateStr, index) => {
        const date = new Date(dateStr);
        if (date >= startDate) {
          filtered.dates.push(dateStr);
          filtered.diseaseRiskName = rawData.diseaseRiskName
          filtered.growthRiskName = rawData.growthRiskName
          filtered.phenoParam1Name = rawData.phenoParam1Name
          filtered.phenoParam2Name = rawData.phenoParam2Name
          filtered.phenoParam3Name = rawData.phenoParam3Name
          filtered.phenoParam4Name = rawData.phenoParam4Name
          filtered.growthRisk.push(rawData.growthRisk[index]);
          filtered.phenoParam1.push(rawData.phenoParam1[index]);
          filtered.phenoParam2.push(rawData.phenoParam2[index]);
          filtered.phenoParam3.push(rawData.phenoParam3[index]);
          filtered.phenoParam4.push(rawData.phenoParam4[index]);
        }
      });
 
      return filtered;
    };
</script>

<style lang="scss" scoped>
.card-chart {
    padding: 8px 4px 0 4px;
    width: 100%;
    height: 160px;
    box-sizing: border-box;
}
</style>
