var layer;
var form;
var curCamera;
var firstQuantity;
var hisChart = null;   //曲线图
var listRecord;
var fileRecord;
var names = ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07'];
var data = [2560000, 2510000, 2540000, 2530000, 2490000, 2610000, 2570000];

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 selectId = this.value;

        ajaxData(selectId);
    });

    // 初始化走势图
    initEcharts(names, data);

});

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

    //获取视频
    video();

    //渲染走势图
    ajaxEcharts();

    //渲染记录
    ajaxListRecord();

    //渲染抓拍图
    ajaxSnapImg();
}

/**
 * 请求图表信息
 */
function ajaxSnapImg() {
    if(!firstQuantity){
        renderSnapImg();
        return;
    }
    fileRecord = null;
    var data = {
        key: firstQuantity.batchId
    };
    $.ajax({
        type: 'POST',
        url: "/security/quantity-files",
        dataType: 'JSON',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.code != "SUCCESS") {
                renderSnapImg();
            } else {
                fileRecord = result.data;
                renderSnapImg();
            }
        },
        error: function (result) {
            renderSnapImg();
        }
    });
}

/**
 * 渲染抓图
 * @returns {null}
 */
function renderSnapImg() {

    if (!fileRecord) return null;

    if (fileRecord.length === 0) return null;

    var record = fileRecord[0];
    if (record) {
        $("#file-time1").text(record.createTime);
        $("#file-img1").attr("src", record.filePath);
    } else {
        $("#file-time1").text("----");
        $("#file-img1").attr("src", "/img/web/security/p-snap.jpg");
    }

    record = fileRecord[1];
    if (record) {
        $("#file-time2").text(record.createTime);
        $("#file-img2").attr("src", record.filePath);
    } else {
        $("#file-time2").text("----");
        $("#file-img2").attr("src", "/img/web/security/p-snap.jpg");
    }

    record = fileRecord[2];
    if (record) {
        $("#file-time3").text(record.createTime);
        $("#file-img3").attr("src", record.filePath);
    } else {
        $("#file-time3").text("----");
        $("#file-img3").attr("src", "/img/web/security/p-snap.jpg");
    }

    record = fileRecord[3];
    if (record) {
        $("#file-time4").text(record.createTime);
        $("#file-img4").attr("src", record.filePath);
    } else {
        $("#file-time4").text("----");
        $("#file-img4").attr("src", "/img/web/security/p-snap.jpg");
    }
}

/**
 * 请求图表信息
 */
function ajaxEcharts() {
    var data = {
        depotId: curCamera.depotId
    };
    $.ajax({
        type: 'POST',
        url: "/security/quantity-chart",
        dataType: 'JSON',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.code != "SUCCESS") {
                renderEcharts(null);
            } else {
                renderEcharts(result.data);
            }
        },
        error: function (result) {
            renderEcharts(null);
        }
    });
}

/**
 * 渲染图表
 * @param chartData
 */
function renderEcharts(chartData) {
    var chart = hisChart;
    if (chartData && chartData.xaxis.length > 0 && chartData.seriesData.length > 0) {
        chart.option.xAxis.data = chartData.xaxis;
        chart.option.series[0].data = chartData.seriesData;
        chart.chart.setOption(chart.option, true);
    } else {
        chart.option.xAxis.data = names;
        chart.option.series[0].data = data;
        chart.chart.setOption(chart.option, true);
    }
    hisChart = chart;
}

/**
 * 请求记录
 */
function ajaxListRecord() {
    firstQuantity = null;
    listRecord = null;
    var data = {
        depotId: curCamera.depotId
    };
    $.ajax({
        type: 'POST',
        url: "/security/quantity-list",
        dataType: 'JSON',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.code != "SUCCESS") {
                renderListRecord();
            } else {
                listRecord = result.data;
                renderListRecord();
            }
        },
        error: function (result) {
            renderListRecord();
        }
    });
}

/**
 * 渲染记录
 * @returns {null}
 */
function renderListRecord() {

    if (!listRecord) return null;

    if (listRecord.length === 0) return null;

    var record = listRecord[0];
    if (record) {
        firstQuantity = record;
        $("#record_title1").text("检测重量：" + record.weight + " KG");
        $("#record_time1").text(record.receiveDate);
        $("#record_content1").text(record.remark);
    } else {
        $("#record_title1").text("检测重量：---- KG");
        $("#record_time1").text("----");
        $("#record_content1").text("检测重量为---- KG，实际重量为---- KG，误差小于-%。");
    }

    record = listRecord[1];
    if (record) {
        $("#record_title2").text("检测重量：" + record.weight + " KG");
        $("#record_time2").text(record.receiveDate);
        $("#record_content2").text(record.remark);
    } else {
        $("#record_title2").text("检测重量：---- KG");
        $("#record_time2").text("----");
        $("#record_content2").text("检测重量为---- KG，实际重量为---- KG，误差小于-%。");
    }

    record = listRecord[2];
    if (record) {
        $("#record_title3").text("检测重量：" + record.weight + " KG");
        $("#record_time3").text(record.receiveDate);
        $("#record_content3").text(record.remark);
    } else {
        $("#record_title3").text("检测重量：---- KG");
        $("#record_time3").text("----");
        $("#record_content3").text("检测重量为---- KG，实际重量为---- KG，误差小于-%。");
    }

    record = listRecord[3];
    if (record) {
        $("#record_title4").text("检测重量：" + record.weight + " KG");
        $("#record_time4").text(record.receiveDate);
        $("#record_content4").text(record.remark);
    } else {
        $("#record_title4").text("检测重量：---- KG");
        $("#record_time4").text("----");
        $("#record_content4").text("检测重量为---- KG，实际重量为---- KG，误差小于-%。");
    }
}

/**
 * 视频播放
 * @param
 */
function video() {

    var data = {
        id: curCamera.cameraSn,
        playType: curCamera.playType
    };
    $.ajax({
        type: 'POST',
        url: "/security/get-media",
        dataType: 'JSON',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.code != "SUCCESS") {
                layer.msg(result.msg, {icon: 1, time: 1200});
            } else {
                toPlay(result.playUrl);
            }
        },
        error: function (result) {
            layer.msg("未获取到播放信息！！", {icon: 1, time: 1200});
        }
    });

}

/**
 * 播放视频
 * @param url
 */
function toPlay(url) {
    var html = '';
    if (url) {
        html += '<iframe src="' + url + '" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>';
    } else {
        html += '<img src="/img/web/security/p-snap.jpg">';
    }
    $("#divPlugin2").html(html);
}

/**
 * 启动开始检测
 */
function checkStart() {
    if (!curCamera) {
        shoTips("请先选择设备！");
        return;
    }
    layer.msg("开始执行……");
    var data = {
        'depotId': curCamera.depotId
    };
    $.ajax({
        type: "POST",
        url: "/security/check-single",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.code == "ORDER_SUCCESS") {
                shoTips("命令发生成功，请等待终端返回结果……");
            } else {
                shoTips("命令发送失败：" + result.msg);
            }
        },
        error: function () {
            shoTips("检测出现异常，执行失败！");
        }
    });
}

/**
 * 停止检测
 */
function checkStop() {
    if (!curCamera) {
        shoTips("请先选择仓库！");
        return;
    }
    layer.msg("开始执行……");
    var data = {
        'depotId': curCamera.depotId
    };
    $.ajax({
        type: "POST",
        url: "/security/check-stop",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.code == "ORDER_SUCCESS") {
                shoTips("命令发生成功……");
            } else {
                shoTips("命令发送失败：" + result.msg);
            }
        },
        error: function () {
            shoTips("检测出现异常，执行失败！");
        }
    });
}

// 初始化ECharts温度走势图
function initEcharts(names, data) {
    // 初始化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: names
            }
        ],
        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: data
            }
        ]
    };
    // 渲染图表
    option && temperatureChart.setOption(option);
    hisChart = {"chart": temperatureChart, "option": option};

    // 窗口大小变化时调整图表大小
    window.addEventListener('resize', function () {
        temperatureChart.resize();
    });
}

function shoTips(msg) {
    layer.msg(msg,
        {time: 3000, shift: 5, offset: "rb"},
        function () {
        });
}