<template>
    <div>
        <svg-icon v-show="isfanhui" class="back" icon-class="back" @click="fanhui" />
        <div id="china" :style="`width:100%;height:${h};`" ref="fg" v-loading="isLoading"></div>
    </div>
</template>

<script>
// import {getReasonData} from "@/api/statistics"
// import china from '/dep/echarts/map/js/china.js'
// echarts.registerMap('china', china)
import jquery from 'jquery'
// import { zoom } from 'node_modules/_d3@7.6.1@d3/src';
export default {
    data() {
        return {
            device: null,
            zoom: null, //图表焦点校验
            h: null,
            isLoading: false,
            isfanhui: false,
            myChart: null,
            data: null
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.$nextTick(() => {
            this.echarts()
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.zoom = window.devicePixelRatio
            if (this.zoom == 1) {
                let heightd = window.sessionStorage.getItem('appheight') - 125
                this.h = heightd + 'px'
            }
            if (this.zoom == 1.25) {
                let heightd = window.sessionStorage.getItem('appheight') - 265
                this.h = heightd + 'px'
            }
        },
        //返回
        fanhui() {
            this.isfanhui = false
            this.echarts()
        },
        echarts() {
            let _this = this

            // //各份的地图json文件
            // var provinces = {
            //   上海市: "./static/mapjson/上海市.json",
            //   河北省: "./static/mapjson/河北省.json",
            //   山西省: "./static/mapjson/山西省.json",
            //   内蒙古自治区: "./static/mapjson/内蒙古自治区.json",
            //   辽宁省: "./static/mapjson/辽宁省.json",
            //   吉林省: "./static/mapjson/吉林省.json",
            //   黑龙江省: "./static/mapjson/黑龙江省.json",
            //   江苏省: "./static/mapjson/江苏省.json",
            //   浙江省: "./static/mapjson/浙江省.json",
            //   安徽省: "./static/mapjson/安徽省.json",
            //   福建省: "./static/mapjson/福建省.json",
            //   江西省: "./static/mapjson/江西省.json",
            //   山东省: "./static/mapjson/山东省.json",
            //   河南省: "./static/mapjson/河南省.json",
            //   湖北省: "./static/mapjson/湖北省.json",
            //   湖南省: "./static/mapjson/湖南省.json",
            //   广东省: "./static/mapjson/广东省.json",
            //   广西壮族自治区: "./static/mapjson/广西壮族自治区.json",
            //   海南省: "./static/mapjson/海南省.json",
            //   四川省: "./static/mapjson/四川省.json",
            //   贵州省: "./static/mapjson/贵州省.json",
            //   云南省: "./static/mapjson/云南省.json",
            //   西藏自治区: "./static/mapjson/西藏自治区.json",
            //   陕西省: "./static/mapjson/陕西省.json",
            //   甘肃省: "./static/mapjson/甘肃省.json",
            //   青海省: "./static/mapjson/青海省.json",
            //   宁夏回族自治区: "./static/mapjson/宁夏回族自治区.json",
            //   新疆维吾尔自治区: "./static/mapjson/新疆维吾尔自治区.json",
            //   北京市: "./static/mapjson/北京市.json",
            //   天津市: "./static/mapjson/天津市.json",
            //   重庆市: "./static/mapjson/重庆市.json",
            //   香港特别行政区: "./static/mapjson/香港特别行政区.json",
            //   澳门特别行政区: "./static/mapjson/澳门特别行政区.json",
            // };
            let allData = [
                { name: '内蒙古', value: 1 },
                { name: '青海', value: 1.3 },
                { name: '吉林', value: 0 },
                { name: '甘肃', value: 0 },
                { name: '黑龙江', value: 1.3 },
                { name: '山东', value: 0 },
                { name: '天津', value: 0 },
                { name: '新疆', value: 1 },
                { name: '云南', value: 0 },
                { name: '浙江', value: 0.69 },
                { name: '江苏', value: 0.6 },
                { name: '河北', value: 0 },
                { name: '北京市', value: 0 },
                { name: '河南', value: 0 },
                { name: '宁夏', value: 0 },
                { name: '上海', value: 0 },
                { name: '辽宁', value: 0 },
                { name: '江西', value: 0 },
                { name: '山西', value: 0 },
                { name: '福建', value: 0.2 },
                { name: '重庆', value: 0 },
                { name: '四川', value: 1.3 },
                { name: '湖南', value: 0 },
                { name: '安徽', value: 0.6 },
                { name: '湖北', value: 0 },
                { name: '陕西', value: 0 },
                { name: '贵州', value: 0 },
                { name: '广东', value: 0.2 },
                { name: '广西', value: 0.2 },
                { name: '西藏', value: 1 },
                { name: '台湾', value: 0 },
                { name: '海南', value: 0 }
            ]
            // for (var i = 0; i < allData.length; i++) {
            //   allData[i].value = Math.round(Math.random() * 100);
            // }
            loadMap('./static/mapjson/全国.json', '')

            function loadMap(mapCode, name) {
                $.get(mapCode, function (data) {
                    _this.isLoading = true
                    if (data) {
                        if (_this.myChart != null) {
                            _this.myChart.dispose()
                        }
                        let echarts = require('echarts')
                        let domID1 = document.getElementById('china')
                        _this.myChart = echarts.init(domID1)
                        _this.isLoading = false
                        echarts.registerMap(name, data)
                        var white = '#000'
                        var option = {
                            title: {
                                text: '区域暂降评估',
                                left: 'center',
                                top: '5%'
                            },
                            tooltip: {
                                // triggerOn: "click",
                                // formatter: function(e, t, n) {
                                //     return "<br />" + e.name + "<br/>区域暂降评估等级 :" + e.value
                                // }
                                trigger: 'item',
                                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
                                }
                            },
                            visualMap: {
                                // type: 'continuous',
                                // text: ['', ''],
                                showLabel: true,
                                left: '50',
                                min: 0,
                                max: 100,
                                // inRange: {
                                //     color: ['red', 'green', '#40a9ed', '#3598c1', '#215096', ]
                                // },
                                pieces: [
                                    {
                                        gt: 1.2,
                                        label: '4级',
                                        color: '#A52A2A'
                                    },
                                    {
                                        gt: 0.8,
                                        lt: 1.2,
                                        label: '3级',
                                        color: '#C87C23'
                                    },
                                    {
                                        gt: 0.4,
                                        lt: 0.8,
                                        label: '2级',
                                        color: '#A19C32'
                                    },
                                    {
                                        gte: 0,
                                        lt: 0.4,
                                        label: '1级',
                                        color: '#2E8B57'
                                    },
                                    {
                                        value: 0,
                                        label: '无数据',
                                        color: '#ddd',
                                        color: '#ddd'
                                    }
                                ],
                                splitNumber: 0
                            },
                            geo: {
                                map: name,
                                roam: true,
                                // scaleLimit: {
                                //     min: 1,
                                //     max: 2
                                // },
                                zoom: 1.1,
                                top: 120,
                                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: [
                                {
                                    type: 'map',
                                    mapName: name,
                                    geoIndex: 0,
                                    roam: true,
                                    selectedMode: 'false', //是否允许选中多个区域
                                    label: {
                                        normal: {
                                            show: true
                                        },
                                        emphasis: {
                                            show: true
                                        }
                                    },
                                    data: allData
                                }
                            ]
                        }
                        _this.myChart.setOption(option)
                        window.echartsArr.push(_this.myChart)
                        // curMap = {
                        //     mapCode: mapCode,
                        //     mapName: name
                        // };
                        var timeFn = null
                        //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
                        _this.myChart.on('click', function (params) {
                            clearTimeout(timeFn)
                            //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
                            timeFn = setTimeout(function () {
                                var name = params.name //地区name
                                var mapCode = './static/mapjson/' + name + '.json' //地区的json数据
                                if (!mapCode) {
                                    // alert("无此区域地图显示");
                                    return
                                }
                                if (name != '全国') {
                                    _this.isfanhui = true
                                }
                                loadMap(mapCode, name)
                            }, 250)
                        })
                        // 绑定双击事件，返回全国地图
                        _this.myChart.on('dblclick', function (params) {
                            //当双击事件发生时，清除单击事件，仅响应双击事件
                            clearTimeout(timeFn)
                            _this.isfanhui = false

                            //返回全国地图
                            loadMap('./static/mapjson/全国.json', '')
                        })
                    } else {
                        alert('无法加载该地图')
                    }
                })
            }
        }
    }
}
</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>
