let element, layer;
layui.use(['layer', 'element', 'table'], function () {
    element = layui.element;
    layer = layui.layer;
    var table = layui.table;
    var data = [
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 2, proName: '李四', teamName: '666', teamLeader: '女', quality: 1, content: '起飞'}
    ];
    table.render({
        elem: '#demo',
        data: data,
        skin: 'line',
        page: false,
        cols: [[
            {field: 'id', title: '排名'},
            {field: 'proName', title: '工程名称'},
            {field: 'teamName', title: '班组名称'},
            {field: 'teamLeader', title: '班组长'},
            {field: 'quality', title: '施工质量'},
        ]]
    })

    table.render({
        elem: '#demo2',
        data: data,
        skin: 'line',
        page: false,
        cols: [[
            {field: 'proName', title: '工程名称'},
            {field: 'content', title: '告警内容'},
        ]]
    })

    initMainMap()

    initEcharts()

    initDeviceStatus()

    initEfficiencyAnalysis()

    initResourceRate()
});

$('#indexIframe').attr('src', './views/main.html');

let mainMapPointList = [], mapPointList = [], weatherList = [], showWeatherList = [];

$.getJSON('../config/risk.json', function (data) {
    // console.log(data)
    mainMapPointList = data
})

/*判空*/
function dealEmptyString(str) {
    if (str) {
        return str;
    }
    return '';
}

/*判断球机是否在线*/
function isOnline(value) {
    if (value) {
        if (value === '0' || value === 0) {
            return '离线';
        } else {
            return '在线';
        }
    } else {
        return '离线';
    }
}

// 安徽省地图
function initMainMap(dataMap = []) {
    let uploadedDataURL = "../config/anhui.json";
    let myChart = echarts.init(document.getElementById('echarts-map'));
    let clickCityName = null, clickCityCode = null;

    let convertData = function (data) {
        // let res = [];
        // for (let i = 0; i < data.length; i++) {
        //     let geoCoord = data[i].coordinate;
        //     if (geoCoord) {
        //         res.push({
        //             proName: data[i].proName,
        //             riskLevel: data[i].riskType,
        //             workContent: dealEmptyString(data[i].workContent),
        //             isOnline: isOnline(data[i].ballStatus),
        //             workManager: dealEmptyString(data[i].workManage) + '' + dealEmptyString(data[i].workManagePhone),
        //             value: geoCoord.concat(data[i].value),
        //             coordinate: data[i].coordinate,
        //         });
        //     }
        // }
        // console.log(res)
        return data;
    };


    $.getJSON(uploadedDataURL, function (geoJson) {
        echarts.registerMap('anhui', geoJson);
        myChart.hideLoading();
        let max = 480,
            min = 1.15;

        let option = {
            silent: false,
            backgroundColor: 'transparent',
            textStyle: {
                fontSize: 16,
                fontWeight: 'bold',
                color: 'red'
            },
            tooltip: {
                trigger: 'item',
                enterable: true,
                position: function (pos, params, dom, rect, size) {
                    if ($(dom).children($('p')).length === 0) $(dom).css('display', 'none')
                    pos = [pos[0], pos[1] + 10];
                    return pos;
                },
                backgroundColor: 'rgba(14, 17, 28,0.63)', //设置背景颜色
                textStyle: {
                    color: '#fff'
                },
                borderColor: "#174FDD",
                // formatter:
                extraCssText: "max-width:300px;height:auto;word-break:break-all;white-space:pre-wrap;",

            },
            geo: [
                {
                    map: 'anhui',
                    zlevel: 5,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontFamily: 'Alibaba PuHuiTi R'
                            },
                            rotate: -20,
                        },
                        emphasis: {
                            show: true,
                        }
                    },
                    aspectScale: 0.8, //长宽比
                    roam: false,
                    scaleLimit: {
                        max: max,
                        min: min
                    },
                    itemStyle: {
                        normal: {
                            areaColor: 'rgba(121,255,255,0.5)',
                            borderColor: '#7ad4ff',
                            borderWidth: 1,
                            shadowColor: 'rgba(53,109,187,0.6)',
                            shadowBlur: 100,
                            shadowOffsetX:'-20px',
                            shadowOffsetY: '100px',

                        },
                        emphasis: {
                            areaColor: 'rgba(121,255,255,0.5)',
                        }
                    },
                    tooltip: {
                        show: true
                    }
                },
                // {
                //     map: 'anhui',
                //     top: '12%',
                //     zlevel: 4,
                //     aspectScale: 0.8, //长宽比
                //     silent: true, // 禁止这一层级选中
                //     roam: false,
                //     itemStyle: {
                //         areaColor: 'rgba(121,255,255,0.3)',
                //         color: 'rgba(121,255,255,0.3)', // 背景
                //         borderWidth: '1', // 边框宽度
                //         borderColor: 'rgba(121,255,255,0.3)', // 边框颜色
                //     },
                //     scaleLimit: {
                //         max: max,
                //         min: min
                //     },
                //     tooltip: {
                //         show: false
                //     }
                //
                // },
            ],
            series: [
                {
                    name: '在线',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    animation: false,
                    symbolSize: 20,
                    symbol: function (val) {
                        console.log(val)
                        switch (val[2]) {
                            case 2:
                                return 'image://../image/二级.png';
                                break;
                            case 3:
                                return 'image://../image/三级.png';
                                break;
                            case 4:
                                return 'image://../image/四级.png';
                                break;
                            case 5:
                                return 'image://../image/五级.png';
                                break;
                            default:
                                break;
                        }
                    },
                    label: {
                        normal: {
                            show: false,
                            textStyle: {
                                color: '#fff',
                                fontSize: 15,
                                opacity: 1
                            }
                        }
                    },
                    zlevel: 6,
                    z: 6,
                    data: convertData(dataMap)
                }
            ]
        }

        myChart.clear();
        myChart.setOption(option, true);
        myChart.off('dblclick').on("dblclick", function (params) {
            if(params.componentType === 'geo'){
                $('.switch-type').css('display', 'none');
                $('.switch-btn').css('display', 'none');
                $('.switch-type2').removeAttr('style');
                $('.multiselect').css('display', 'none')
                $('.back').removeAttr('style');
                // setUploadedDataURL2(params.name);
            }
        })
    });
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

// 工程安全隐患分析
function initEcharts() {
    let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
    let xLabel = ['合肥', '芜湖', '马鞍山', '蚌埠', '淮南', '淮北', '铜陵', '安庆', '黄山', '阜阳', '六安', '滁州'];
    let dataValue = [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42];
    let dataValue1 = [40, 35, 34, 15, 56, 15, 12, 25, 34, 42, 20, 30,];
    const tooltip = {
        show: true,
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
        textStyle: {
            color: fontColor,
            fontFamily: fontFamily
        },
        borderColor: "rgba(255,255,255, .5)",
    };
    let option = {
        backgroundColor: 'transparent',
        tooltip,
        legend: {
            show: true,
            top: '15%',
            right: '2%',
            itemWidth: 30, // 图例标记的图形宽度。
            //   itemGap: 20, // 图例每项之间的间隔。
            itemHeight: 10, //  图例标记的图形高度。
            textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 8, 0, 8]
            }
        },
        grid: {
            top: '25%',
            left: '8%',
            right: '3%',
            bottom: '15%',
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#5A6E71',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: false,
                },
                data: xLabel,
            },
        ],
        yAxis: [
            {
                name: "",
                nameTextStyle: {
                    color: fontColor,
                    fontSize: fontSize,
                    padding: [0, 60, 0, 0],
                    fontFamily: fontFamily
                },
                // minInterval: 1,
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#25393B',
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#008de7',
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    }
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '周计划数',
                type: 'line',
                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                smooth: true,
                lineStyle: {
                    normal: {
                        width: 3,
                        color: '#1ED6FF', // 线条颜色
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#1ED6FF',//拐点颜色
                        // borderColor: '#fff600',//拐点边框颜色
                        // borderWidth: 13//拐点边框大小
                        label: {
                            show: true, //开启显示
                            color: fontColor,
                            fontFamily: fontFamily,
                            position: 'top', //在上方显示
                            formatter: function (res) {
                                if (res.value) {
                                    return res.value
                                } else {
                                    return 0
                                }
                            },
                        },
                    },

                },
                symbolSize: 8,   //设定实心点的大小
                areaStyle: {
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: '#1ED6FF30',
                                },
                                {
                                    offset: 0.6,
                                    color: '#1ED6FF20',
                                },
                                {
                                    offset: 1,
                                    color: '#1ED6FF10',
                                },
                            ],
                            false
                        ),
                    },
                },
                data: dataValue,
            },
            {
                name: '隐患数',
                type: 'line',
                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                smooth: true,
                lineStyle: {
                    normal: {
                        width: 3,
                        color: '#FE533C', // 线条颜色
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#FE533C',//拐点颜色
                        // borderColor: '#fff600',//拐点边框颜色
                        // borderWidth: 13//拐点边框大小
                        label: {
                            show: true, //开启显示
                            color: fontColor,
                            fontFamily: fontFamily,
                            position: 'top', //在上方显示
                            formatter: function (res) {
                                if (res.value) {
                                    return res.value
                                } else {
                                    return 0
                                }
                            },
                        },
                    },

                },
                symbolSize: 8,   //设定实心点的大小
                areaStyle: {
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: '#FE533C30',
                                },
                                {
                                    offset: 0.6,
                                    color: '#FE533C20',
                                },
                                {
                                    offset: 1,
                                    color: '#ffba0010',
                                },
                            ],
                            false
                        ),
                    },
                },
                data: dataValue1,
            }
        ]
    }
    let safetyAnalysis = echarts.init(document.getElementById('safety-analysis'));
    safetyAnalysis.setOption(option, true);
    window.addEventListener("resize", function () {
        safetyAnalysis.resize();
    });
}


// 地图等级选中
/*地图风险等级选中*/
$(".check-risk").click(function (e) {
    let checkedName = $(this).find('p').eq(0).attr("checkedName");
    let isCheck = $(this).attr("isCheck");


    if (checkedName === '' && isCheck === '1') {
        $('.check-risk').each(function () {
            if ($(this).attr("isCheck") === '1') {
                $(this).attr("isCheck", '0')
                let checkedValue = $(this).find('p').eq(0).attr("checkedName");
                $(this).find('img').eq(0).attr("src", setRiskIcon(isCheck))
            }
        })
    } else if (checkedName === '' && isCheck === '0') {
        $('.check-risk').each(function () {
            if ($(this).attr("isCheck") === '0') {
                $(this).attr("isCheck", '1')
                let checkedValue = $(this).find('p').eq(0).attr("checkedName");
                $(this).find('img').eq(0).attr("src", setRiskIcon(isCheck))
            }
        })
    } else if (checkedName !== '' && isCheck === '1') {
        $(this).attr("isCheck", '0')
        $(this).find('img').eq(0).attr("src", setRiskIcon(isCheck))
    } else if (checkedName !== '' && isCheck === '0') {
        $(this).attr("isCheck", '1')
        $(this).find('img').eq(0).attr("src", setRiskIcon(isCheck))
    }
    // let weatherFlag = $('.switch-form').find('.layui-form-item').eq(0).find('input').eq(0).prop('checked')
    let weatherFlag = false
    // let terrainFlag = $('.switch-form').find('.layui-form-item').eq(1).find('input').eq(0).prop('checked')
    let terrainFlag = $('.switch-form').find('.layui-form-item').eq(0).find('input').eq(0).prop('checked')
    if (!weatherFlag) {
        mapSearch();
        if (!terrainFlag) {
            // console.log(mapPointList)
            // initMainMap(mapPointList)
        } else {
            clearOverlay(1)
        }
    }
});

// 设置风险等级选中样式
function setRiskIcon(value) {
    return value === '1' ? '../image/选择.png' : '../image/未选择.png';
}

function mapSearch() {
    let selRiskList = [];
    mapPointList.splice(0, mapPointList.length);
    $('.check-risk').each(function () {
        if ($(this).attr("isCheck") === '1') {
            if ($(this).find('p').eq(0).attr("checkedName")) {
                selRiskList.push($(this).find('p').eq(0).attr("checkedName"))
            }
        }
    })
    if (selRiskList.length) {
        $.each(selRiskList, function (index, item) {
            let dataList = mainMapPointList.filter(item2 => {
                if (item === '4') {
                    return item2.riskType === '4' || item2.riskType === '5';
                } else {
                    return item2.riskType === item
                }
            })
            $.each(dataList, function (index3, item3) {
                mapPointList.push(item3)
            })
        })
    }
    let keyWord = $('.keyWord').val();
    if (keyWord) {
        let dataList = mapPointList.filter(item => {
            if (item.proName.indexOf(keyWord) != -1 || item.foreman.indexOf(keyWord) != -1) {
                return item
            }
        })
        mapPointList.splice(0, mapPointList.length);
        if (dataList.length > 0) {
            $.each(dataList, function (index, item) {
                mapPointList.push(item)
            })
        }
    }
}

// 设备状态
function initDeviceStatus() {
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#fff'
                }
            }
        },
        grid: {
            top: '25%',
            left: '8%',
            right: '3%',
            bottom: '15%',
        },
        legend: {
            data: ['总数', '在线', '不在线'],
            show: true,
            top: '15%',
            right: '5%',
            textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 8, 0, 8]
            }
        },
        xAxis: [
            {
                type: 'category',
                data: ['xxx', 'xxx', 'xxx', 'xxx', 'xxx', 'xxx', 'xxx'],
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,
                    },
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                // name: 'Precipitation',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value}'
                },
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 15,
                }
            }
        ],
        series: [
            {
                name: '总数',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value;
                    }
                },
                data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ]
            },
            {
                name: '在线',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value;
                    }
                },
                data: [
                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
            },
            {
                name: '不在线',
                type: 'line',
                tooltip: {
                    valueFormatter: function (value) {
                        return value;
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    };

    let deviceAnalysis = echarts.init(document.getElementById('device-status'));
    deviceAnalysis.setOption(option, true);
    window.addEventListener("resize", function () {
        deviceAnalysis.resize();
    });

    option && deviceAnalysis.setOption(option);
}

// 工人效率分析
function initEfficiencyAnalysis() {
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#fff'
                }
            }
        },
        grid: {
            top: '25%',
            left: '8%',
            right: '3%',
            bottom: '15%',
        },
        legend: {
            data: ['时间', '严重', '效率'],
            show: true,
            top: '15%',
            right: '5%',
            textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 8, 0, 8]
            }
        },
        xAxis: [
            {
                type: 'category',
                data: ['xxx', 'xxx', 'xxx', 'xxx', 'xxx', 'xxx', 'xxx'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                // name: 'Precipitation',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '时间',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value;
                    }
                },
                data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ]
            },
            {
                name: '严重',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value;
                    }
                },
                data: [
                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
            },
            {
                name: '效率',
                type: 'line',
                tooltip: {
                    valueFormatter: function (value) {
                        return value;
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    };

    let efficiencyAnalysis = echarts.init(document.getElementById('efficiency-analysis'));
    efficiencyAnalysis.setOption(option, true);
    window.addEventListener("resize", function () {
        efficiencyAnalysis.resize();
    });

    option && efficiencyAnalysis.setOption(option);
}

// 资源利用
function initResourceRate() {
    let option = {
        series: [
            {
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 100,
                splitNumber: 10,
                radius: '80%', // 仪表盘大小
                center: ['50%', '75%'],
                itemStyle: {
                    color: 'green',
                    shadowColor: 'rgba(0,138,255,0.45)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2,
                },
                progress: {
                    show: true,
                    roundCap: false,
                    width: 10
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        width: 10
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                title: {
                    show: true,
                    color: '#fff'
                },
                detail: {
                    borderColor: '#999',
                    borderWidth: 0,
                    width: '60%',
                    lineHeight: 40,
                    height: 40,
                    borderRadius: 0,
                    offsetCenter: [0, '-25%'],
                    valueAnimation: true,
                    formatter: function (value) {
                        return '{value|' + value.toFixed(0) + '}{unit|%}';
                    },
                    rich: {
                        value: {
                            fontSize: 20,
                            fontWeight: 'bolder',
                            color: '#fff'
                        },
                        unit: {
                            fontSize: 15,
                            color: '#fff',
                        }
                    }
                },
                data: [
                    {
                        value: 50,
                        name: '利用率'
                    }
                ]
            }
        ]
    };

    let element = document.getElementsByClassName('resource-rate-item')
    for (let i=0; i<element.length; i++) {
        console.log(element[i])
        let resourceRate = echarts.init(element[i]);
        resourceRate.setOption(option, true);
        window.addEventListener("resize", function () {
            resourceRate.resize();
        });

        option && resourceRate.setOption(option);
    }

    // let resourceRate = echarts.init(document.getElementById('efficiency-analysis'));
    // resourceRate.setOption(option, true);
    // window.addEventListener("resize", function () {
    //     resourceRate.resize();
    // });
    //
    // option && resourceRate.setOption(option);
}