<template>
    <div class="hc-line-chart-box">
        <div ref="echart" class="hc-line-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: {
            top: '5%',
            left: '3%',
            right: '4%',
            bottom: '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',
            },
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#fff',
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)',
                    type: 'dashed',
                },
            },
        },
        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: 'line',
            data: values,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
                color: '#fff',
            },
            lineStyle: {
                color: '#4B91FF',
                width: 2,
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(75,145,255,0.3)' },
                    { offset: 1, color: 'rgba(75,145,255,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-line-chart-box {
    width: 100%;
    height: 100%;
    position: relative;
    
    .hc-line-chart-echarts {
        width: 100%;
        height: 100%;
    }
}
</style>