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

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { barOption } from "./options/barOption.js";

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

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

const initData = () => {
    if (props.styleName === "styleName2") {
        const arr = [];
        props.yData.forEach((item, index) => {
            arr.push({
                value: item.startNum,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: item.startColor,
                            },
                            {
                                offset: 1,
                                color: item.endColor,
                            },
                        ]),
                    },
                },
            });
        });
        barOption[props.styleName].series[0].data = arr;
    } else {
        barOption[props.styleName].series[0].data = props.yData;
    }
    barOption[props.styleName].xAxis.data = props.xData;
    options.value = barOption[props.styleName];
    myChart.value.setOption(options.value);

    // 用于存储当前高亮的数据索引
    let currentHighlightedIndex = null;
    // 监听点击事件
    myChart.value.on("click", (params) => {
        // params 是点击事件返回的所有信息对象
        console.log(params);

        // 例如，可以在控制台输出点击的柱状图的值
        console.log("你点击了：" + params.name + "，其值为：" + params.value);

        // 如果当前已经有高亮的数据索引，并且不是当前点击的索引，则取消之前的高亮
        if (currentHighlightedIndex !== null && currentHighlightedIndex !== params.dataIndex) {
            // myChart.value.dispatchAction({
            //     type: 'downplay',
            //     seriesIndex: params.seriesIndex,
            //     dataIndex: currentHighlightedIndex
            // });
            // 取消之前高亮的效果（如果有的话）
            myChart.value.dispatchAction({
                type: "downplay",
                seriesIndex: 0,
                dataIndex: currentHighlightedIndex,
            });
            myChart.value.dispatchAction({
                type: "downplay",
                seriesIndex: 1,
                dataIndex: currentHighlightedIndex,
            });
            myChart.value.dispatchAction({
                type: "downplay",
                seriesIndex: 2,
                dataIndex: currentHighlightedIndex,
            });
        }
        // 高亮当前点击的柱状体
        myChart.value.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: params.dataIndex,
        });
        // 高亮当前点击的柱状体
        myChart.value.dispatchAction({
            type: "highlight",
            seriesIndex: 1,
            dataIndex: params.dataIndex,
        });
        // 高亮当前点击的柱状体
        myChart.value.dispatchAction({
            type: "highlight",
            seriesIndex: 2,
            dataIndex: params.dataIndex,
        });
        console.log("00000000", params.dataIndex);

        // 高亮当前点击的柱状体
        // myChart.value.dispatchAction({
        //     type: 'highlight',
        //     seriesIndex: params.seriesIndex,
        //     dataIndex: params.dataIndex
        // });

        // 更新当前高亮的数据索引
        currentHighlightedIndex = params.dataIndex;
    });
};

// // 窗口大小变化时重置 ECharts 宽高
// window.addEventListener("resize", () => {
//   if (chartDom.value.clientWidth) {
//   console.log("chartDom.value", chartDom.value.clientWidth);
//     console.log("2222");
//     // 获取新的容器宽高
//     const newWidth = chartDom.value.clientWidth;
//     const newHeight = chartDom.value.clientHeight;

//     // 设置容器的宽高（可选，如果 CSS 已经控制宽度高度，可以跳过这一步）
//     chartDom.value.style.width = newWidth + "px";
//     chartDom.value.style.height = newHeight + "px";
//     console.log('chartDom.value.style.width',chartDom.value.style.width);
//     // 重置 ECharts 实例的宽高
//     myChart.value.resize();
//   }
// });

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

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