<template>
    <div id="fbdtcshi">
        <svg-icon v-show="isfanhui" class="back" icon-class="back" @click="fanhui" />
        <div id="china" :style="`height:100%;`" ref="fgdsfs"></div>
    </div>
</template>

<script>
import jquery from 'jquery'
// import { dicData } from "@/assets/commjs/dictypeData";
import { getAreaLineDetailData, mapjson } from '@/api/distribution'
export default {
    props: {
        substationDetailVOList: {
            type: Array,
            default: undefined
        },
        jsonData: {
            type: Array,
            default: undefined
        },
        title: {
            type: String,
            default: ''
        }
    },
    props: ['substationDetailVOList', 'title', 'jsonData'],
    data() {
        return {
            device: null,
            zoom: null, //图表焦点校验
            h: null,
            isLoading: false,
            myChart: '',
            data: null,
            isfanhui: false,
            mapData: [],
            statisticalType: {},
            titles: ''
        }
    },
    created() {},
    mounted() {
        this.resizeEchartZ()
        this.zoom = 1 / document.body.style.zoom
        window.addEventListener('resize', () => {
            this.zoom = 1 / document.body.style.zoom
            if (this.myChart !== '') {
                this.myChart.resize()
            }
        })
    },
    methods: {
        map() {
            // mapjson().then(res=>{
            //   alert(222)
            //   console.log(res)
            // })
        },
        //获取统计类型
        getclassificationData() {
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Report_Type'])
            this.statisticalType = this.classificationData[0]
        },
        //返回
        fanhui() {
            this.isfanhui = false
            this.titles = JSON.parse(window.sessionStorage.getItem('Info')).deptName
            let obj = {
                id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                name: JSON.parse(window.sessionStorage.getItem('Info')).areaName
            }
            this.$emit('sendData2', obj)
            this.$emit('fatherMethod')
            // // this.$parent.onSubmit();
            // console.log(this.$parent);
        },
        //获取统计类型
        async echarts() {
            let _this = this
            _this.mapData = _this.substationDetailVOList
            let mapList = [[], [], []]
            if (_this.mapData != null) {
                _this.mapData.forEach(item => {
                    if (item.color == 'green') {
                        mapList[0].push(item)
                    } else if (item.color == 'red') {
                        mapList[1].push(item)
                    }
                    //  else if (item.color == "blue") {
                    //   mapList[2].push(item);
                    // }
                })
            } else {
                mapList = [[], [], []]
            }

            // for (var i = 0; i < allData.length; i++) {
            //   allData[i].value = Math.round(Math.random() * 100);
            // }
            // areaName
            loadMap('./static/mapjson/' + this.titles + '.json', '')

            function loadMap(mapCode, name) {
                if (_this.titles != JSON.parse(window.sessionStorage.getItem('Info')).deptName) {
                    _this.isfanhui = true
                }
                jquery.get(mapCode, function (data) {
                    if (!(data instanceof Object)) {
                        // loadMap("./static/mapjson/全国.json", "");
                        return
                    }
                    _this.isLoading = true
                    if (data) {
                        if (_this.myChart !== '') {
                            _this.myChart.dispose()
                        }
                        let echarts = require('echarts')
                        let domID1 = document.getElementById('china')
                        setTimeout(() => {
                            ;(domID1.style.width = document.getElementById('fbdtcshi').offsetWidth - 0 + 'px'),
                                (domID1.style.height = window.sessionStorage.getItem('appheight') - 100 + 'px')
                        }, 0)
                        _this.myChart = echarts.init(domID1)
                        this.myChart = _this.myChart
                        _this.isLoading = false
                        echarts.registerMap(name, data)
                        var white = '#000'
                        var option = {
                            title: {
                                text: '监测网分布', //+ "(" + _this.titles + ")",
                                left: 'center',
                                top: '3%'
                            },
                            tooltip: {
                                // triggerOn: "click",
                                // formatter: function(e, t, n) {
                                //     return "<br />" + e.name + "<br/>区域暂降评估等级 :" + e.value
                                // }
                                trigger: 'item',
                                axisPointer: {
                                    type: 'shadow',
                                    label: {
                                        color: '#fff',
                                        fontSize: 16
                                    }
                                },
                                textStyle: {
                                    color: '#fff',
                                    fontStyle: 'normal',
                                    opacity: 0.35,
                                    fontSize: 14
                                },
                                backgroundColor: 'rgba(0,0,0,0.35)',
                                formatter: function (params) {
                                    //console.log(params)
                                    var tips = ''
                                    if (params.value == 0) {
                                        tips = "<font style='color:" + white + "'>暂无数据</font><br/>"
                                    } else {
                                        tips +=
                                            "<font style='color:" +
                                            white +
                                            "'> " +
                                            params.name +
                                            '</font><br/>区域暂降评估' +
                                            "<font style='color:" +
                                            white +
                                            "'>:" +
                                            params.value +
                                            '</font><br/>'
                                    }
                                    return tips
                                }
                            },
                            color: ['green', 'red', 'blue'],
                            legend: {
                                orient: 'vertical',
                                left: 26,
                                bottom: 40,
                                itemWidth: 16,
                                itemHeight: 16,

                                data: [
                                    {
                                        name: '正常'
                                    },
                                    {
                                        name: '中断'
                                    }
                                    // {
                                    //   name: "变电站",
                                    // },
                                ]
                            },

                            geo: {
                                map: name,
                                roam: true,
                                // scaleLimit: {
                                //     min: 1,
                                //     max: 2
                                // },
                                zoom: _this.titles == '海南' ? 5 : 1.1,
                                top: _this.titles == '海南' ? 1300 : 100,
                                left: _this.titles == '海南' ? 700 : 'center',
                                label: {
                                    normal: {
                                        show: true,
                                        fontSize: '14',
                                        color: 'rgba(0,0,0,0.7)'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: 'rgba(51, 69, 129, .8)', //地图背景色
                                        borderColor: '#999999',
                                        borderWidth: 1,
                                        areaColor: {
                                            type: 'radial',
                                            x: 0.5,
                                            y: 0.5,
                                            r: 0.8,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(147, 135, 148, .2)' // 100% 处的颜色
                                                }
                                            ],
                                            globalCoord: false // 缺省为 false
                                        },
                                        shadowColor: 'rgba(128, 217, 248, 1)',
                                        // shadowColor: 'rgba(255, 255, 255, 1)',
                                        shadowOffsetX: -2,
                                        shadowOffsetY: 2,
                                        shadowBlur: 10
                                    },
                                    emphasis: {
                                        areaColor: '#ccc',
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        borderWidth: 0
                                    }
                                }
                            },
                            series: []
                        }
                        mapList.forEach((item, ind) => {
                            option.series.push({
                                type: 'scatter',
                                mapName: name,
                                name: ind == 0 ? '正常' : ind == 1 ? '中断' : '变电站',
                                coordinateSystem: 'geo',
                                geoIndex: 0,
                                animation: false, //坐标点是否显示动画
                                roam: true,
                                selectedMode: 'false', //是否允许选中多个区域
                                symbol: 'pin',
                                rippleEffect: {
                                    brushType: 'fill' // stroke|fill
                                },
                                symbolSize: function (val, params) {
                                    //坐标点大小
                                    return 30
                                },
                                label: {
                                    normal: {
                                        show: false
                                    },
                                    emphasis: {
                                        show: false
                                    }
                                },
                                data: item.map(function (itemOpt) {
                                    // console.log(itemOpt);
                                    return {
                                        name: itemOpt.srbName,
                                        value: [
                                            parseFloat(itemOpt.coordY), //经度
                                            parseFloat(itemOpt.coordX) //维度
                                        ],

                                        itemStyle: {
                                            //地图区域的多边形
                                            normal: {
                                                color: itemOpt.color, //坐标点颜色
                                                shadowBlur: 0, // 图形阴影的模糊大小
                                                shadowOffsetX: 0 // 阴影水平方向上的偏移距离。
                                            }
                                        },
                                        tooltip: {
                                            //仅在 options中最外层的 tooltip.trigger 为 'item'时有效
                                            position: 'bottom', //提示框位置,仅在 options中最外层的 tooltip.trigger 为 'item'时有效
                                            formatter: function (params, ticket, callback) {
                                                var strHtml =
                                                    '<div>变电站:' +
                                                    itemOpt.subName +
                                                    '<br/>' +
                                                    '监测点:' +
                                                    itemOpt.srbName
                                                // strHtml += '<table class="table">';
                                                // strHtml +=
                                                //   '<tr><td colspan="4" style="text-align:center"> 变电站: ' +
                                                //   itemOpt.subName +
                                                //   "</td>" +
                                                //   '<td colspan="4" style="text-align:center"> 监测点: ' +
                                                //   itemOpt.srbName +
                                                //   "</td>" +
                                                //   "</tr></table>";
                                                // strHtml += '<tr><td>项目编号：</td><td>' + itemOpt.srbNO + '</td><td>项目名称：</td><td>' + itemOpt.srbName + '</td></tr>';
                                                // strHtml += '<tr><td>所属部门：</td><td>' + itemOpt.deptName + '</td></tr>';
                                                // strHtml += '<tr><td>项目类型：</td><td>' + itemOpt.srbType + '</td><td>合同金额(万元)：</td><td>' + itemOpt.contractMoney + '</td></tr>';
                                                // strHtml += '<tr><td>业务行业：</td><td>' + itemOpt.trade + '</td><td>业务类型：</td><td>' + itemOpt.category + '</td></tr>';
                                                // strHtml += '<tr><td>业务等级：</td><td>' + itemOpt.riskLevel + '</td><td>单位负责人：</td><td>' + itemOpt.incharge + '</td></tr>';
                                                // strHtml += '<tr><td>单位负责人电话：</td><td>' + itemOpt.inchargeTel + '</td><td>项目负责人：</td><td>' + itemOpt.p_Incharge + '</td></tr>';
                                                // strHtml += '<tr><td>安全负责人：</td><td>' + itemOpt.inCharge_Safety + '</td><td>安全负责人电话：</td><td>' + itemOpt.inChargeTel_Safety + '</td></tr>';
                                                // strHtml += '<tr><td>甲方单位：</td><td>' + itemOpt.a_Company + '</td><td>施工地点：</td><td>'+itemOpt.srbAddress+'</td></tr>';
                                                // strHtml += '</table>';
                                                strHtml += '</div>'
                                                return strHtml
                                            }
                                        }
                                    }
                                })
                                //   data: allData,
                            })
                        })

                        _this.myChart.setOption(option)
                        window.echartsArr.push(_this.myChart)
                        // let _this = this;
                        _this.$erd.listenTo(_this.$refs.fgdsfs, element => {
                            _this.$nextTick(() => {
                                domID1.style.width = document.getElementById('fbdtcshi').offsetWidth - 0 + 'px'
                                _this.myChart.resize()
                            })
                        })
                        setTimeout(() => {
                            _this.myChart.resize()
                        }, 200)
                        // var timeFn = null;
                        //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
                        _this.myChart.off('click')
                        _this.myChart.on('click', function (params) {
                            //  console.log("🚀 ~ file: echarts2.vue:369 ~ params:", params);
                            _this.mapData = []
                            mapList = [[], [], []]
                            // console.log(params);
                            // clearTimeout(timeFn);
                            //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
                            // timeFn = setTimeout(function () {
                            var name = params.name //地区name
                            var mapCode = './static/mapjson/' + name + '.json' //地区的json数据
                            // console.log(_this.mapData,mapList);

                            _this.jsonData.forEach(item => {
                                if (name == item.name) {
                                    let data = {
                                        deptIndex: item.id,
                                        monitorFlag: 2,
                                        powerFlag: 2,
                                        serverName: 'event-boot',
                                        statisticalType: _this.statisticalType
                                    }
                                    _this.titles = params.name

                                    getAreaLineDetailData(data).then(res => {
                                        _this.mapData = res.data.substationDetailVOList
                                        if (_this.mapData != null) {
                                            _this.mapData.forEach(item => {
                                                if (item.color == 'green') {
                                                    mapList[0].push(item)
                                                } else if (item.color == 'red') {
                                                    mapList[1].push(item)
                                                }
                                                //  else if (item.color == "blue") {
                                                //   mapList[2].push(item);
                                                // }
                                            })
                                        } else {
                                            mapList = [[], [], []]
                                        }
                                        let table = []
                                        for (var i = 0; i < res.data.areaValue.length; i++) {
                                            let t = {
                                                qy: res.data.areaValue[i][0],
                                                jcd: res.data.areaValue[i][1],
                                                zc: res.data.areaValue[i][2],
                                                zd: res.data.areaValue[i][3]
                                            }
                                            table.push(t)
                                        }
                                        let obj = {
                                            id: item.id,
                                            name: item.name,
                                            data: table
                                        }
                                        _this.$emit('sendData', obj)
                                        // this.$nextTick(() => {
                                        //   this.$refs.child1.domain();
                                        //   this.$refs.child2.echarts();
                                        // });
                                        if (!mapCode) {
                                            // alert("无此区域地图显示");
                                            return
                                        }
                                        loadMap(mapCode, name)
                                    })
                                } else {
                                    if (!mapCode) {
                                        // alert("无此区域地图显示");
                                        return
                                    }
                                    loadMap(mapCode, name)
                                }
                            })
                            if (params.componentType == 'geo') {
                                _this.isfanhui = true
                            }

                            // }, 250);
                        })
                        // 绑定双击事件，返回全国地图
                        // _this.myChart.on("dblclick", function (params) {
                        //   //当双击事件发生时，清除单击事件，仅响应双击事件
                        //   clearTimeout(timeFn);
                        //   _this.isfanhui = false;
                        //   _this.titles = "中国";

                        //   //返回全国地图
                        //   loadMap("./static/mapjson/全国.json", "");
                        // });
                    } else {
                        //  alert("无法加载该地图");
                    }
                })
            }
        },
        resizeEchartZ() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('fbdtcshi'), element => {
                // let  domeId=document.getElementById("ceshi")
                let domeId2 = document.getElementById('china')
                domeId2.style.width = document.getElementById('fbdtcshi').offsetWidth - 0 + 'px'
                if (this.myChart !== '') {
                    this.myChart.resize()
                }
            })
        }
    },
    watch: {
        title(newVal) {
            this.titles = newVal
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../../../styles/comStyle.less');
</style>
<style lang="scss" scoped>
.back {
    position: absolute;
    z-index: 999999999;
    margin-right: 10px;
    margin-left: auto;
    font-size: 29px;
    line-height: 32px;
    color: $themeColor;
    cursor: pointer;
    &:hover {
        color: $themeColor;
        opacity: 0.9;
    }
}
</style>
