var nowClientWidth = document.documentElement.clientWidth; // 当前视口宽度
var hisVarietyChart = null;   // 品种柱状图
var deptList = null;   // 所有库区列表信息
var deptCode = null;          // 当前闪烁地区的编码
var timer;     // 库区定时
var deptNum = 0;  //库区切换下标
var mapChart = null;
var geoMap = [{name: '伊犁哈萨克自治州', value: [81.317946, 43.92186]}]; //默认点位
var map = chinaMapOutline; //默认加载全国地图

$(function () {
    // 初始化页面
    init();

    // 初始化WebSocket
    // initWS(companyId,bizType, bizTag, userId);
});

// 初始化页面
function init() {
    // 适应屏幕大小
    initScrollbar();

    // 初始化图表
    initChart();

    //初始化地图
    initMap();

    // 时间
    initTime();

    //初始化标语
    initDicSlogan();

    //加载指定地区地图
    renderMapPoints("乌鲁木齐市,克拉玛依市,吐鲁番市,哈密市,昌吉回族自治州,博尔塔拉蒙古自治州,巴音郭楞蒙古自治州,阿克苏地区,克孜勒苏柯尔克孜自治州,喀什地区,和田地区,伊犁哈萨克自治州,塔城地区,阿勒泰地区");

    //统计相关数量信息，包含库点及粮食数量
    ajaxFoodNum();

    //请求监管库区信息
    ajaxDeptList();

    clearInterval(timer);
    timing();

    //TODO 请求AI事件信息
    // ajaxMsg();

    //TODO 请求抓拍跟踪信息
    // ajaxFoodNum();



    //抓拍跟踪滚动
    jQuery(".block2").slide({ mainCell: ".bd ul", autoPage: true, effect: "topLoop", autoPlay: true, vis: 4 });
    jQuery(".follow").slide({ mainCell: ".bd ul", autoPlay: true, effect: "leftMarquee", vis: 5, interTime: 50 });
}

// socket信息返回處理
function socketOnMessage(pocket) {
    if (pocket.bizId === "slogan") {
        var data = pocket.data;
        dicSlogan = data;
        initDicSlogan();
    }
}

/**
 * 库区定时切换
 */
function timing() {
    timer = setInterval(function() {
        if(deptNum === deptList.length){
            deptNum = 0;
        }

        renderDeptInfo();
        deptNum += 1;
    }, 5000);
}

//加载库区地图位置
function renderMap() {
    var myChart = mapChart;
    //注入地图边界
    echarts.registerMap('chinaMapOutline', map);
    myChart.option.series[1].data = geoMap;
    myChart.chart.setOption(myChart.option, true);
    mapChart = myChart;
}

//加载指定地区地图和点位
function renderMapPoints(areaName) {
    if(!areaName){
        return;
    }
    var names = areaName.split(",");
    if(names.length < 1){
        return;
    }

    //根据需要设置某个地区的地图
    var all = chinaMap.features;
    map = {
        "type": "FeatureCollection",
        "features": []
    };

    //默认获取省份省会坐标
    geoMap = [];
    for (var j = 0; j < names.length; j++) {
        for (var i = 0; i < all.length; i++) {
            if(all[i].properties.name === names[j]){
                map.features.push(all[i]);
                // if(all[i].properties.name === "伊犁哈萨克自治州"){
                    geoMap.push({
                        name: all[i].properties.centerName,
                        value: [all[i].properties.center[0], all[i].properties.center[1], 12]
                    });
                // }
                // renderMap();
                break;
            }
        }
    }
}

/**
 * 初始化加载地图
 * @param areaName 默认全国地图
 */
function initMap() {
    var myChart = echarts.init(document.getElementById('map'));

    //注入地图边界
    echarts.registerMap('chinaMapOutline', map);

    var option = {
        backgroundColor:'transparent',
        tooltip: {
            show: false,
            trigger: 'item'
        },
        geo: {
            silent: true,
            map: 'chinaMapOutline',
            show: false,
            zoom: 0.8,
            top: '0%',
            label: {
                normal: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                },
                emphasis: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            },

            roam: false,
            itemStyle: {
                normal: {
                    areaColor: {
                        type: 'linear-gradient',
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(45,68,121,0.15)' // 0% 处的颜色
                        },
                            {
                                offset: 1,
                                color: 'rgba(45,68,121,0.18)' // 100% 处的颜色
                            }
                        ],
                        global: true // 缺省为 false
                    },
                    // areaColor: 'transparent',
                    borderColor: '#83BAFF',
                    borderWidth: 1,
                    shadowColor: 'rgba(56,164,255,.26)',
                    opacity: 0.5,
                    shadowOffsetX: 5,
                    shadowOffsetY: 5,
                    shadowBlur: 5,
                    show: true, // 是否显示对应地名
                    textStyle: {
                        //字体颜色
                        color: '#797979'
                    }
                },
                emphasis: {
                    color: 'transparent', //悬浮背景
                    textStyle: {
                        color: '#fff'
                    }
                }
            }
        },
        visualMap: {
            type: 'piecewise',
            show: false,
            textStyle: {
                color: '#fff'
            },
            color: ['#68cc5c']
        },
        series: [
            {
                map: 'chinaMapOutline',
                silent: true,
                type: 'map',
                zoom: 1,
                label: {
                    normal: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                top: '0%',
                roam: false,
                itemStyle: {
                    normal: {
                        areaColor: 'rgba(0,255,255,.02)',
                        borderColor: '#02a5f4',
                        borderWidth: 1.5,
                        shadowColor: '#02a5f4',
                        shadowOffsetX: 0,
                        shadowOffsetY: 4,
                        shadowBlur: 10,
                    },
                    emphasis: {
                        areaColor: 'transparent', //悬浮背景
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }
            },
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: geoMap,
                symbolSize:  function (val) {
                    return val[2];
                },
                rippleEffect: {
                    color: '#68cc5c'
                },
                showEffectOn: 'render',
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter: '{b}',
                        color: '#ffffff',
                        fontSize: nowSize(15)
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    emphasis: {
                        borderColor: '#fff',
                        borderWidth: 1
                    }
                }
            }
        ]
    };

    myChart.setOption( option );
    mapChart = {"chart": myChart, "option": option};
}

/**
 * 请求获取动态信息
 */
function ajaxMsg() {
    $.ajax({
        type: "POST",
        url: "../../visual/index-info",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify({
            "companyId": companyId
        }),
        success: function (result) {
            if (result.code == "0000") {
                renderMsg(result.data);
            }
        },
        error: function (error) {

        }
    });
}

// 更新动态信息
function renderMsg(data) {
    var html = '';
    var flag = false;
    var num1 = '';
    var num7 = '';
    if (data != null && data.length > 0) {
        $.each(data, function (index, item) {
            var deptAreaId = item.deptAreaId;
            if(item.dailyTotal === 0){
                num1 = '当日一切正常';
            }else{
                num1 = '当日数量'+ item.dailyTotal + '个';
            }
            if(item.warnNum7 === 0){
                num7 = '近七天一切正常';
            }else{
                num7 = '近七天数量'+ item.warnNum7 + '个';
            }
            html += '<div class="panel-content-body-tr">';
            if (item.level && item.level === "01") {
                flag = true;
                // html += '<img src="../../static/images/visual/l1.png"  style="width:10%; height:85%;" alt="">';
                html += '<span class="body-item sp" style="color: #bc2032;" onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>';
                html += '<span class="body-item sp" style="color: #bc2032;">' + num1 + '</span>';
                html += '<span class="body-item sp" style="color: #bc2032;">' + num7 + '</span>';
                // html += '<span class="body-item" style="color: #bc2032; flex: 0.3;">' + item.createTime + '</span>';
            } else if (item.level && item.level === "02") {
                flag = true;
                // html += '<img src="../../static/images/visual/l2.png" style="width:10%; height:85%;" alt="">';
                html += '<span class="body-item sp" style="color: #f37b3d;" onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\"  >' + item.deptAreaName + '</span>';
                html += '<span class="body-item sp" style="color: #f37b3d;">' + num1+ '</span>';
                html += '<span class="body-item sp" style="color: #f37b3d;">' + num7 + '</span>';
                // html += '<span class="body-item" style="color: #f37b3d; flex: 0.3;">' + item.createTime + '</span>';
            } else if (item.level && item.level === "03"){
                flag = true;
                // html += '<img src="../../static/images/visual/l3.png" style="width:10%; height:85%;" alt="">';
                html += '<span class="body-item sp"  onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>';
                html += '<span class="body-item sp">' + num1 + '</span>';
                html += '<span class="body-item sp">' + num7 + '</span>';
                // html += '<span class="body-item" style="flex: 0.3;">' + item.createTime + '</span>';
            }else {
                flag = true;
                // html += '<img src="../../static/images/visual/l3.png" style="width:10%; height:85%;" alt="">';
                html += '<span class="body-item sp"  onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>';
                html += '<span class="body-item sp">' + num1 + '</span>';
                html += '<span class="body-item sp">' + num7 + '</span>';
                // html += '<span class="body-item" style="flex: 0.3;">' + item.createTime + '</span>';
            }
            html += '</div>';
        })
    } else {
        if (deptAreaList != null && deptAreaList.length > 0) {
            $.each(deptAreaList, function (index, item) {
                html += '<div class="panel-content-body-tr">';
                html += '<span class="body-item sp">' + item.name + '</span>';
                html += '<span class="body-item sp">' + '当日分析一切正常' + '</span>';
                html += '<span class="body-item" style="flex: 0.3;">' + formatDate('mm/dd', new Date()) + '</span>';
                html += '</div>';
            });
        }
    }
    $("#panel-title").html('监管动态信息  <i class="dot"></i>');
    $("#inventoryInfo").html(html);
}

/**
 * 跳转至后台预警页面
 * @param deptAreaId
 */
function toAiHome(deptAreaId) {
    var url = "../home?t=WarnInfo&deptAreaId="+deptAreaId;
    window.parent.open(url, "_self");
}

/**
 * 请求获取库区相关信息
 */
function ajaxDeptList() {
    deptList = null;
    $.ajax({
        type: "POST",
        url: "/group/index-dept-list",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify({
            "companyId": companyId
        }),
        success: function (result) {
            if (result.code == "0000") {
                deptList = result.data;
                renderDeptInfo();
            }
        },
        error: function (error) {

        }
    });
}

/**
 * 渲染库区信息
 */
function renderDeptInfo() {
    if (deptList == null || deptList.length <= 0) {
        return;
    }

    $("#county").html(deptList[deptNum].county);
    $("#deptName").html(deptList[deptNum].deptName);
    $("#inNum").html(deptList[deptNum].inNum);
    $("#outNum").html(deptList[deptNum].outNum);
    $("#depotNumber").html(deptList[deptNum].depotNumber);
    $("#depotBankNumber").html(deptList[deptNum].depotBankNumber);
    $("#storageNum").html(deptList[deptNum].storageNum);

    //加载库区地图
    geoMap = updateDeptMap();
    renderMap();
}

function updateDeptMap() {
    var points = [];
    $.each(deptList, function(index, item) {
        var val = [];
        var name = '';
        if(index === deptNum){
            name = item.deptName;
            val = [item.jd, item.wd, 17];
        }else {
            val = [item.jd, item.wd, 8];
        }
        points.push({
            name: name,
            value: val
        });
    });
    return points;
}

/* ---------- 获取要切换库区的数据信息 ---------- */
function getChangeDeptArea(id) {
    deptAreaList = [];
    index1 = 0;
    clearInterval(timer1);

    if (id) {
        if (id === "511400") {
            deptAreaList = deptAreaAllList;
        } else {
            if (deptAreaAllList != null && deptAreaAllList.length > 0) {
                $.each(deptAreaAllList, function (index, item) {
                    if (id.length > 6 && id == item.deptCompany) {
                        deptAreaList.push(item);
                    }
                    if (id.length == 6 && id == item.deptCounty) {
                        deptAreaList.push(item);
                    }
                })
            }
        }
    } else {
        deptAreaList = deptAreaAllList;
    }

    deptAreaSwitch();
}

/* ---------- 库区定时切换 ---------- */
function deptAreaSwitch() {
    timer1 = setInterval(function () {
        if (index1 == deptAreaList.length) {
            index1 = 0;
        }

        renderDeptArea();

        index1 += 1;

    }, 3000);
}

// 更新库区信息
function renderDeptArea() {

    if (deptAreaList == null || deptAreaList.length <= 0) {
        return;
    }

    $("#cityAndCounty").html(deptAreaList[index1].deptCityName + "-" + deptAreaList[index1].deptCountyName);
    $("#deptAreaName").html(deptAreaList[index1].name);
    $("#depotNum").html(deptAreaList[index1].depotNum == null ? "0" : deptAreaList[index1].depotNum);
    $("#depotOilNum").html(deptAreaList[index1].depotOilNum == null ? "0" : deptAreaList[index1].depotOilNum);

    if (deptAreaList[index1].storageStr.length > 9
        || deptAreaList[index1].oilStorageStr.length > 9
        || deptAreaList[index1].areaStr.length > 9) {
        $("#foodNum").css("font-size", "28px");
        $("#oilNum").css("font-size", "28px");
        $("#area").css("font-size", "28px");
    } else if(deptAreaList[index1].storageStr.length > 5
        || deptAreaList[index1].oilStorageStr.length > 5
        || deptAreaList[index1].areaStr.length > 5){
        $("#foodNum").css("font-size", "30px");
        $("#oilNum").css("font-size", "30px");
        $("#area").css("font-size", "30px");
    } else {
        $("#foodNum").css("font-size", "46px");
        $("#oilNum").css("font-size", "46px");
        $("#area").css("font-size", "46px");
    }
    $("#foodNum").html(deptAreaList[index1].storageStr);
    $("#oilNum").html(deptAreaList[index1].oilStorageStr);
    $("#area").html(deptAreaList[index1].areaStr);

    if (deptCode) {
        $("#" + deptCode).removeClass("kuqu-h");
    }
    deptCode = deptAreaList[index1].deptCounty;
    $("#" + deptCode).addClass("kuqu-h");
}

/**
 * 请求获取统计数量信息
 */
function ajaxFoodNum() {
    $.ajax({
        type: "POST",
        url: "/group/index-num",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify({
            "companyId": companyId
        }),
        success: function (result) {
            if (result.code === "0000") {
                var data = result.data;
                renderFoodNum(data);
            }
        },
        error: function (error) {

        }
    });
}

/**
 * 渲染统计数量信息
 * @param data
 */
function renderFoodNum(data) {

    if (!data) {
        return;
    }

    /*----- 监管库点信息 -----*/
    $("#companyNum").html(data.companyNum);
    $("#deptNum").html(data.deptNum);
    $("#depotNum").html(data.depotNum);
    $("#depotBankNum").html(data.depotBankNum);

    /*----- 监管数量信息 -----*/
    if (data.foodSum.length > 8 || data.packFoodSum.length > 8) {
        $("#foodSum").css("font-size", "32px");
        $("#packFoodSum").css("font-size", "32px");
    }
    $("#foodSum").html(data.foodSum);
    $("#packFoodSum").html(data.packFoodSum);

    /*----- 分品种柱状图 -----*/
    if (data.xaxis.length > 0 && data.seriesData.length > 0) {
        var hisFoodVariety = hisVarietyChart;
        hisFoodVariety.option.xAxis.data = data.xaxis;
        hisFoodVariety.option.series[0].data = data.seriesData;
        hisFoodVariety.chart.setOption(hisFoodVariety.option, true);
        hisVarietyChart = hisFoodVariety;
    }
}

// 刷新时间
function initTime() {
    setInterval(function () {
        $("#navBarDate").html(formatDate('mm月dd日', new Date()));
        $("#navBarTime").html(formatDate('HH:MM:SS', new Date()));
        $("#navBarWeek").html(getWeekDate());
    }, 1000);
}

/**
 * 初始化屏幕大小
 */
function initScrollbar() {

    if (hisVarietyChart) {
        hisVarietyChart.resize();
    }

    setInterval(function () {
        if (!hasScrollbar()) {
            document.getElementById('inventoryInfoBox').scrollTop = 0;
        } else {
            if (document.getElementById('inventoryInfoBox').scrollTop >= (document.getElementById('inventoryInfo').clientHeight - document.getElementById('inventoryInfoBox').clientHeight)) {
                document.getElementById('inventoryInfoBox').scrollTop = 0;
            } else {
                document.getElementById('inventoryInfoBox').scrollTop++;
            }
        }
    }, 60);
}

/**
 * 判断底部是否出现滚动条
 *
 * @return {boolean}
 */
function hasScrollbar() {
    return document.getElementById('inventoryInfo').clientHeight > document.getElementById('inventoryInfoBox').clientHeight;
}

/**
 * 初始化图表
 */
function initChart() {
    /* 库存图表加载 */
    allInventoryChartLoad(
        ['小麦', '玉米', '稻谷', '成品粮',  '成品油', '其他'],
        [1000, 1200, 1500, 1300, 1100, 1600]
    );
}

/**
 * 柱状图加载
 *
 * @param names
 * @param data
 */
function allInventoryChartLoad(names, data) {
    var dom = document.getElementById('allInventoryChart');
    var myChart = echarts.init(dom);

    var options = {
        grid: {
            left: '2%',
            right: '1%',
            bottom: '1%',
            top: '15%',
            containLabel: true
        },
        tooltip: {
            show: true,
        },
        xAxis: {
            type: 'category',
            // 网格样式
            splitLine: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#39c9ff"
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: '#ffffff',
                    fontSize: nowSize(16),
                },
                interval: 0,
                margin: nowSize(15),
            },
            data: names,
        },
        yAxis: {
            type: 'value',
            // 网格样式
            splitLine: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
        },
        series: [{
            name: '',
            data: data,
            type: 'bar',
            barWidth: '40%',
            label: {
                show: true,
                position: 'top',
                color: '#ffffff',
                fontSize: nowSize(12),
                distance: 0,
                lineHeight: nowSize(25),
            },
            // showBackground: false,
            // backgroundStyle: {
            // color: 'rgba(16,52,94,0.41)',
            // },
            itemStyle: {
                normal: {
                    color: function (params) {
                        var colorList = [
                            new echarts.graphic.LinearGradient(
                                0, 1, 0, 0,
                                [{offset: 0, color: '#ff5600'}, {offset: 1, color: '#f27f44'}]
                            ),
                            new echarts.graphic.LinearGradient(
                                0, 1, 0, 0,
                                [{offset: 0, color: '#ffb335'}, {offset: 1, color: '#ffcc77'}]
                            ),
                            new echarts.graphic.LinearGradient(
                                0, 1, 0, 0,
                                [{offset: 0, color: '#08e53e'}, {offset: 1, color: '#59ff81'}]
                            ),
                            new echarts.graphic.LinearGradient(
                                0, 1, 0, 0,
                                [{offset: 0, color: '#02a5f4'}, {offset: 1, color: '#60cbff'}]
                            ),
                            new echarts.graphic.LinearGradient(
                                0, 1, 0, 0,
                                [{offset: 0, color: '#0a43bc'}, {offset: 1, color: '#3571f0'}]
                            ),
                            new echarts.graphic.LinearGradient(
                                0, 1, 0, 0,
                                [{offset: 0, color: '#af1f2e'}, {offset: 1, color: '#ef3476'}]
                            )
                        ];

                        return colorList[params.dataIndex]
                    }
                }
            }
        }]
    };
    myChart.setOption(options);
    hisVarietyChart = {"chart": myChart, "option": options};
}

/**
 * 换算方法
 *
 * @param val
 * @param initWidth
 * @return {number}
 */
nowSize = function (val) {
    var initWidth = 1920;
    return val * (nowClientWidth / initWidth);
};

/**
 * 格式化日期
 *
 * @param fmt
 * @param date
 * @return {*}
 */
function formatDate(fmt, date) {
    var ret;
    var opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (var k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        }
    }
    return fmt;
}

/**
 * 获取当前星期几
 */
function getWeekDate() {
    var now = new Date();
    var day = now.getDay();
    var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    var week = weeks[day];
    return week;
}

// 右下角提醒信息
function showTip(msg) {
    layer.open({
        // type: 1,
        btn: null,
        title: "提示",
        skin: 'layui-layer-lan',
        content: msg,
        // offset: 'rb',
        offset: 'rt',
        time: 1500,
        area: ['250px', '120px'],
        anim: 1,
        // shade: false,
        shadeClose: true
    });
}