var myCharts;
//对应widget.js中MyWidget实例化后的对象
var thisWidget;

var tmpQueryParams;

//当前页面业务
function initWidgetView(_thisWidget) {
    thisWidget = _thisWidget;

    //开始查询历史数据
    $("#startQueryHistory").click(function () {
        queryEchartDataByTimePeriod();
    });
}

function queryEchartDataByTimePeriod() {
    if (myCharts) {
        $('#echart').removeAttr('_echarts_instance_');
    }
    var backend_url = tmpQueryParams.nodejs_url_predix + "dataapi/Bdata?bid=get_" + tmpQueryParams.layerid + "_single_path&datatype=" + tmpQueryParams.datatype + "&siteid=" + tmpQueryParams.siteid + "&datatime1=" + tmpQueryParams.appDateHourStart + "&datatime2=" + tmpQueryParams.appDateHourEnd + "&count=10";
    // all 1006xx layer has the same legend ！！
    console.log(tmpQueryParams)
    echart_show(backend_url,tmpQueryParams)
}

function DatePicker(beginSelector, endSelector) {

    var dateFormat = tmpQueryParams.datatype == 'day' ? 'yyyy-mm-dd' : 'yyyy-mm-dd hh:00:00';

    var miniView = tmpQueryParams.datatype == 'day' ? 'month' : 'day';
    $(beginSelector).datetimepicker({
        bootcssVer: 3, //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
        format: dateFormat,
        minView: miniView,
        todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
        clearBtn: true,
        language: 'zh-CN',
        autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。
        keyboardNavigation: true, //是否允许通过方向键改变日期。
        forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。
        initialDate: new Date(),
        todayHighlight: 1, //如果为true, 高亮当前日期
        endDate: new Date()
    }).on('changeDate', function (ev) {
        if (ev.date) {
            $(endSelector).datetimepicker('setStartDate', new Date(ev.date.valueOf()))
        } else {
            $(endSelector).datetimepicker('setStartDate', null);
        }
        console.log($(beginSelector).val())
        tmpQueryParams.appDateHourStart = $(beginSelector).val();
    })
    $(endSelector).datetimepicker({
        bootcssVer: 3, //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
        format: dateFormat,
        minView: miniView,
        todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
        clearBtn: true,
        language: 'zh-CN',
        autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。
        keyboardNavigation: true, //是否允许通过方向键改变日期。
        forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。
        initialDate: new Date(),
        todayHighlight: 1, //如果为true, 高亮当前日期
        endDate: new Date()
    }).on('changeDate', function (ev) {
        console.log($(endSelector).val())
        tmpQueryParams.appDateHourEnd = $(endSelector).val();
    })
}

function reloadData(params) {
    tmpQueryParams = params;
    DatePicker("#appDateHourStart", '#appDateHourEnd');
    $("#appDateHourStart").datetimepicker("setDate", new Date(params.appDateHourStart));
    $('#appDateHourEnd').datetimepicker('setDate', new Date(params.appDateHourEnd));
    //loadLineChartbySiteid(params);
    queryEchartDataByTimePeriod();
    if (tmpQueryParams.layerid == 3001 || tmpQueryParams.layerid == 3002 || tmpQueryParams.layerid == 3003 || tmpQueryParams.layerid == 3000) {
        loadDetailedInfobyGrid(params)
    } else {
        loadDetailedInfobySiteid(params);
    }
}

function loadDetailedInfobySiteid(params) {
    $("#indexTb").empty();
    var backend_url = params.nodejs_url_predix + "dataapi/Bdata?bid=get_" + params.layerid + "_single&datatype=" + params.datatype + "&siteid=" + params.siteid + "&datatime=" + params.datatime;
    $.ajax({
        type: 'get',
        dataType: 'json',
        data: {},
        async: false, //同步
        url: backend_url,
        success: function (data) {
            var tableData = data.data.result;
            if (tableData != null && tableData.length > 0) {
                var topObj = tableData[0];
                topObj = changeNullAndundefinedToEmpty(topObj);
                var _tr = "<tr  onmouseover='over(this)' onmouseout='out(this)'><td>1</td><td>编码</td><td>" + topObj.code + "</td><td>/</td></tr>"
                $("#indexTb").append(_tr);
                _tr = "<tr  onmouseover='over(this)' onmouseout='out(this)' ><td>2</td><td>名称</td><td>" + topObj.name + "</td><td>/</td></tr>"
                $("#indexTb").append(_tr);
                _tr = "<tr  onmouseover='over(this)' onmouseout='out(this)' ><td>3</td><td>时间</td><td>" + topObj.datatime + "</td><td>/</td></tr>"
                $("#indexTb").append(_tr);
                _tr = "<tr  onmouseover='over(this)' onmouseout='out(this)' ><td>4</td><td>经度</td><td>" + topObj.lon + "</td><td>/</td></tr>"
                $("#indexTb").append(_tr);
                _tr = "<tr  onmouseover='over(this)' onmouseout='out(this)' ><td>5</td><td>纬度</td><td>" + topObj.lat + "</td><td>/</td></tr>"
                $("#indexTb").append(_tr);
                var tmp_index = 6;
                for (var p in topObj) { //遍历json对象的每个key/value对,p为key
                    if (p !== 'code' && p !== 'name' && p !== 'datatime' && p !== 'lon' && p !== 'lat') {
                        _tr = "<tr  onmouseover='over(this)' onmouseout='out(this)' ><td>" + tmp_index + "</td><td>" + p + "</td><td>" + topObj[p] + "</td><td>" + getUnitByqindex(p) + "</td></tr>"
                        $("#indexTb").append(_tr);
                        tmp_index++;
                    }
                };
                $("#indexTb").find("td:contains(pm25)").text("PM₂.₅");
                $("#indexTb").find("td:contains(pm10)").text("PM₁₀");
                $("#indexTb").find("td:contains(no2)").text("NO₂");
                $("#indexTb").find("td:contains(co)").text("CO");
                $("#indexTb").find("td:contains(nox)").text("NOₓ");
                $("#indexTb").find("td:contains(so2)").text("SO₂");
                $("#indexTb").find("td:contains(o31)").text("O₃₁");
                $("#indexTb").find("td:contains(o38)").text("O₃₈");
                $("#indexTb").find("td:contains(o3)").text("O₃");
                $("#indexTb").find("td:contains(no)").text("NO");
                $("#indexTb").find("td:contains(aqi)").text("AQI");
                $("#indexTb").find("td:contains(tsp)").text("TSP");
            } else {
                haoutil.msg("无查询记录，请更换查询条件！");
            }
        },
        error: function (request, textStatus) {
            haoutil.msg("查询错误，请联系管理员！！！")
        }
    });
}

function loadDetailedInfobyGrid(params) {
    $("#indexTb").empty();
    $("#headInfo").empty();
    var backend_url = params.nodejs_url_predix + "dataapi/Bdata?bid=get_" + params.layerid + "_single&datatype=" + params.datatype + "&siteid=" + params.siteid + "&datatime=" + params.datatime;
    $.ajax({
        type: 'get',
        dataType: 'json',
        data: {},
        async: false, //同步
        url: backend_url,
        success: function (data) {
            var tableData = data.data.result;
            tableData = data.data.result;
            var _tr = "<tr onmouseover='over(this)' onmouseout='out(this)' class='headerInfo'><td>" + '序' + "</td><td onclick='locateAndShowDetail(this)'>" + "road_id" + "</td><td>" + "道路路段(区-街道)" + "</td><td>" + "PM₂.₅" + "</td><td>" + "PM₁₀" + "</td><td>" + "NO" + "</td><td>" + "NOₓ" + "</td><td>" + "NO₂" + "</td><td>" + "CO" + "</td></tr>"
            $("#indexTb").append(_tr);

            if (tableData != null && tableData.length > 0) {
                for (var i = 0; length = tableData.length, i < length; i++) {
                    var j = i + 1;
                    var topObj = tableData[i];
                    topObj = changeNullAndundefinedToEmpty(topObj);
                    var _tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>" + j + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.road_id + "</td><td>" + topObj.name + "</td><td>" + topObj.pm25 + "</td><td>" + topObj.pm10 + "</td><td>" + topObj.no + "</td><td>" + topObj.nox + "</td><td>" + topObj.no2 + "</td><td>" + topObj.co + "</td></tr>"
                    $("#indexTb").append(_tr);
                }
            } else {
                haoutil.msg("查询无数据，请更换查询条件！");
            }
        },
        error: function (request, textStatus) {
            haoutil.msg("系统后台错误，请联系管理员处理！");
        }

    });
}

function getUnitByqindex(qindex) {
    qindex = qindex.toUpperCase();
    if (qindex == 'PM25' || qindex == 'PM10' || qindex == 'NO' || qindex == 'NO2' || qindex == 'NOX' || qindex == 'SO2' || qindex == "O31" || qindex == "O38" || qindex == "O3") {
        return 'μg/m³';
    } else if (qindex == 'CO' || qindex == "TSP") {
        return 'mg/m³';
    } else if(qindex == "SPEED"){
        return 'km/h';
    }else{
        return '/';
    }
}

function over(obj) {
    $('#indexTb tr').removeClass("over_tr");
    $(obj).addClass("over_tr");
}

function out(obj) {
    $(obj).removeClass("over_tr");
}


function loadLineChartbySiteid(params) {
    if (myCharts) {
        $('#echart').removeAttr('_echarts_instance_');
    }
    var backend_url = params.nodejs_url_predix + "dataapi/Bdata?bid=get_" + params.layerid + "_history&datatype=" + params.datatype + "&siteid=" + params.siteid + "&datatime=" + params.datatime + "&count=10";
    // all 1006xx layer has the same legend ！！
    echart_show(backend_url, params.datatype,params)
}


function shortenLegendTimeString(datatype, full_time_str) {
    if (datatype == 'hour') {
        return full_time_str.substring(8, 10) + '日' + "\n" + full_time_str.substring(11, 13) + '时';
    } else if (datatype == 'day') {
        return full_time_str.substring(8, 10) + '日';
    } else {
        return full_time_str;
    }
}

function echart_show(backend_url,params) {
    var layerid = params.layerid + "";
    var legendData = all_layer_legends[layerid.substring(0, 4)];
    var legendData_selected = {};
    legendData.forEach(element => {
        if (element == params.selected_qindex.toLowerCase()) {
            legendData_selected[element] = true;
        } else {
            legendData_selected[element] = false;
        }
    });

    if (legendData == null || legendData.length < 1) {
        return;
    }
    var colorData = echart_lines_color_list[params.layerid];
    var myItemStyle = {
        normal: {
            // 拐点上显示数值
            label: {
                show: true
            },
            borderColor: 'red', // 拐点边框颜色
            lineStyle: {
                width: 2, // 设置线宽
                type: 'solid' //'dotted'虚线 'solid'实线
            }
        }
    };
    $.ajax({
        type: 'get',
        dataType: 'json',
        data: {},
        async: false, //同步
        url: backend_url,
        success: function (data) {
            var tableData = data.data.result;
            if (tableData != null && tableData.length > 0) {
                var seriesObj = {};
                var seriesData = [];
                var timeLineData = [];
                for (var i = 0; i < legendData.length; i++) {
                    var singleLegend = legendData[i];
                    var sdata = {};
                    sdata.name = singleLegend;
                    sdata.data = [];
                    sdata.type = 'line';
                    sdata.symbolSize = 8;
                    if (singleLegend.toUpperCase() == 'CO') {
                        sdata.yAxisIndex = 1;
                    }
                    sdata.itemStyle = myItemStyle;
                    seriesObj[singleLegend] = sdata;
                }
                for (var i = 0; i < tableData.length; i++) {
                    var indexObj = tableData[i];
                    timeLineData.push(shortenLegendTimeString(params.datatype, indexObj.datatime));
                    for (var j = 0; j < legendData.length; j++) {
                        var singleLegend = legendData[j];
                        var sdata = seriesObj[singleLegend];
                        sdata.data.push(indexObj[singleLegend])
                    }
                }
                for (var i = 0; i < legendData.length; i++) {
                    var singleLegend = legendData[i];
                    var mySeries = seriesObj[singleLegend];
                    seriesData.push(mySeries);
                }
                options = {
                    title: {
                        text: tableData[0]["name"],
                        textStyle: {
                            color: '#87CEFA', //颜色
                        },
                        top: '20px',
                        x: 'center'
                    },

                    dataZoom: [{
                        type: 'inside',
                        xAxisIndex: [0],
                        start: 0,
                        end: 100
                    }],

                    legend: {
                        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                        orient: 'horizontal',
                        // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                        x: 'center',
                        // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                        y: 'top',
                        textStyle: { //图例文字的样式
                            color: '#87CEFA',
                        },
                        data: legendData,
                        selected: legendData_selected,
                        color: 'white'
                    },

                    //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
                    grid: {
                        top: '20%', // 等价于 y: '16%'
                        left: '3%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },

                    // 提示框
                    tooltip: {
                        trigger: 'axis'
                    },

                    toolbox: {
                        feature: {
                            saveAsImage: {
                                type: 'jpeg'
                            },
                            dataView: {},
                            magicType: {
                                type: ['line', 'bar'],
                                option: {
                                    // 类型切换时，下述配置项将被merge到对应类型的图表 series 中
                                    line: {
                                        smooth: true
                                    },
                                    bar: {
                                        label: {
                                            show: true
                                        }
                                    }
                                }
                            },
                        }
                    },
                    xAxis: {
                        name: '时间',
                        type: 'category',
                        // 设置X轴数据旋转倾斜
                        interval: 5, //设置X轴数据间隔几个显示一个，为0表示都显示
                        axisLabel: {
                            color: '#87CEFA', //坐标的字体颜色
                        },
                        // boundaryGap值为false的时候，折线第一个点在y轴上
                        boundaryGap: false,
                        data: timeLineData,
                        axisLine: {
                            symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
                            symbolOffset: [0, 8], //箭头段移动8个像素
                            lineStyle: {
                                // 设置x轴颜色
                                color: '#87CEFA'
                            }
                        }
                    },
                    yAxis: [{
                        name: '指标(μg/m³)',
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                // 设置y轴颜色
                                color: '#87CEFA',
                                symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
                                symbolOffset: [0, 8], //箭头段移动8个像素
                            }
                        },
                        splitLine: { //网格线
                            lineStyle: {
                                type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                                color: ['rgba(255,255,255,0.3)']
                            },
                            show: true //隐藏或显示

                        },
                    }, {
                        name: 'CO(mg/m³)',
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                // 设置y轴颜色
                                color: '#8700FA',
                                symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
                                symbolOffset: [0, 8], //箭头段移动8个像素
                            }
                        },
                        splitLine: { //网格线
                            lineStyle: {
                                type: 'solid', //设置网格线类型 dotted：虚线   solid:实线
                                color: ['rgba(255,255,255,0.3)']
                            },
                            show: true //隐藏或显示

                        },
                    }],
                    series: seriesData,
                    color: colorData
                };
                // console.log(timeLineData);
                // console.log(seriesData);

                //转换角标
                var newData = legendData;
                for (var i = 0; i < newData.length; i++) {
                    if (newData[i] == "pm25") {
                        newData[i] = "PM₂.₅";
                    }
                    if (newData[i] == "pm10") {
                        newData[i] = "PM₁₀";
                    }
                    if (newData[i] == "no") {
                        newData[i] = "NO";
                    }
                    if (newData[i] == "nox") {
                        newData[i] = "NOₓ";
                    }
                    if (newData[i] == "no2") {
                        newData[i] = "NO₂";
                    }
                    if (newData[i] == "co") {
                        newData[i] = "CO";
                    }
                    if (newData[i] == "so2") {
                        newData[i] = "SO₂";
                    }
                    if (newData[i] == "o3") {
                        newData[i] = "O₃";
                    }
                    if (newData[i] == "o31") {
                        newData[i] = "O₃₁";
                    }
                    if (newData[i] == "o38") {
                        newData[i] = "O₃₈";
                    }
                    if (newData[i] == "aqi") {
                        newData[i] = "AQI";
                    }
                    if (newData[i] == "tsp") {
                        newData[i] = "TSP";
                    }
                };

                options.legend.data = newData;
                options.series.forEach((item, index) => {
                    item.name = legendData[index]
                });

                //转换options下面selected里的角标
                options.legend.selected['PM₂.₅'] = options.legend.selected['pm25'];
                delete options.legend.selected['pm25'];
                options.legend.selected['PM₁₀'] = options.legend.selected['pm10'];
                delete options.legend.selected['pm10'];
                options.legend.selected['NO'] = options.legend.selected['no'];
                delete options.legend.selected['no'];
                options.legend.selected['NOₓ'] = options.legend.selected['nox'];
                delete options.legend.selected['nox'];
                options.legend.selected['NO₂'] = options.legend.selected['no2'];
                delete options.legend.selected['no2'];
                options.legend.selected['CO'] = options.legend.selected['co'];
                delete options.legend.selected['co'];
                options.legend.selected['SO₂'] = options.legend.selected['so2'];
                delete options.legend.selected['so2'];
                options.legend.selected['O₃'] = options.legend.selected['o3'];
                delete options.legend.selected['o3'];
                options.legend.selected['O₃₁'] = options.legend.selected['o31'];
                delete options.legend.selected['o31'];
                options.legend.selected['O₃₈'] = options.legend.selected['o38'];
                delete options.legend.selected['o38'];
                options.legend.selected['AQI'] = options.legend.selected['aqi'];
                delete options.legend.selected['aqi'];
                options.legend.selected['TSP'] = options.legend.selected['tsp'];
                delete options.legend.selected['tsp'];


                myCharts = echarts.init(document.getElementById('echart'));
                myCharts.setOption(options, true);
                window.onresize = function () {
                    myCharts.resize();
                };

                // 还原角标
                var RestoreData = newData;
                for (var i = 0; i < RestoreData.length; i++) {
                    if (RestoreData[i] == "PM₂.₅") {
                        RestoreData[i] = "pm25";
                    }
                    if (RestoreData[i] == "PM₁₀") {
                        RestoreData[i] = "pm10";
                    }
                    if (RestoreData[i] == "NO") {
                        RestoreData[i] = "no";
                    }
                    if (RestoreData[i] == "NOₓ") {
                        RestoreData[i] = "nox";
                    }
                    if (RestoreData[i] == "NO₂") {
                        RestoreData[i] = "no2";
                    }
                    if (RestoreData[i] == "CO") {
                        RestoreData[i] = "co";
                    }
                    if (RestoreData[i] == "SO₂") {
                        RestoreData[i] = "so2";
                    }
                    if (RestoreData[i] == "O₃") {
                        RestoreData[i] = "o3";
                    }
                    if (RestoreData[i] == "O₃₁") {
                        RestoreData[i] = "o31";
                    }
                    if (RestoreData[i] == "O₃₈") {
                        RestoreData[i] = "o38";
                    }
                    if (RestoreData[i] == "AQI") {
                        RestoreData[i] = "aqi";
                    }
                    if (RestoreData[i] == "TSP") {
                        RestoreData[i] = "tsp";
                    }
                };

                options.legend.data = RestoreData;
                options.series.forEach((item, index) => {
                    item.name = legendData[index]
                });
            } else {
                haoutil.msg("无查询记录，请更换查询条件！");
            }
        },
        error: function (request, textStatus) {
            haoutil.msg("查询错误，请联系管理员！！！")
        }
    });
}