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

var tmpQueryParams;

//当前页面业务
function initWidgetView(_thisWidget) {
    thisWidget = _thisWidget;
 
  //开始查询历史数据
  $("#startQueryHistory").click(function () {
    if (myCharts) {
        $('#echart').removeAttr('_echarts_instance_');
    }
    queryEchartDataByTimePeriod();
    
});

}
function queryEchartDataByTimePeriod(){
    
    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 ！！
    var layerid = tmpQueryParams.layerid+"";

    var legendData = all_layer_legends[layerid.substring(0,4)];
    var legendData_selected = {};
    legendData.forEach(element => {
        if (element==tmpQueryParams.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[tmpQueryParams.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) {
            console.log(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(tmpQueryParams.queryDataType, 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轴数据旋转倾斜
                        axisLabel: {
                            color: '#87CEFA', //坐标的字体颜色
                            interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
                           
                        },
                        // 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);
                
                myCharts = echarts.init(document.getElementById('echart'));
                myCharts.setOption(options, true);
                window.onresize = function(){
                    myCharts.resize();                
                }
            }else{
                haoutil.msg("无查询记录，请更换查询条件！");
            }
        },
        error: function (request, textStatus) {
            haoutil.msg("查询错误，请联系管理员！！！")
        }
    });
}

function DatePicker(beginSelector, endSelector) {

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

    var miniView = tmpQueryParams.queryDataType=='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){
    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];
                for (var key in topObj) {
                    if (topObj[key] == null || topObj[key] == 'null' || topObj[key] == undefined || topObj[key] == 'undefined') {
                        topObj[key] = "/";
                    }
                  }
                var _tr = "<tr  onmouseover='over(this)' onmouseout='out(this)'><td>1</td><td>code</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>name</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>datatime</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>lon</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>lat</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>"+p+"</td><td>" + topObj[p] + "</td><td>"+getUnitByqindex(p)+"</td></tr>"
                        $("#indexTb").append(_tr);   
                        tmp_index++;      
                    }                   
                  }
            }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<sub>2.5</sub>"+ "</td><td>" + "PM<sub>10</sub>"+ "</td><td>" + "NO"+ "</td><td>" + "NO<sub>x</sub>"+ "</td><td>" + "NO<sub>2</sub>"+ "</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]; 
                    for (var key in topObj) {
                        if (topObj[key] == null || topObj[key] == 'null' || topObj[key] == undefined || topObj[key] == 'undefined') {
                            topObj[key] = "/";
                        }
                      }
                    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'){
        return 'μg/m³';
    }else if (qindex=='CO'){
        return 'mg/m³';
    }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 ！！
    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: 30,
                            end: 50
                        }
                    ],
                    
                    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: {
                        show :true,
                        name: '时间',
                        type: 'category',
                        // 设置X轴数据旋转倾斜
                        axisLabel: {
                            color: '#87CEFA', //坐标的字体颜色
                            interval: 0, //设置X轴数据间隔几个显示一个，为0表示都显示
                            formatter:  (value)=> {
                                return value.substring(0,2)+'日'+"\n"+value.substring(3,5)+'时';
                            }
                        },
                        // 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
                };
                myCharts = echarts.init(document.getElementById('echart'));
                myCharts.setOption(options, true);
                window.onresize = function(){
                    myCharts.resize();                
                }
            }else{
                haoutil.msg("无查询记录，请更换查询条件！");
            }
        },
        error: function (request, textStatus) {
            haoutil.msg("查询错误，请联系管理员！！！")
        }
    });
}


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;
    }

}