<template>
    <div>
        <div ref="statsChart" style="height: 240px; margin: 20px 0 40px 0"></div>
    </div>
</template>

<script>
import { getNettyMqttStats } from '@/api/iot/netty';
import { listAlertLogEchartsiot } from '../../../api/iot/alertLog';

export default {
    data() {
        return {
            timer: null,
            // emqx状态数据
            stats: {},
            mqtt: this.$store.state.user.mqtt,
            xAxislist: [],
            datalist: [],
        };
    },
    created() {
        this.getMqttStats();
    },
    beforeDestroy() {
        this.clearData();
    },
    methods: {
        /** 查询mqtt状态数据*/
        getMqttStats() {

            let data = {
                dateType: 1,
                StartDate : '',
                endDate : '',
            };
            data.StartDate = new Date().toISOString().split('T')[0];

            data.endDate = data.StartDate; // 如果需要，可以设置相同的结束日期

            listAlertLogEchartsiot(data).then(rp => {
                this.xAxislist = rp.hours;
                this.datalist = rp.counts;
                this.drawLine();
            });
        },
        drawLine() {

            if (this.mqtt) {
                getNettyMqttStats().then((response) => {
                    this.stats = response.data;
                    this.drawStats();
                    // 轮询
                    this.switper();
                });
            } else {
                this.$nextTick(() => {
                    // 初始值
                    this.stats = {
                        'connections.count': 800,
                        'connections.max': 8000,
                        'sessions.count': 700,
                        'sessions.max': 7000,
                        'topics.count': 600,
                        'topics.max': 6000,
                        'subscribers.count': 500,
                        'subscribers.max': 5000,
                        'routes.count': 400,
                        'routes.max': 4000,
                        'retained.count': 300,
                        'retained.max': 3000,
                    };
                    this.drawStats();
                    // 轮询
                    this.switper();
                });
            }
        },
        /** EMQX状态统计 */
        drawStats() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(this.$refs.statsChart);
            var option;
            option = {
                tooltip: {
                    trigger: 'axis', // 鼠标悬停时触发的类型
                    formatter: function(params) {
                        var html = ''; // 用于构建 tooltip 的 HTML 内容
                        params.forEach(function(param) {
                            // 对每个参数进行处理
                            html += "时间:" + param.name +  '</br>' +"数量:"+ param.value; // param.name 是时间，param.value 是数量
                        });
                        return html; // 返回构建的 HTML 内容
                    },
                    backgroundColor: 'rgba(58,73,116,0.7)', // 提示框背景颜色
                    textStyle: {
                        color: 'rgba(65,235,246,1)', // 字体颜色
                    },
                },
                xAxis: {
                    type: 'category',
                    data: this.xAxislist,
                    axisLabel: {
                        fontSize: 12,
                        color: '#fff',
                    },
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: '#fff', // 设置为灰色
                            width: 0, // 设置线条宽度
                        },
                    },
                    axisLabel: {
                        fontSize: 12,
                        color: '#fff',
                    },
                },
                series: [
                    {
                        data: this.datalist,
                        type: 'line', // 保持为线性图
                        symbol: 'none',  // 设置为 'none'，去除数据点
                        smooth: true,
                        areaStyle: { // 添加面积图样式
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1, // 从顶部到底部
                                colorStops: [
                                    { offset: 0, color: '#3DE6FF' }, // 渐变起始颜色
                                    { offset: 1, color: '#1968FF' },  // 渐变结束颜色
                                ],
                                global: false, // 使用局部渐变
                            },

                        },
                        lineStyle: {
                            width: 3, // 设置线条宽度
                            color: '#3DE6FF', // 设置线条颜色

                        },
                        itemStyle: {
                            borderColor: '#3DE6FF',
                            borderWidth: 1,
                            shadowBlur: 10, // 阴影模糊
                            shadowColor: 'rgba(61, 230, 255, 0.5)', // 阴影颜色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                        },
                    },
                ],
            };

            option && myChart.setOption(option);
        },

        clearData() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        //轮询
        switper() {
            if (this.timer) {
                return;
            }
            let looper = (a) => {
                this.getMqttStats();
            };
            this.timer = setInterval(looper, 60000);
        },
    },
};
</script>
