var layer;
var form;
var curCamera;

layui.use(['layer'], function () {
    form = layui.form;
    layer = layui.layer;

    // 调色板切换事件
    document.querySelectorAll('.palette-item').forEach(item => {
        item.addEventListener('click', function() {
            document.querySelectorAll('.palette-item').forEach(i => {
                i.classList.remove('active');
            });
            this.classList.add('active');
            const paletteName = this.textContent.trim();
            layer.msg(`已切换至${paletteName}调色板`, {icon: 1, time: 1000});
        });
    });


    //选择摄像头后触发的事件
    const cameraSelect = document.getElementById('select-camera');
    cameraSelect.addEventListener('change', function() {
        const selectedCamera = this.value;
        //console.log("--------------"+selectedCamera);
        video(selectedCamera);

        // 更新温度走势图
        // updateEchartsTemp(selectedCamera);
    });


    // 初始化ECharts温度走势图
    initEchartsTemp();

});

/**
 * 视频播放
 * @param selectId
 */
function video(selectId) {
    //从列表中获取摄像头信息
    curCamera = listCamera.find(camera => camera.id === selectId);
    if (!curCamera) { layer.msg('没有获取到当前摄像头信息……', {icon: 1, time: 1200});}


}

/**
 * 更新温度走势图
 * @param selectId
 */
function updateEchartsTemp(selectId) {
    var data = {
        cameraId: selectId
    };
    $.ajax({
        type: 'POST',
        url: "/security/infrared/chart-data",
        dataType: 'JSON',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            //layer.msg("信息更新完成！！");
        },
        error: function (result) {
           // layer.msg(result.msg);
        }
    });
}

// 初始化ECharts温度走势图
function initEchartsTemp() {
    // 初始化ECharts温度走势图
    var temperatureChartDom = document.getElementById('temperatureChart');
    var temperatureChart = echarts.init(temperatureChartDom);

    // 图表配置项
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['数量 (KG)'],
            top: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '数量 (KG)',
                min: 0,
                max: 3000000,
                axisLabel: {
                    formatter: '{value} KG'
                }
            }
        ],
        series: [
            {
                name: '数量 (KG)',
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 2,
                    color: '#0f3460'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(15, 52, 96, 0.3)' },
                        { offset: 1, color: 'rgba(15, 52, 96, 0.05)' }
                    ])
                },
                data: [2560000, 2510000, 2540000, 2530000, 2490000, 2610000, 2570000]
            }
        ]
    };
    // 渲染图表
    option && temperatureChart.setOption(option);
    // 窗口大小变化时调整图表大小
    window.addEventListener('resize', function() {
        temperatureChart.resize();
    });
}