<template>
    <!-- 重量监测 -->
    <div style="height: 100%">
        <ChartsBox :boxTitle="`重量监测`">
            <div ref="chartContainer" class="container"> </div>
        </ChartsBox>
    </div>
</template>

<script>
import ChartsBox from '@/components/ChartsBox/index'
import * as echarts from 'echarts'
require('echarts/theme/macarons')
export default {
    components: { ChartsBox },
    data() {
        return {
            chart: null,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null

        window.removeEventListener('resize', this.handleResize)
        if (this.chart) {
            this.chart.dispose()
            this.chart = null
        }
    },
    methods: {
        initChart() {
            // 使用 ref 获取 container 元素
            const container = this.$refs.chartContainer
            this.chart = echarts.init(container, 'macarons')

            this.chart.setOption({
                xAxis: {
                    type: 'category',
                    data: [
                        '00:00',
                        '03:00',
                        '06:00',
                        '09:00',
                        '12:00',
                        '15:00',
                        '18:00',
                        '21:00',
                        '24:00',
                    ],
                    boundaryGap: false,
                    axisTick: { show: true },
                    axisLabel: { color: '#4494db' },
                    axisLine: {
                        lineStyle: { color: '#4494db' },
                    },
                    // 添加x轴网格线虚线样式
                },
                yAxis: {
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: { color: '#4494db' },
                    },
                    // 添加y轴网格线虚线样式
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(123, 95, 75, 0.3)',
                            width: 1,
                        },
                    },
                },
                grid: {
                    left: 10,
                    right: 15,
                    bottom: 5,
                    top: 12,
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'cross' },
                    padding: [5, 10],
                },
                series: [
                    {
                        name: '数量',
                        type: 'line',
                        smooth: true, // 启用平滑曲线
                        data: [
                            { value: 12, name: '00:00' },
                            { value: 25, name: '03:00' },
                            { value: 30, name: '06:00' },
                            { value: 18, name: '09:00' },
                            { value: 12, name: '12:00' },
                            { value: 16, name: '15:00' },
                            { value: 19, name: '18:00' },
                            { value: 23, name: '21:00' },
                            { value: 13, name: '24:00' },
                        ],
                        itemStyle: {
                            color: '#F1FF2B',
                        },
                        // lineStyle: {
                        //     color: new echarts.graphic.LinearGradient(
                        //         0,
                        //         0,
                        //         0,
                        //         1,
                        //         [
                        //             {
                        //                 offset: 0,
                        //                 color: 'rgba(21, 160, 198, 1)',
                        //             },
                        //             {
                        //                 offset: 1,
                        //                 color: 'rgba(230, 135, 26, 0.3)',
                        //             },
                        //         ],
                        //     ),
                        //     width: 2,
                        // },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: 'rgba(241, 209, 43, 0.2)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(241, 203, 43, 0.1)',
                                    },
                                ],
                            ),
                        },
                        // 添加线条动画效果
                        animationDuration: 3000,
                        animationEasing: 'cubicInOut',
                        symbol: 'circle',
                        symbolSize: 6,
                        showSymbol: false, // 初始不显示点
                        // 高亮动画配置
                        emphasis: {
                            scale: true,
                            itemStyle: {
                                color: '#ffeb3b',
                                borderColor: '#fff',
                                borderWidth: 2,
                            },
                        },
                        // 线条动画效果
                        lineAnimation: {
                            duration: 3000,
                            easing: 'cubicInOut',
                            delay: function (idx) {
                                return idx * 100
                            },
                        },
                        effect: {
                            show: true,
                            period: 4, // 动画周期
                            trailLength: 0.2, // 动画轨迹长度
                            symbol: 'arrow', // 使用箭头符号
                            symbolSize: 10, // 设置箭头大小
                            loop: true, // 循环播放
                            // 动画的方向和效果
                            constantSpeed: 15, // 设定动画的速度
                        },
                    },
                ],
                // 添加全局动画配置
                animation: {
                    duration: 3000,
                    easing: 'cubicInOut',
                    seriesKey: 'line',
                    animationDelay: function (idx) {
                        return idx * 100
                    },
                },
            })

            // 添加窗口大小变化时的自适应
            window.addEventListener('resize', this.handleResize)

            setTimeout(() => {
                this.chart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                })
            }, 500)
        },
        handleResize() {
            if (this.chart) {
                this.chart.resize()
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    z-index: 9999;
}
</style>
