<template>
    <div id="china" :style="`width:100%;height:${h};`" ref="fg" v-loading="isLoading1"></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,
            isLoading1: false,
            myChart: null,
            data: null,
            mapName: '全国'
        }
    },
    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'
            }
        },
        echarts() {
            //各省份的地图json文件
            //   this.isLoading1 = false;
            // let allData = [
            //   { 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 },
            //   { 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: 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 },
            //   { name: "台湾", value: 0 },
            //   { name: "海南", value: 0 },
            // ];
            this.loadMap(`/api8/tiles/${this.mapName}.json`, 'china', 1.1)
            // var timeFn = null;

            //单击切换到省级地图,当mapCode有值,说明可以切换到下级地图
            //   this.myChart.on("click", function (params) {
            //     clearTimeout(timeFn);
            //     //由于单击事件和双击事件冲突,故单击的响应事件延迟250毫秒执行
            //     timeFn = setTimeout(function () {
            //       var name = params.name; //地区name
            //       var mapCode = provinces[name]; //地区的json数据
            //       if (!mapCode) {
            //         // alert('无此区域地图显示');
            //         return;
            //       }

            //       this.loadMap(mapCode, name);
            //     }, 250);
            //   });

            //   // 绑定双击事件,返回全国地图
            //    this.myChart.on("dblclick", function (params) {
            //     //当双击事件发生时,清除单击事件,仅响应双击事件
            //     clearTimeout(timeFn);

            //返回全国地图
            // this.loadMap("/api1/system-boot/chinaJson", "");
            //   });
            // myChart.resize();
            //   let _this = this;
            //   _this.$erd.listenTo(_this.$refs.fg, (element) => {
            //     _this.$nextTick(() => {
            //       myChart.resize();
            //     });
            //   });
            //   window.onresize = function () {
            //     myChart.resize();
            //   }
        },
        loadMap(mapCode, name, zoom) {
            let _this = this
            let allData = [
                { 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 },
                { 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: 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 },
                { name: '台湾', value: 0 },
                { name: '海南', value: 0 }
            ]
            jquery.get(mapCode, function (data) {
                allData
                // console.log(mapCode);
                if (data) {
                    if (_this.myChart != null) {
                        _this.myChart.dispose()
                    }

                    //   this.isLoading1 = true
                    let echarts = require('echarts')
                    let domID1 = document.getElementById('china')
                    _this.myChart = echarts.init(domID1)
                    echarts.registerMap(name, data)
                    let option = {
                        title: {
                            text: '区域暂降评估',
                            left: 'center',
                            top: '5%'
                        },
                        geo: {
                            show: true,
                            map: 'china',
                            center: [106.567492, 35.589036], //中心点设置
                            aspectScale: 0.75, //[ default: 0.75 ]地图的长宽比
                            label: {
                                normal: {
                                    show: true, //是否显示城市名
                                    textStyle: {
                                        color: '#000', //legend字体颜色  深蓝
                                        fontSize: 12
                                    }
                                    // verticalAlign: 'middle',
                                    // align: 'left',
                                },
                                emphasis: {
                                    show: false
                                }
                            },

                            zoom: zoom,
                            roam: true,
                            itemStyle: {
                                normal: {
                                    areaColor: '#2386cf', //地图填充颜色
                                    borderColor: '#FFFFFF', //地图边框颜色  蓝
                                    borderWidth: 2
                                },
                                emphasis: {
                                    areaColor: '#cbd2ec' //鼠标经过 地图
                                }
                            }
                        },
                        tooltip: {
                            show: true,
                            formatter: function (params) {
                                if (params.data) return params.name + ':' + params.data['value']
                            }
                        },

                        visualMap: {
                            min: 0,
                            max: 100,
                            left: 26,
                            bottom: 40,
                            showLabel: true,
                            show: false,
                            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',
                                    borderColor: '#B7DBD2'
                                }
                            ],
                            show: !0,
                            splitNumber: 0
                        },

                        series: [
                            {
                                name: 'map',
                                type: 'map',
                                map: 'china',
                                // aspectScale: 0.75, //长宽比
                                // left: '2%',
                                // // right: '35%',
                                // top: 10,
                                // width: '90%',
                                // height: '90%',
                                roam: false,
                                // itemStyle: {
                                //     normal: {
                                //         areaColor: '#fff',
                                //         borderColor: '#00effc',
                                //         borderWidth: 1.5,
                                //         label: {
                                //             show: true,
                                //             color: '#fff',
                                //         },

                                //         emphasis: {
                                //             label: {
                                //                 show: true
                                //             }
                                //         }
                                //     }
                                // },
                                geoIndex: 0,
                                data: allData
                            }
                        ]
                    }
                    _this.myChart.setOption(option, true)
                    window.echartsArr.push(_this.myChart)
                    // _this.myChart.resize();
                    _this.$erd.listenTo(_this.$refs.fg, element => {
                        _this.$nextTick(() => {
                            _this.myChart.resize()
                        })
                    })
                    window.onresize = function () {
                        _this.myChart.resize()
                    }

                    let timeFn = null
                    //单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
                    _this.myChart.on('click', function (params) {
                        //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
                        // _this.list = params.data;
                        // _this.flg = false;
                        clearTimeout(timeFn)
                        timeFn = setTimeout(function () {
                            // console.log(params.name);
                            _this.loadMap(`/api8/tiles/${params.name}.json`, 'china', 2)
                            _this.mapName = params.name
                            _this.echarts()
                        }, 250)
                    })
                    // 绑定双击事件，返回全国地图
                    _this.myChart.on('dblclick', function (params) {
                        //当双击事件发生时，清除单击事件，仅响应双击事件
                        clearTimeout(timeFn)
                        //返回全国地图
                        _this.loadMap('/api8/tiles/全国.json', 'china', 1.1)
                    })
                    // curMap = {
                    //     mapCode: mapCode,
                    //     mapName: name
                    // };
                } else {
                    alert('无法加载该地图')
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
div {
    // background: #000;
}
</style>
