<template>
    <div class="hc-bar-chart-box">
        <div ref="echart" class="hc-bar-chart-echarts" :style="`width : ${chart?.clientWidth}px`"/>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
const props = defineProps({
    datas: {
        type: Array,
        default: () => ([])
    },
    config: {
        type: Object,
        default: () => ({})
    },
})

//初始变量
let chart = null;
const echart = ref(null)
const datas = ref(props.datas)

//监听
watch(() => [
    props.datas
], ([data]) => {
    datas.value = data
    setDatas(data)
})

//初始化图表
const initChart = () => {
    chart = echarts.init(echart.value)
    setDatas(props.datas)
}

//监听浏览器窗口变化
const windowResize = () => {
    window.addEventListener("resize", resizeEvent);
}

const resizeEvent = () => {
    window.requestAnimationFrame(() => {
        chart.resize();
    })
}

const onResize = () => {
    nextTick(() => {
        chart.resize();
    })
}

//设置数据
const setDatas = (data) => {
    const {name, key, label} = props.config;
    let AxisData = [], series = [];
    for (let i = 0; i < name.length; i++) {
        let keyData = [];
        for (let x = 0; x < data.length; x++) {
            if (AxisData.indexOf(data[x].title) === -1) {
                AxisData.push(data[x].title)
            }
            keyData.push(data[x][key[i]]);
        }
        series.push({
            name: name[i],
            type: 'bar',
            data: keyData,
            tooltip: {
                valueFormatter(value) {
                    return value + label;
                }
            }
        })
    }
    setOptions(AxisData, series)
}

//设置图表
const setOptions = (AxisData, seriesData) => {
    const {name, color, label} = props.config;
    let xLabelWidth = ((chart.getWidth() * 1 - 30 - 40) / AxisData.length) - 30
    chart.setOption({
        color: color,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: name
        },
        xAxis: [
            {
                type: 'category',
                data: AxisData,
                axisLabel: {
                    width: xLabelWidth,
                    overflow: "breakAll",
                    interval: 0,
                    rotate: 0
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                interval: 30,
                axisLabel: {
                    formatter: '{value}' + label
                }
            }
        ],
        series: seriesData
    })
}

//渲染完成
onMounted(() => {
    nextTick(() => {
        initChart()
        windowResize()
    })
})

//被卸载
onUnmounted(() => {
    window.removeEventListener("resize",resizeEvent);
    chart.dispose()
    chart = null
})

// 暴露出去
defineExpose({
    onResize
})
</script>

<style lang="scss" scoped>
.hc-bar-chart-box {
    height: 100%;
    overflow: hidden;
    position: relative;
    .hc-bar-chart-echarts {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
    }
}
</style>
