<template>
  <!-- 知识产权 -->
  <div ref="map" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
const animationDuration = 4000;
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
      // default: (window.innerHeight-260)/2+"px"
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    tableData:{
      type:Array,
      default:()=>[]
    },
    centerData:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      myChart: null,
      chartOpion:null,
      maxSize4Pin:10,
      minSizePin:1,
      max:80,
      min:9,
      uploadedDataURL: "./xianning.json",
      mapTableData:[],
      mapData:[],
      center:{
        "咸安区":[114.333894,29.824716],
        "嘉鱼县":[113.921547,29.973363],
        "赤壁市":[113.88366,29.716879],
        "崇阳县":[114.049958,29.54101],
        "通山县":[114.493163,29.604455],
        "通城县":[113.814131,29.246076]},
    };
  },
  watch:{
    'tableData':{
      handler(newV,old){
        this.mapTableData = newV;
      },
      deep:true
    },
    'centerData':{
      handler(newV,old){
        this.mapData = newV;
      },
      deep:true
    }
  },
  methods: {
    convertData(data){
      let res = [];
        for (let i = 0; i < data.length; i++) {
            let geoCoord = this.center[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                    data:data[i].value
                });
            }
        }
      return res;
    },
    initMap(){
      // 基于准备好的dom，初始化echarts实例
      let _this = this;
      this.myChart = echarts.init(this.$el,"macarons");
      // 获取地图数据
      this.$axios.get(this.uploadedDataURL).then((response) => {
        // 注册地图
        
        echarts.registerMap('js',response.data);
        // 设置option
        this.chartOpion = this.myChart.setOption({
          visualMap: {
              min: 0,
              max: 100000,
              left: 'right',
              top: 'bottom',
              text: ['高', '低'],
              calculable: false,
              inRange: {
                  color: ['#e0ffff', '#006edd'],
                  symbolSize: [30, 100]
              }
          },
          tooltip: {
              trigger:'item',
              padding:8,
              enterable: true,
              transitionDuration: 1,
              textStyle: {
                  color: '#fff',
                  decoration: 'none',
              }
          },
          geo: [{
              map: 'js',
              roam: true, //是否允许缩放
              zoom: 1.1, //默认显示级别
              scaleLimit: {
                  min: 0,
                  max: 1.2
              }, //缩放级别
              itemStyle: {
                  normal: {
                      areaColor: '#013C62',
                      shadowColor: '#013C62',
                      shadowBlur: 20,
                      shadowOffsetX: -5,
                      shadowOffsetY: 15,
                  }
              },
          }],
          series: [
              //地图
              {
                  name:'下属单位机构信息',
                  type: 'map',
                  mapType: 'js',
                  geoIndex: -1,
                  zoom: 1.1, //默认显示级别
                  label: {
                      show: true,
                      color: '#ffffff',
                      emphasis: {
                          color: 'white',
                          show: true
                      }
                  },
                  itemStyle: {
                      normal: {
                          borderColor: '#2980b9',
                          borderWidth: 1,
                          areaColor: '#12235c'
                      },
                      emphasis: {
                          areaColor: '#FA8C16',
                          borderWidth: 0,
                          color: 'green'
                      }
                  },
                  data:_this.mapData
              },
              
              
          ]
        })
      })
      this.myChart.on('click',function(params){
        _this.mapTableData.find((item)=>{
          if(item.unitName == params.data.name){
            // 是否可以跳转
            if(item.isOpne==0){
              window.open(item.jumpUrl,'_blank')
            }
          }
        })
      })
    },
  },
  beforeDestroy() {
    if(this.myChart){
      this.myChart.dispose()
    }
  },
};
</script>
