let myChart = echarts.init(document.getElementById('echarts-one'));
let myChart2 = echarts.init(document.getElementById('echarts-two'));
let myChart3 = echarts.init(document.getElementById('echarts-three'));
let myChart4 = echarts.init(document.getElementById('echarts-four'));
// echarts地图
let uploadedDataURL2 = "../../js/compreDisplay/anhui/anhui.json";
let myChart5 = echarts.init(document.getElementById('echarts-map2'));

initEchartsOne();
initEchartsTwo();
initEchartsThree();
initEchartsFour();
loadMap([]);
function initEchartsOne(list) {
    let dataX = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; //名称
    let dataY = [20, 50, 15, 35, 50, 30, 40, 50, 60, 20]; //数据
    let option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        grid: {
            top: '10%',
            right: '10%',
            left: '10%',
            bottom: '10%',
        },
        xAxis: [
            {
                type: 'category',
                data: dataX,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(66, 192, 255, .3)',
                    },
                },
                axisLabel: {
                    interval: 0,
                    margin: 10,
                    color: '#05D5FF',
                    textStyle: {
                        fontSize: 11,
                    },
                    rotate: '0',
                },
                axisTick: {//刻度
                    show: false,
                },
            },
        ],
        yAxis: [
            {
                axisLabel: {
                    padding: [3, 0, 0, 0],
                    formatter: '{value}',
                    color: 'rgba(95, 187, 235, 1)',
                    textStyle: {
                        fontSize: 11,
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(66, 192, 255, .3)',
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)',
                    },
                },
            },
        ],
        series: [
            {
                type: 'bar',
                data: dataY,
                barWidth: '10',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(5, 213, 255, 1)', // 0% 处的颜色
                                },
                                {
                                    offset: 0.98,
                                    color: 'rgba(5, 213, 255, 0)', // 100% 处的颜色
                                },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(5, 213, 255, 1)',
                        shadowBlur: 4,
                    },
                },
                label: {
                    normal: {
                        show: true,
                        lineHeight: 10,
                        formatter: '{c}',
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: 10,
                        },
                    },
                },
            },
        ],
    };

    myChart.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function initEchartsTwo(list) {
    let nameList = ['合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥'];
    let dataList = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10]
    option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        grid: {
            left: '12%',
            right: '10%',
            bottom: '8%',
            top: '5%',
        },
        xAxis: {
            show: true,
            type: 'value',
            name: '',
            // 坐标轴线
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)',
                    type: 'dashed'
                },
            },
            // 坐标轴小标记
            axisTick: {
                show: false,
            },
            // 坐标轴文本标签
            axisLabel: {
                textStyle: {
                    color: 'rgba(95, 187, 235, 1)',
                },
            },
            // 分隔线
            splitLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(61, 137, 247, 1)',
                },
            },
            // 分隔区域
            splitArea: {
                show: false,
            },
        },
        yAxis: {
            data: nameList,
            axisLine: {
                lineStyle: {
                    color: 'rgba(66, 192, 255, .3)',
                },
            },
            axisLabel: {
                textStyle: {
                    color: 'rgba(95, 187, 235, 1)',
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        series: [
            {
                name: '数量',
                type: 'bar',
                zlevel: 2,
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        label: {
                            show: true,
                            position: 'right',
                            color: '#fff',
                            // fontFamily: 'Bebas',
                        },
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(61, 137, 247, 0)', //  0%  处的颜色
                                },
                                {
                                    offset: 0.7,
                                    color: 'rgba(5, 213, 255, 1)', //  100%  处的颜色
                                },
                                {
                                    offset: 1,

                                    color: 'rgba(5, 213, 255, 0.7)', //  100%  处的颜色
                                },
                            ],
                            global: false, //  缺省为  false
                        },
                        shadowColor: 'rgba(5, 213, 255, 1)',
                    },
                },
                data: dataList,
            },
        ],
    };

    myChart2.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart2.resize();
    });
}

function initEchartsThree(list) {
    let dataX = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; //名称
    let dataY = [20, 50, 15, 35, 50, 30, 40, 50, 60, 20]; //数据
    let option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        grid: {
            top: '10%',
            right: '10%',
            left: '10%',
            bottom: '10%',
        },
        xAxis: [
            {
                type: 'category',
                data: dataX,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(66, 192, 255, .3)',
                    },
                },
                axisLabel: {
                    interval: 0,
                    margin: 10,
                    color: '#05D5FF',
                    textStyle: {
                        fontSize: 11,
                    },
                    rotate: '0',
                },
                axisTick: {//刻度
                    show: false,
                },
            },
        ],
        yAxis: [
            {
                axisLabel: {
                    padding: [3, 0, 0, 0],
                    formatter: '{value}',
                    color: 'rgba(95, 187, 235, 1)',
                    textStyle: {
                        fontSize: 11,
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(66, 192, 255, .3)',
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)',
                    },
                },
            },
        ],
        series: [
            {
                type: 'bar',
                data: dataY,
                barWidth: '10',
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: getColor(params.value), // 100% 处的颜色
                                    },
                                    {
                                        offset: 0.98,
                                        color: '#2066ad',
                                    },
                                ],
                                false
                            )
                        },
                        // shadowColor: 'rgba(5, 213, 255, 1)',
                        shadowBlur: 4,
                    },
                },
                label: {
                    normal: {
                        show: true,
                        lineHeight: 10,
                        formatter: '{c}',
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: 10,
                        },
                    },
                },
            },
        ],
    };
    function getColor(value) {
        let endColor = '#2066ad';
        if (value <= 10) {
            endColor = '#3f67a7';
        } else if (value > 10 && value <= 15) {
            endColor = '#5e6296';
        } else if (value > 15 && value <= 20) {
            endColor = '#7f618a';
        } else if (value > 20 && value <= 25) {
            endColor = '#a55a77';
        } else if (value > 25 && value <= 30) {
            endColor = '#c95665';
        } else if (value > 30 && value <= 35) {
            endColor = '#e45256';
        } else if (value > 35 && value <= 50) {
            endColor = '#ef5050';
        } else {
            endColor = '#f33';
        }
        return endColor;
    }
    myChart3.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart3.resize();
    });
}

function initEchartsFour(list) {
    var data = [
        {
            name: "二级风险",
            value: 54,
        },
        {
            name: "三级风险",
            value: 44,
        },
        {
            name: "四级风险",
            value: 35,
        },
        {
            name: "五级风险",
            value: 30,
        },
    ];
    var titleArr = [],
        seriesArr = [];
    colors = [
        ["#DD690B", "#DD690B50"],
        ["#FFE91F", "#FFE91F50"],
        ["#2aa998", "#2aa99850"],
        ["#70e180", "#70e18050"],
        ["#a181fc", "#e3d9fe"],
    ];
    data.forEach(function (item, index) {
        titleArr.push({
            text: item.name,
            left: index * 26 + 11 + "%",
            top: "80%",
            textAlign: "center",
            textStyle: {
                fontWeight: "normal",
                fontSize: "14",
                color: colors[index][0],
                textAlign: "center",
            },
        });
        seriesArr.push({
            name: item.name,
            type: "pie",
            clockWise: false,
            radius: [30, 40],
            itemStyle: {
                normal: {
                    color: colors[index][0],
                    shadowColor: colors[index][0],
                    shadowBlur: 0,
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                },
            },
            hoverAnimation: false,
            center: [index * 26 + 11 + "%", "50%"],
            data: [
                {
                    value: item.value,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return params.value + "%";
                            },
                            position: "center",
                            show: true,
                            textStyle: {
                                fontSize: "20",
                                fontWeight: "bold",
                                color: colors[index][0],
                            },
                        },
                    },
                },
                {
                    value: 100 - item.value,
                    name: "invisible",
                    itemStyle: {
                        normal: {
                            color: colors[index][1],
                        },
                        emphasis: {
                            color: colors[index][1],
                        },
                    },
                },
            ],
        });
    });

    option = {
        backgroundColor: "transparent",
        title: titleArr,
        series: seriesArr,
    };

    myChart4.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart4.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(checkedValue, 1))
            }
        })
    } 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(checkedValue, 2))
            }
        })
    } else if (checkedName !== '' && isCheck === '1') {
        $(this).attr("isCheck", '0')
        $(this).find('img').eq(0).attr("src", setRiskIcon(checkedName, 1))
    } else if (checkedName !== '' && isCheck === '0') {
        $(this).attr("isCheck", '1')
        $(this).find('img').eq(0).attr("src", setRiskIcon(checkedName, 2))
    }
    // 加载地图数据
    /* let dataList = mapPointList.filter(item => {
        if (item.buildCode === clickCityCode) {
            return item
        }
    })
    loadMap(dataList); */
    // 设置风险等级选中样式
    function setRiskIcon(value, type) {
        if (value && type === 1) {
            return '../../img/title-btn/no-check/risk-' + value + '-nocheck.png';
        } else if (!value && type === 1) {
            return '../../img/title-btn/no-check/risk-1-nocheck.png';
        } else if (value && type === 2) {
            return '../../img/title-btn/check/risk-' + value + '-check.png';
        } else if (!value && type === 2) {
            return '../../img/title-btn/check/risk-1-check.png';
        }
    }
});

function loadMap(dataMap) {
    $.getJSON(uploadedDataURL2, function (geoJson) {
        echarts.registerMap('anhui', geoJson);
        myChart2.hideLoading();
        let max = 480,
            min = 1.2; // todo
        let maxSize4Pin = 100,
            minSize4Pin = 100;

        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,
                        num: data[i].num,
                        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, data[i].proName, data[i].num),
                        coordinate: data[i].coordinate,
                    });
                }
            }
            return res;
        };

        let option = {
            silent: false,
            backgroundColor: 'transparent',
            textStyle: {
                fontSize: 15,
                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: function (params) {
                    if (params.data)
                        return (
                            '<p class="map-p">' + params.data.proName + '</p>' +
                            '<p class="map-p">风险等级：' + setRiskLevelColor(params.data.riskLevel) + '</p>' +
                            '<p class="map-p" title="' + params.data.workContent + '">作业内容：' + sliceStr(params.data.workContent) + '</p>' +
                            '<p class="map-p">班组长：' + params.data.workManager + '</p>' +
                            '<p class="map-p">预警数量：' + params.data.num + '</p>' +
                            '<p class="map-p">球机：' + params.data.isOnline + '</p>'
                        )
                },
                // extraCssText: "background:url('../../img/tc.png') 100% 100% repeat;",
                extraCssText: "max-width:300px;height:auto;word-break:break-all;white-space:pre-wrap;",

            },
            geo: {
                show: true,
                map: 'anhui',
                aspectScale: 0.8,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontFamily: 'Alibaba PuHuiTi R'
                        },
                        rotate: -20,
                    },
                    emphasis: {
                        show: true,
                    }
                },
                roam: false,
                scaleLimit: {
                    max: max,
                    min: min
                },
                itemStyle: {
                    normal: {
                        areaColor: '#275D74',
                        borderColor: '#5EB1B3',
                        borderWidth: 2,
                        shadowColor: 'rgba(80, 172, 243, 0.5)',
                        shadowBlur: 30
                    },
                    emphasis: {
                        areaColor: '#2B91B7',
                    }
                },
                tooltip: {
                    show: true
                }
            },
            series: [{
                name: '在线',
                type: 'scatter',
                coordinateSystem: 'geo',
                animation: false,
                symbolSize: function (val) {
                    let a = (maxSize4Pin - minSize4Pin) / (max - min);
                    let b = minSize4Pin - a * min;
                    b = maxSize4Pin - a * max;
                    return 20;
                },
                symbol: function (val) {
                    console.log(val)
                    var num = Number(val[4]) + 1;
                    return getEchartsImage(val[2], num, val[3]);
                },
                label: {
                    normal: {
                        show: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 15,
                            opacity: 1
                        }
                    }
                },
                zlevel: 6,
                z: 6,
                data: convertData(dataMap)
            },
            ]
        }

        myChart5.clear();
        myChart5.setOption(option, true);
    });
    window.addEventListener("resize", function () {
        myChart5.resize();
    });
}