<template>
  <div class="fullScreen">
    <div class="pl-3 title d-flex">
      <div v-for="(item, index) in items" :key="item.level">
        <span class="text">{{ item.text }}</span>
        <span v-if="items.length - 1 !== index" class="pr-2 pl-2">/</span>
      </div>

    </div>
    <div :id="domId" class="fullScreen"></div>
  </div>
</template>

<script>
// 大屏可视化
import { generateUUID } from '@/utils/index'
import mapJson from '@/charts/jsonPacker/zhanjiangAuto.geojson'
export default {
  name: 'map-package',
  data () {
    return {
      domId: generateUUID(),
      map: null,
      items: [
        {
          text: '湛江地区',
          level: 0
        }
      ]
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.$echarts.registerMap('MAP', mapJson)
      this.$nextTick(() => {
        // 初始化地图
        this.map = this.$echarts.init(document.getElementById(this.domId))
        // 设置基础配置项
        this.option = {
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              // console.log(params)
              return `${params.name}网点: ${params.value || 0}`
            }
          },
          geo: {
            map: 'MAP',
            roam: false, // 控制缩放和平移
            show: true,
            aspectScale: 1, // 地图长宽比
            zoom: 1.2,
            selectedMode: true, // 是否可以选种
            // left: 0,
            scaleLimit: { // 最大最小缩放比
              min: 1,
              max: 5
            },
            // 区域内容
            label: {
              show: true,
              color: 'white',
              position: 'top',
              distance: 30,
              fontSize: 12,
              rotate: 0,
              formatter: (val) => {
                // 返回值为地图显示的内容
                return val.name
              }
            },
            // 自定义地区的名称映射
            // nameMap: {
            //   '天河区': "CBD",
            // },
            // 地图区域的多边形 图形样式
            itemStyle: {
              areaColor: 'rgba(9, 99, 142, 0.7)'
            },
            // 高亮状态下的多边形和标签样式
            emphasis: {
              itemStyle: {
                areaColor: 'rgba(0,60,153,0.5)'
                // shadowColor: 'rgba(0,0,0,0.8)',
                // shadowBlur: 5,
                // shadowOffsetY: 5
              }
            },
            // 选中的样式
            select: {
              // 内容样式
              label: {
                show: true
                // backgroundColor: '#000'
              },
              // 区域样式
              itemStyle: {
                areaColor: 'rgba(0,60,153,0.5)'
              }
            },
            // 针对某些区域做一些特别的样式
            regions: [
              // {
              //   name: '白云区',
              //   itemStyle: {
              //     areaColor: 'yellow',
              //     color: 'black',
              //     borderColor: 'pink'
              //   }
              // }
            ]
          }
        }
        // 将配置应用到地图上
        this.map.setOption(this.option)
        this.map.on('click', (params) => {
          if (this.items.length === 1) {
            this.items.push({
              text: params.name,
              level: 1
            })
          } else {
            this.items[1].text = params.name
          }
          // this.areaList.forEach((item) => {
          //   if (item.name == params.name) {
          //     console.log(item.name)
          //     // 获取对应的区级数据
          //     // import(`../../public/map_json/${item.code}`)
          //     // .then(res => {
          //     //   if (res.utf8Encoding) {
          //     //     // 编码后的geojson数据才需要解码
          //     //     res = this.decodeGeojson(res)
          //     //   }
          //     //   echarts.registerMap("MAP", res.default);
          //     //   this.map.setOption(this.option);
          //     // })
          //   }
          // })
        })
      })
    },
    // 对压缩后的geojson进行解码
    decodeGeojson (json) {
      const features = json.features
      const multiple = json.multiple
      if (!features) return
      features.forEach((feature) => {
        const encodeOffsets = feature.geometry.encodeOffsets
        delete feature.geometry.encodeOffsets
        const coordinates = feature.geometry.coordinates
        if (feature.geometry.type === 'Polygon') {
          coordinates.forEach((coordinate, idx) => {
            coordinates[idx] = this.decodePolygon(
              coordinate,
              encodeOffsets[idx],
              multiple
            )
          })
        } else if (feature.geometry.type === 'MultiPolygon') {
          coordinates.forEach((polygon, idx1) => {
            polygon.forEach((coordinate, idx2) => {
              coordinates[idx1][idx2] = this.decodePolygon(
                coordinate,
                encodeOffsets[idx1][idx2],
                multiple
              )
            })
          })
        } else if (feature.geometry.type === 'MultiLineString') {
          coordinates.forEach((coordinate, idx) => {
            if (encodeOffsets && encodeOffsets[idx]) {
              coordinates[idx] && (coordinates[idx] = this.decodePolygon(
                coordinate, encodeOffsets[idx], multiple
              ))
            }
          })
        }
      })
      return json
    },
    // 解码核心代码
    decodePolygon (coordinate, encodeOffsets, multiple) {
      if (!encodeOffsets) return
      const result = []
      let prevX = encodeOffsets[0]
      let prevY = encodeOffsets[1]

      for (let i = 0; i < coordinate.length; i += 2) {
        let x = coordinate.charCodeAt(i) - 64
        let y = coordinate.charCodeAt(i + 1) - 64
        x = (x >> 1) ^ -(x & 1)
        y = (y >> 1) ^ -(y & 1)
        x += prevX
        y += prevY

        prevX = x
        prevY = y
        result.push([x / multiple, y / multiple])
      }
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
.fullScreen {
  width: 100%;
  height: 100%;
}
.title {
  position: absolute;
  z-index: 9;
  span {
    font-size: 14px;
    color: #666;
    &.text {
      display: inline-block;
      cursor: pointer;
      color: blue;
    }
  }
}
</style>
