<template>
  <!-- 地图 -->
  <Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="53vh"
    :options="options"></Echart>
</template>

<script>
import Echart from '@/common/echart';
export default {
  data () {
    return {
      options: {},
      max: "100", //最大value值
      min: "1", // 最小value值
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        let _this = this;
        // 设置点的位置(经纬度)
        const geoCoordMap = {
          汉台区: [107.03187, 33.06774, 20],
          南郑区: [106.94024, 33.00299, 20],
          城固县: [107.33367, 33.15661, 20],
          洋县: [107.545837, 33.222739, 20],
          西乡县: [107.76867, 32.98411, 20],
          镇巴县: [107.89648, 32.53487, 20],
          勉县: [106.673221, 33.153553, 20],
          留坝县: [106.92233, 33.61606, 20],
          佛坪县: [107.98974, 33.52496, 20],
          宁强县: [106.25958, 32.82881, 20],
          略阳县: [106.15399, 33.33009, 20],
        };
        let convertData = function (data) {
          let scatterData = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              scatterData.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          return scatterData;
        };
        this.options = {
          showLegendSymbol: true,
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 14,
              lineHeight: 22,
            },
            position: point => {
              // 固定在顶部
              return [point[0] + 50, point[1] - 20];
            },
            // 如果需要自定义 tooltip样式，需要使用formatter
            formatter: params => {
              return `<div style="">${params.name}:${params.value + "个"}</div>`
            }
          },
          visualMap: {
            min: 0,
            max: _this.max,
            bottom: '13%',
            left: 50,
            splitNumber: 6,
            seriesIndex: [0],
            itemWidth: 20, // 每个图元的宽度
            itemGap: 2,    // 每两个图元之间的间隔距离，单位为px
            pieces: [      // 自定义每一段的范围，以及每一段的文字
              { gte: 100, label: '100以上', color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
              { gte: 50, lte: 6000, label: '20-100', color: '#3375e4' },
              { gte: 20, lte: 2000, label: '1-200', color: '#6797ef' },
              { gte: 1, lte: 1000, label: '1-20', color: '#96b5ef' },
            ],
            textStyle: {
              color: '#737373'
            }
          },
          geo: {
            aspectScale: 1, //长宽比
            zoom: 1.1,
            mapType: '汉中市', // 自定义扩展图表类型
            top: '15%',
            left: '10%',
            map: '汉中市',
            itemStyle: {
              normal: {//阴影
                areaColor: '#02D9FD ',
                shadowColor: '#01271F',
                borderWidth: 0,
                shadowOffsetX: 2,
                shadowOffsetY: 25
              }
            }
          },
          series: [
            {
              type: 'map',
              aspectScale: 1, //长宽比
              zoom: 1.1,
              mapType: '汉中市', // 自定义扩展图表类型
              top: '15%',
              left: '10%',
              itemStyle: {
                normal: {
                  areaColor: 'rgba(19,54,162,.5)',
                  borderColor: 'rgba(0,242,252,.5)',
                  borderWidth: 2,
                  shadowBlur: 7,
                  borderColor: 'rgba(19,54,162,.1)',
                  shadowColor: '#44f2fc',
                },
                emphasis: {
                  areaColor: '#4f7fff',
                  borderColor: 'rgba(0,242,252,.5)',
                  borderWidth: 2,
                  shadowBlur: 10,
                  shadowColor: '#00f2fc',
                },
              },
              label: {
                formatter: params => {
               return `${params.name}\n${params.value+"个"}`;
            },
                show: true,
                position: 'insideRight',
                textStyle: {
                  fontSize: 14,
                  color: '#efefef',
                },
                emphasis: {
                  textStyle: {
                    color: '#fff',
                  }
                }
              },
              data: newData,
            }
          ],
        };
        // 重新选择区域
        this.handleMapRandomSelect();
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 开启定时器
    startInterval () {
      const _self = this;
      // 应通过接口获取配置时间，暂时写死5s
      const time = 2000;
      if (this.intervalId !== null) {
        clearInterval(this.intervalId);
      }
      this.intervalId = setInterval(() => {
        _self.reSelectMapRandomArea();
      }, time);
    },
    // 重新随机选中地图区域
    reSelectMapRandomArea () {
      const length = 9;
      this.$nextTick(() => {
        try {
          const map = this.$refs.centreLeft2ChartRef.chart;
          let index = Math.floor(Math.random() * length);
          while (index === this.preSelectMapIndex || index >= length) {
            index = Math.floor(Math.random() * length);
          }
          map.dispatchAction({
            type: 'mapUnSelect',
            seriesIndex: 0,
            dataIndex: this.preSelectMapIndex,
          });
          map.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index,
          });
          map.dispatchAction({
            type: 'mapSelect',
            seriesIndex: 0,
            dataIndex: index,
          });
          this.preSelectMapIndex = index;
        } catch (error) {
          console.log(error)
        }
      });
    },
    handleMapRandomSelect () {
      this.$nextTick(() => {
        try {
          const map = this.$refs.centreLeft2ChartRef.chart;
          const _self = this;
          setTimeout(() => {
            _self.reSelectMapRandomArea();
          }, 0);
          // 移入区域，清除定时器、取消之前选中并选中当前
          map.on('mouseover', function (params) {
            clearInterval(_self.intervalId);
            map.dispatchAction({
              type: 'mapUnSelect',
              seriesIndex: 0,
              dataIndex: _self.preSelectMapIndex,
            });
            map.dispatchAction({
              type: 'mapSelect',
              seriesIndex: 0,
              dataIndex: params.dataIndex,
            });
            _self.preSelectMapIndex = params.dataIndex;
          });
          // 移出区域重新随机选中地图区域，并开启定时器
          map.on('globalout', function () {
            _self.reSelectMapRandomArea();
            _self.startInterval();
          });
          this.startInterval();
        } catch (error) {
          console.log(error)
        }
      });
    },
  },
};
</script>
<style>

</style>