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

<script>
import Echart from "@/common/echart";
import { mapGetters } from "vuex";
export default {
  data () {
    return {
      options: {},
      max: "5000", //最大value值
      min: "1", // 最小value值
      key: 0,
      mapjson: "",
    };
  },
  components: {
    Echart,
  },
  created () { },
  props: {
    cdata: {
      type: Array,
      default: () => [],
    },
  },
  mounted () {
    window.addEventListener("resize", () => {
      this.key++;
    });
    this.getDistrictcode();
  },
  watch: {
    cdata: {
      handler (newData) {
        let _this = this;
        // 设置点的位置(经纬度)
        this.options = {
          showLegendSymbol: false,
          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: "6%",
            left: 50,
            splitNumber: 6,
            seriesIndex: [0],
            itemWidth: 20, // 每个图元的宽度
            itemGap: 4, // 每两个图元之间的间隔距离，单位为px
            selectedMode: false, // 是否允许点击
            pieces: [
              // 自定义每一段的范围，以及每一段的文字
              { gte: 5000, label: "≥5000", color: "#056BEC" }, // 不指定 max，表示 max 为无限大（Infinity）。
              { gte: 1000, lte: 5000, label: "1000-5000", color: "#48BDE3" },
              { gte: 500, lte: 1000, label: "500-1000", color: "#0494F3" },
              { gte: 0, lte: 500, label: "≤500", color: "#1872CC" },
            ],
            textStyle: {
              color: "#CEF8FF",
            }
          },
          geo: [{
            aspectScale: 1, //长宽比
            zoom: 1.1,
            mapType: "", // 自定义扩展图表类型
            top: "15%",
            left: "10%",
            map: "汉中市",
            itemStyle: {
              normal: {
                //阴影
                areaColor: "#5689FD",
                // shadowColor: "#21371d",
                borderWidth: 1,
                // shadowOffsetX: 2,
                // shadowOffsetY: 20,
              },
            },
          }, {
            aspectScale: 1, //长宽比
            zoom: 1.1,
            mapType: "", // 自定义扩展图表类型
            top: "18%",
            left: "10%",
            map: "汉中市",
            itemStyle: {
              color: '#21371d',
              areaColor: "#21371d",
              borderWidth: 1,
              borderColor: "#00A3CB",
              shadowColor: "#01C5E9",
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: -12,
              // normal: {
              //   //阴影
              //   color:'#21371d',
              //   areaColor: "#21371d",
              // },
            },
            emphasis: {
              disabled: true
            }
          }],
          series: [
            {
              type: "map",
              aspectScale: 1, //长宽比
              zoom: 1.1,
              mapType: "汉中市", // 自定义扩展图表类型
              top: "15%",
              left: "10%",
              itemStyle: {
                normal: {
                  // areaColor: "rgba(19,54,162,.1)",
                  borderWidth: 1.6,
                  // shadowBlur: 2,
                  borderColor: "#9DFFFC",
                  // shadowColor: "#44f2fc",
                },
                emphasis: {
                  // itemStyle:{
                  // 地图区域的高亮颜色
                  areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#4DD1B4' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#15BFCE' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  },
                  borderType: 'dottod',
                  borderWidth: 0,
                  borderColor: '#F8F071',
                  shadowColor: '#000',
                  shadowBlur: 10,
                  shadowOffsetY: 4
                  // }
                }
              },
              label: {
                formatter: (params) => {
                  // return `${params.name}\n${params.value + "个"}`;
                },
                show: true,
                position: "insideRight",
                textStyle: {
                  fontSize: 14,
                  color: "#efefef",
                },
                emphasis: {
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
              // 选中区域颜色
              // select:{
              //   itemStyle:{
              //     areaColor:'red'
              //   }
              // },
              data: newData,
            },
          ],
        };
        // 重新选择区域
        // this.handleMapRandomSelect();
      },

      immediate: true,
      deep: true,
    },
  },
  computed: {
    ...mapGetters(["sidebar", "dicData"]),
    logoName () {
      return (
        this.dicData["sysCode"].filter((item) => { return item.DCODE == "areaMap" })
      );
    },
  },
  methods: {
    // 根据行政区代码匹配行政区
    getDistrictcode () {
      this.mapjson = ""
      if (this.logoName[0].DNAME) {
        this.mapjson = this.logoName[0].DNAME;
        require(`@/common/map/${this.mapjson}.js`);
      }
    },
    // 开启定时器
    startInterval () {
      const _self = this;
      // 应通过接口获取配置时间，暂时写死5s
      const time = 2000;
      if (this.intervalId !== null) {
        clearInterval(this.intervalId);
      }
      this.intervalId = setInterval(() => {
        this.$refs.centreLeft2ChartRef && _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>