<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++;
      });
      // 根据行政区代码匹配行政区
      require(`@/common/map/${this.BASE_API.AREARMAP}.js`);
    },
    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="color: #000;font-size: 14px;line-height: 24px background-color: #000000">
              接入量:<span style="color: #7df7ce; font-size: 16px; font-weight: 600;">  ${params.value}  </span>个
              <br>
              上报量:<span style="color: #f32c51; font-size: 16px; font-weight: 600;">  ${params.data.successcount}  </span>个
              </div>`;
              },
              extraCssText:
                "background: #85a2eb; border-radius: 2;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
            },
            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: this.BASE_API.AREARMAP,
              itemStyle: {
                normal: {
                  //阴影
                  areaColor: "#5689FD",
                  borderWidth: 1,
                },
              },
            }, {
              aspectScale: 1, //长宽比
              zoom: 1.1,
              mapType: "", // 自定义扩展图表类型
              top: "18%",
              left: "10%",
              map: this.BASE_API.AREARMAP,
              itemStyle: {
                color: '#21371d',
                areaColor: "#21371d",
                borderWidth: 1,
                borderColor: "#00A3CB",
                shadowColor: "#01C5E9",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: -12,
              },
              emphasis: {
                disabled: true
              }
            }],
            series: [
              {
                type: "map",
                aspectScale: 1, //长宽比
                zoom: 1.1,
                mapType: this.BASE_API.AREARMAP, // 自定义扩展图表类型
                top: "15%",
                left: "10%",
                itemStyle: {
                  normal: {
                    borderWidth: 1.6,
                    borderColor: "#9DFFFC",
                  },
                  emphasis: {
                    // 地图区域的高亮颜色
                    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",
                    },
                  },
                },
                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(() => {
          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>