<template>
    <div class="hc-bar-chart-box">
        <div ref="echart" class="hc-bar-chart-echarts" />
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'

const props = defineProps({
    datas: {
        type: Array,
        default: () => [],
    },
})

let chart = null
const echart = ref(null)

// 监听数据变化
watch(() => props.datas, (newVal) => {
    if (newVal) {
        setOptions(newVal)
    }
}, { deep: true })

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

// 设置图表配置
const setOptions = (chartData) => {
    const names = chartData.map(item => item.name)
    const values = chartData.map(item => item.value)
    
    chart.setOption({
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '3%',
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: '#fff',
                    type: 'solid',
                },
            },
            backgroundColor: '#5087EC',
            borderColor: 'rgba(255,255,255,0.3)',
            textStyle: {
                color: '#fff',
            },
            formatter: (params) => {
                return `${params[0].name}<br/>数据：${params[0].value}`
            },
        },
        xAxis: {
            type: 'category',
            data: names,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#fff',
                interval: 0,
            },
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)',
                    type: 'dashed',
                },
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#fff',
            },
        },
        series: [{
            type: 'bar',
            data: values,
            barWidth: '30%',
            itemStyle: {
                color: '#5087EC',
                borderRadius: [4, 4, 0, 0],
            },
        }],
    })
}

// 监听窗口大小变化
const handleResize = () => {
    chart && chart.resize()
}

// 组件挂载
onMounted(() => {
    nextTick(() => {
        initChart()
        window.addEventListener('resize', handleResize)
    })
})

// 组件卸载
onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    if (chart) {
        chart.dispose()
        chart = null
    }
})

// 暴露方法
defineExpose({
    resize: handleResize,
})
</script>

<style lang="scss" scoped>
.hc-bar-chart-box {
    width: 100%;
    height: 100%;
    position: relative;
    
    .hc-bar-chart-echarts {
        width: 100%;
        height: 100%;
    }
}
</style>