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

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

}
function reloadData(params) {

    loadLineChartbySiteid(params);
    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];
                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);
                var tmp_index = 4;
                for(var p in topObj){//遍历json对象的每个key/value对,p为key

                    if (p!=='code' && p!=='name' && p!=='datatime' ){
                        _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 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.toUpperCase()){
            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) {
            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(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'
                    },
                    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',
                        axisLine: {
                            lineStyle: {
                                // 设置x轴颜色
                                color: '#87CEFA'
                            }
                        },
                        // 设置X轴数据旋转倾斜
                        axisLabel: {
                            color: '#87CEFA', //坐标的字体颜色
                            interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
                        },
                        // boundaryGap值为false的时候，折线第一个点在y轴上
                        boundaryGap: false,
                        data: timeLineData,
                        axisLine: {
                            symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
                            symbolOffset: [0, 8], //箭头段移动8个像素
                        }
                    },
                    yAxis: [{
                        name: '指标(μg/m³)',
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                // 设置y轴颜色
                                color: '#87CEFA',
                                symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
                                symbolOffset: [0, 8], //箭头段移动8个像素
                            }
                        },
                    },{
                        name: 'CO(mg/m³)',
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                // 设置y轴颜色
                                color: '#8700FA',
                                symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
                                symbolOffset: [0, 8], //箭头段移动8个像素
                            }
                        },
                    }],
                    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, 13);

    } else if (datatype == 'day') {
        return full_time_str.substring(8, 10) ;

    } else {
        return full_time_str;
    }

}