<template>
    <!-- 监测温度变化值趋势 -->
    <div style="height: 100%">
        <ChartsBox :boxTitle="`监测温度变化值趋势`">
            <div ref="chartContainer" class="container"> </div>
        </ChartsBox>
    </div>
</template>

<script>
import ChartsBox from '@/components/ChartsBox/index'
import { getTemperatureListAPI } from '@/api/home-foundation-pit.js'
import * as echarts from 'echarts'
// require('echarts/theme/macarons')
import 'echarts/theme/macarons'
export default {
    components: { ChartsBox },
    props: {
        deviceId: {
            type: [String, Number],
            default: () => '',
        },
    },
    data() {
        return {
            chart: null,
            xData: [],
            yData: [],
        }
    },
    mounted() {
        // this.$nextTick(() => {
        //     this.initChart()
        // })

        this.getTemperatureListData()
    },
    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: this.xData,
                    boundaryGap: false,
                    axisTick: { show: true },
                    axisLabel: {
                        color: '#4494db',
                        overflow: 'truncate', // 溢出时显示省略号
                        width: 60, // 标签最大宽度（单位px）
                        ellipsis: '...', // 自定义省略符号（可选）
                        interval: 0, // 强制显示所有标签
                    },
                    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: this.yData,
                        itemStyle: {
                            color: '#15a0c6',
                        },
                        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(21, 160, 198, 0.2)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(21, 160, 198, 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()
            }
        },

        async getTemperatureListData() {
            const { data: res } = await getTemperatureListAPI({
                typeId: '174435992023806894663',
            })
            console.log(
                `%c🔍 深基坑监测 ----> 监测温度变化值趋势(右三) 数据出参 %c`,
                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
                '',
                res,
            )

            if (res.length > 0) {
                this.xData = res.map((e) => e.createTime)
                this.yData = res.map((e) => {
                    return {
                        value: e.attrVal,
                        name: e.createTime,
                    }
                })
            } else {
                this.xData = ['24:00']
                this.yData = [
                    {
                        name: '24:00',
                        value: 0,
                    },
                ]
            }

            this.$nextTick(() => {
                this.initChart()
            })
        },
    },
}
</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>
