<template>
    <div ref="chartDom" class="charts"></div>
</template>

<script setup>
import { nextTick, onMounted, ref,watch } from "vue";
import * as echarts from "echarts";
import { oneLine } from "./options/oneLineOption";
import { deepClone } from "@/common/commonFun";

const props = defineProps({
    styleName: {
        type: String,
        default: "styleName1",
    },
    xData: {
        type: Array,
        default: () => [],
    },
    yData: {
        type: Array,
        default: () => [],
    },
    minData: {
        type: Array,
        default: () => [],
    },
    chartDate: {
        type: Array,
        default: () => [],
    },
    name: {
        type: String,
        default: "",
    },
    customVal: {
        type: Object,
        default: () => {}
    },
    yAxisUnit: {
        type: String,
        default: "%"
    }
});

const chartDom = ref(null);
let myChart = null;
const options = ref(null);

const initData = () =>{
    const lineOption = deepClone(oneLine)
    lineOption.series[0].data = props.yData
    lineOption.series[0].name = props.name
    // lineOption.series[0].markPoint.data[0].value = props.yData[0] + " %"
    // lineOption.series[0].markPoint.data[0].yAxis = props.yData[0]
    // lineOption.series[0].markPoint.data[1].yAxis = props.yData[0]

    if (props.minData && props.minData.length) {
        lineOption.series[1].data = props.minData
        // lineOption.series[1].markPoint.data[0].value = props.minData[0]
        // lineOption.series[1].markPoint.data[0].yAxis = props.minData[0]
        // lineOption.series[1].markPoint.data[1].yAxis = props.minData[0]
    } else {
        lineOption.series.pop()
    }
    if (props.chartDate && props.chartDate.length) {
    //     lineOption.series[0].markPoint.data[0].xAxis = props.chartDate[0]
    //     lineOption.series[0].markPoint.data[1].xAxis = props.chartDate[0]
        lineOption.xAxis.data = props.chartDate
    }
    if (props.customVal && props.customVal?.min) {
        lineOption.yAxis[0].min = props.customVal.min
        lineOption.yAxis[0].max = props.customVal.max
        lineOption.grid.right = 20
        lineOption.yAxis[0].axisLabel.align = "left"
        lineOption.yAxis[0].axisLabel.formatter = `{value} ${props.yAxisUnit}`
    } else {
        // 设置 y 轴单位
        lineOption.yAxis[0].axisLabel.formatter = `{value} ${props.yAxisUnit}`
    }

    options.value = lineOption;
    nextTick(() => {
        myChart.setOption(options.value);
    })
}

onMounted(() => {
    myChart = echarts.init(chartDom.value);
    initData();
});

watch(()=>props.yData,(newValue,oldValue) =>{
    if(newValue){
        initData();
    }
})
</script>

<style lang="scss" scoped>
.charts {
    width: 100%;
    height: 100%;
}
</style>
