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

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

const props = defineProps({
    styleName: {
        type: String,
        default: "styleName1",
    },
    xData: {
        type: Array,
        default: () => [],
    },
    yData: {
        type: Array,
        default: () => [],
    },
});

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

const initData = () => {
    const barOptionValue = deepClone(barOption)
    if (props.styleName === "styleName1") {
        barOptionValue[props.styleName].series[0].data = props.yData
        barOptionValue[props.styleName].yAxis.data = props.xData;
    } else if(props.styleName === "styleName3"){
        const arr = []
        props.yData.forEach((item,index) =>{
            arr.push({
                name:`PG${index + 1}`,
                type: 'bar',
                barWidth: '20%',
                data: props.yData.map(ele => ele[`PG${index + 1}`]),
                label: {
                    show: true,
                    color: '#fff',
                    rotate: 90,
                    fontWeight:'bold'
                },
            })
        })
        arr.push({
            name: 'Std >98%',
            type: 'line',
            color: '#D14FFF',
            data:[],
            lineStyle: {
                type: 'dashed' // 系列线型为虚线
            },
            markLine:{
                symbol: ['none', 'none'],
                data:[{
                    yAxis: 98,
                    lineStyle: { type: 'dashed', color: '#D14FFF', width: 2 } // 样式： 线型、颜色、线宽
                }]
            }
        })
        barOptionValue[props.styleName].series = arr
        barOptionValue[props.styleName].xAxis.data = props.xData;
    }else{
        barOptionValue[props.styleName].series[0].data = props.yData;
        barOptionValue[props.styleName].xAxis.data = props.xData;
    }
    options.value = barOptionValue[props.styleName];
    myChart.setOption(options.value);
};
 
onMounted(() => {
    myChart = echarts.init(chartDom.value);
});

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

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