<template>
  <div id="map">
  </div>
</template>

<script>
import Vue from "vue";
import * as echarts from "echarts";
import "echarts-gl";
import WUXI from "@/assets/wuxi.json";
import tooltip from "./tooltip.vue"
export default {
  inject: ["assets"],
  data() {
    return {
      areas: new Map([
        [1,"宜兴市"],
        [2,"惠山区"],
        [3,"新吴区"],
        [4,"梁溪区"],
        [5,"江阴市"],
        [6,"滨湖区"],
        [7,"锡山区"]
      ]),
      chart: "",
      label: {
        show: true,
        formatter(params) {
          if (params.value) {
            return `{radiusBg|${params.value}}`
          } else {
            return null;
          }
        },
        rich: {
          radiusBg: {
            color: "#666",
            align: 'center',
            width: 50,
            height: 50,
            fontSize: 22,
          },
        },
        textStyle: {
          width: 62,
          height: 60,
          backgroundColor: {
            image: require('@/assets/point.png')
          },
        }
      },
      params: {},
      mapTooltip: "",
    }
  },
  methods: {

    initMap () {
      echarts.registerMap("wuxi", WUXI);
      this.chart = echarts.init(document.querySelector("#map"))
      this.setOption()
    },
    setTooltip () {
      const div = document.createElement("div");
      let mapTooltip = new Vue({
        render: h => h(tooltip, { props: { info: this.params?.data?.originalData } })
      })
      mapTooltip.$mount(div);
      this.mapTooltip = mapTooltip.$el;
    },
    setOption () {
      this.chart.setOption(this.chartOption);
    }
  },
  computed: {
    chartOption () {
      return {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            this.params = params;

            return this.mapTooltip;
          },
        },
        series: [{
          type: 'map3D', // map、map3D
          map: 'wuxi', // 注册的地图名称
          name: "无锡",
          label: {
            // 标签的相关设置
            show: false, // (地图上的城市名称)是否显示标签 [ default: false ]
            // distance: 50,               // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
            // formatter:,               // 标签内容格式器
            textStyle: {
              // 标签的字体样式
              color: '#fff', // 地图初始化区域字体颜色
              // color: '#000', // 地图初始化区域字体颜色
              fontSize: 14, // 字体大小
              opacity: 1, // 字体透明度
            },
          },
          itemStyle: {
            color: '#3e5e67aa', // 地图板块的颜色borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
            borderColor: 'rgb(147, 235, 248)', // 图形描边的颜色。[ default: #333 ]
            borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
          },
          emphasis: {
            // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
            label: {
              show: true
              // textStyle: {
              //   color: '#fff', // 高亮时标签颜色变为 白色
              //   fontSize: 15 // 高亮时标签字体 变大
              // }
            },
            itemStyle: {
              color: '#587683' // 高亮时地图板块颜色改变
            }
          },
          groundPlane: {
            // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
            show: false, // 是否显示地面。[ default: false ]
            color: '#aaa' // 地面颜色。[ default: '#aaa' ]
          },
          light: {
            // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
            main: {
              // 场景主光源的设置，在 globe 组件中就是太阳光。
              color: '#fff', // 主光源的颜色。[ default: #fff ]
              intensity: 1.2, // 主光源的强度。[ default: 1 ]
              shadow: true, // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
              // shadowQuality: 'high',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
              alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
              beta: 20 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
            },
            ambient: {
              // 全局的环境光设置。
              color: '#fff', // 环境光的颜色。[ default: #fff ]
              intensity: 0.5 // 环境光的强度。[ default: 0.2 ]
            }
          },
        },{
          zlevel: 20,
          map: 'wuxi',
          type: "map3D",
          regionHeight: 2,
          itemStyle: {
            color: 'transparent'
          },
          emphasis: {
            itemStyle: {
              color: 'transparent'
            }
          },
          data: this.labelData.map(v => {
            v.label = this.label;
            v.emphasis = {
              label: this.label
            }
            return v
          })
        }]
      }
    },

    labelData () {
      let a = this.assets()
      const [houses,lands] = a
      let temp = Array.from(this.areas,(item,index) => ({
        tag: item[0],
        name: item[1],
        value: 0,
        originalData: []
      }))
      houses.forEach(item => {
        let find = temp.find(v => v.tag === item.area)
        if (find) {
          find.value++;
          find.originalData.push(item)
        }
      })
      lands.forEach(item => {
        let find = temp.find(v => v.tag === item.area)
        if (find) {
          find.value++;
          find.originalData.push(item)
        }
      })

      return temp.filter(v => v.value > 0);
    }
  },
  watch: {
    labelData () {
      this.setOption()
    }
  },
  mounted() {
    this.initMap();
    this.setTooltip();
  }
}
</script>

<style scoped lang="scss">
#map {
  width: 100%;
  height: 100%;
  padding: 20px;
}
</style>
