<template>
  <div class="AiDvMap" v-resize="onDomResize">
    <div class="chart-map" :class="v" style="width: 100%; height: 100%"></div>
    <transition name="fade">
      <div class="info" v-if="isShowInfo">
        <div class="info-mask"></div>
        <div class="info-content">
          <div class="info-title">
            <h2>兴仁公安局</h2>
          </div>
          <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/close.png" @click="isShowInfo = false" />
          <div class="info-wrapper">
            <div class="info-wrapper__item">
              <label>下属单位：</label>
              <span>派出所</span>
            </div>
            <div class="info-wrapper__item">
              <label>居民群：</label>
              <span>派出所</span>
            </div>
            <div class="info-wrapper__item">
              <label>成员人数：</label>
              <span>派出所</span>
            </div>
            <div class="info-wrapper__item">
              <label>群人数：</label>
              <span>派出所</span>
            </div>
            <div class="info-wrapper__item">
              <label>激活比例：</label>
              <span>派出所</span>
            </div>
            <div class="info-wrapper__item">
              <label>好友人数：</label>
              <span>派出所</span>
            </div>
            <div class="info-wrapper__item">
              <label>群主人数：</label>
              <span>派出所</span>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import http from "dui/lib/js/request";

export default {
  name: 'AiDvMap',
  data() {
    return {
      timer: null,
      v: `AiDvMap-${new Date().getTime()}`,
      chart: null,
      isShowInfo: false,
      geoJSON: require('./geoJSon/qxnGeoJSON.json')
    }
  },
  directives: {
    resize: {
      bind(el, binding) {
        let width = ''
        let height = ''

        function isReize() {
          const style = document.defaultView.getComputedStyle(el)
          if (width !== style.width || height !== style.height) {
            binding.value({
              width: style.width,
              height: style.height
            })
          }
          width = style.width
          height = style.height
        }

        el.__vueSetInterval__ = setInterval(isReize, 300)
      },

      unbind(el) {
        clearInterval(el.__vueSetInterval__)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },

  methods: {
    onDomResize() {
      this.$nextTick(() => {
        this.chart.resize()
      })
    },

    initChart() {
      this.chart = echarts.init(document.querySelector(`.${this.v}`))
      // this.getData().then(res => {
      //   if (res.code === 0) {
          echarts.registerMap('黔西南', this.geoJSON)

          let option = {
            geo: [
              {
                map: "黔西南",
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ["50%", "50%"],
                layoutSize: "180%",
                show: true,
                roam: false,
                emphasis: {
                  show: true,
                  label: {
                    textStyle: {
                      color: "#FFFFFF"
                    },
                  },
                  itemStyle: {
                    // areaColor: '#fff'
                  }
                },
                label: {
                  normal: {
                    show: true,
                    color: '#fff',
                    fontSize: '14'
                  }
                },
                itemStyle: {
                  normal: {
                    borderColor: "rgba(2, 254, 255, 0.7)",
                    borderWidth: 2,
                    shadowColor: "rgba(2, 254, 255, 0.1)",
                    shadowOffsetY: 10,
                    shadowBlur: 120,
                    areaColor: "#0f7295",
                  },
                }
              },
              // 重影
              {
                type: "map",
                map: "黔西南",
                zlevel: -1,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ["50%", "51%"],
                layoutSize: "180%",
                roam: false,
                silent: true,
                itemStyle: {
                  normal: {
                    borderWidth: 1,
                    // borderColor:"rgba(17, 149, 216,0.6)",
                    borderColor: "rgba(2, 254, 255, 0.3)",
                    shadowColor: "rgba(2, 254, 255, 0.3)",
                    shadowOffsetY: 5,
                    shadowBlur: 15,
                    areaColor: "rgba(5,21,35,0.1)",
                  },
                },
              },
              {
                type: "map",
                map: "黔西南",
                zlevel: -2,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ["50%", "52%"],
                layoutSize: "180%",
                roam: false,
                silent: true,
                itemStyle: {
                  normal: {
                    borderWidth: 1,
                    // borderColor: "rgba(57, 132, 188,0.4)",
                    borderColor: "rgba(2, 254, 255, 0.2)",
                    shadowColor: "rgba(2, 254, 255, 0.24)",
                    shadowOffsetY: 5,
                    shadowBlur: 15,
                    areaColor: "transpercent",
                  },
                },
              },
              {
                type: "map",
                map: "黔西南",
                zlevel: -3,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ["50%", "53%"],
                layoutSize: "180%",
                roam: false,
                silent: true,
                itemStyle: {
                  normal: {
                    borderWidth: 1,
                    // borderColor: "rgba(11, 43, 97,0.8)",
                    borderColor: "rgba(2, 254, 255, 0.1)",
                    shadowColor: "rgba(2, 254, 255, 0.1)",
                    shadowOffsetY: 15,
                    shadowBlur: 10,
                    areaColor: "transpercent",
                  },
                },
              }
            ],
            series: [
              {
                type: 'scatter',
                map: "黔西南",
                coordinateSystem: 'geo',
                z: 3,
                zlevel: 3,
                // symbol: 'none',
                symbolSize: 16,
                rippleEffect: {
                  period: 2,
                  scale: 4,
                  brushType: 'fill'
                },
                label: {
                    show: false
                },
                roam: false,
                itemStyle: {
                  normal: {
                    areaColor: '#000',
                    borderColor: '#a18a3a',
                    borderWidth: 1
                  },
                  emphasis: {
                    show: false,
                    areaColor: null
                  }
                },
                // label: {
                //   show: true,
                //   formatter: e => {
                //     const name = e.data[3]
                //     const value = e.data[2]
                //     return `{a|${name}}\n{b|${value}}`
                //   },
                //   fontSize: 16,
                //   rich: {
                //     a: {
                //       width: '100%',
                //       color: '#fff',
                //       lineHeight: 20,
                //       fontSize: 16
                //     },
                //     b: {
                //       backgroundColor: {
                //         // image: require('@/assets/images/point.png')
                //       },
                //       color: '#fff',
                //       height: 56,
                //       align: 'center',
                //       width: 50,
                //       fontSize: 16
                //     }
                //   }
                // },
                data: []
              }
            ]
          }
          this.chart.setOption(option)
          this.chart.on('click', e => {
            this.isShowInfo = true
          })
      // })
    },

    convertData(data) {
      return data.map(v => {
        return [this.qqMapTransBMap(v.point[1], v.point[0]).lng, this.qqMapTransBMap(v.point[1], v.point[0]).lat, v.value, v.name]
      })
    },

    qqMapTransBMap(lng, lat) {
      const x_pi = 3.14159265358979324 * 3000.0 / 180.0
      var x = lng
      var y = lat
      var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
      var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)

      return {
        lng: z * Math.cos(theta) + 0.0065,
        lat: z * Math.sin(theta) + 0.006
      }
    },

    getData() {
      return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(`https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=522300_full`)}`, null, {

      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .AiDvMap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    .info {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 111;
      width: 100%;
      height: 100%;
      overflow: hidden;

      .info-mask {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.1);
      }

      .info-content {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 11;
        width: 378px;
        height: 254px;
        padding: 15px 22px 0;
        background: url(https://cdn.cunwuyun.cn/dvcp/dv/qxn/info-bg.png);
        background-size: 100% 100%;
        transform: translate(-50%, -50%);

        .info-wrapper {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          margin-top: 40px;

          .info-wrapper__item {
            display: flex;
            width: 50%;
            margin-bottom: 20px;

            label {
              width: 70px;
              margin-right: 20px;
              color: #fff;
              text-align: right;
              font-size: 14px;
              font-weight: 500;
            }

            span {
              flex: 1;
              font-size: 14px;
              color: #FF8533;
            }
          }
        }

        img {
          position: absolute;
          top: 30px;
          right: 18px;
          z-index: 1;
          width: 24px;
          height: 24px;
          cursor: pointer;
          transition: all ease 300;

          &:hover {
            opacity: 0.6;
          }
        }

        .info-title {
          display: flex;
          align-items: center;

          h2 {
            font-size: 16px;
            color: #fff;
          }
        }
      }
    }
  }
</style>
