<!-- 地图 -->
<template>
  <div class="mapBox">
    <div class="chartsdom" id="3DMap"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: null,
      information: {},
    }
  },
  props: {
    getJson: {
      type: Object,
    },
  },
  async mounted() {
    this.getEchart()
  },
  methods: {
    getEchart() {
      let that = this
      let myChart = echarts.init(document.getElementById(`3DMap`))
      let img2 = `image://data:image/png;base64,[encoded data, 5204 characters]`
      let uploadedDataURL = this.getJson
      let geoCoordMap = {
        印江土家族苗族自治县: [108.405517, 27.997976],
        石阡县: [108.229854, 27.519386],
        江口县: [108.848427, 27.691904],
        玉屏侗族自治县: [108.917882, 27.238024],
        思南县: [108.255827, 27.941331],
        德江县: [108.117317, 28.26094],
        沿河土家族自治县: [108.495746, 28.560487],
        松桃苗族自治县: [109.202627, 28.165419],
        碧江区: [109.192117, 27.718745],
        万山区: [109.21199, 27.51903],
      }
      let customerBatteryCityData = [
        {
          name: `印江土家族苗族自治县`,
          value: 0.5,
          adcode: `520625`,
        },
        { name: `石阡县`, value: 0, adcode: `520623` },
        { name: `江口县`, value: 0.5, adcode: `520621` },
        { name: `玉屏侗族自治县`, value: 0.5, adcode: `520622` },
        { name: `思南县`, value: 0.5, adcode: ` 520624` },
        { name: `德江县`, value: 0.5, adcode: `520626` },
        { name: `沿河土家族自治县`, value: 0.5, adcode: `520627` },
        { name: `松桃苗族自治县`, value: 0.5, adcode: `520628` },
        { name: `碧江区`, value: 0.5, adcode: `520602` },
        { name: `万山区`, value: 0.5, adcode: `520603` },
      ]
      echarts.registerMap(`guangdong`, uploadedDataURL, {})
      this.option = {
        tooltip: {
          trigger: `item`,
          triggerOn: `click`,
          showDelay: 0, // 浮层显示的延迟
          transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
          enterable: true,
          formatter: function (item) {
            if (item.componentSubType == `map`) {
              // 详情
              return
            }
          },
          // position: [10, 10],
          backgroundColor: `#fff`,
        },
        geo: [
          {
            map: `guangdong`,
            aspectScale: 1.2,
            roam: false, // 是否允许缩放
            zoom: 1, // 默认显示级别
            layoutSize: `95%`,
            layoutCenter: [`55%`, `50%`],
            itemStyle: {
              normal: {
                areaColor: {
                  type: `linear-gradient`,
                  x: 0,
                  y: 400,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: `rgba(37,108,190,0.3)`, // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: `rgba(15,169,195,0.3)`, // 50% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
                borderColor: `#4ecee6`,
                borderWidth: 1,
              },
              emphasis: {
                areaColor: {
                  type: `linear-gradient`,
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: `rgba(37,108,190,1)`, // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: `rgba(15,169,195,1)`, // 50% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            emphasis: {
              itemStyle: {
                areaColor: `#0160AD`,
              },
              label: {
                show: 0,
                color: `transparent`,
              },
            },
            zlevel: 3,
          },
          {
            map: `guangdong`,
            aspectScale: 1.2,
            roam: false, // 是否允许缩放
            zoom: 1, // 默认显示级别
            layoutSize: `95%`,
            layoutCenter: [`55%`, `50%`],
            itemStyle: {
              normal: {
                borderColor: `rgba(192,245,249,.6)`,
                borderWidth: 2,
                shadowColor: `#2C99F6`,
                shadowOffsetY: 0,
                shadowBlur: 120,
                areaColor: `rgba(29,85,139,.2)`,
              },
            },
            zlevel: 2,
            silent: true,
          },
          {
            map: `guangdong`,
            aspectScale: 1.2,
            roam: false, // 是否允许缩放
            zoom: 1, // 默认显示级别
            layoutSize: `95%`,
            layoutCenter: [`55%`, `51.5%`],
            itemStyle: {
              areaColor: `rgba(0,27,95,0.4)`,
              borderColor: `#004db5`,
              borderWidth: 1,
            },
            zlevel: 1,
            silent: true,
          },
        ],
        series: [
          // map
          {
            geoIndex: 0,
            showLegendSymbol: true,
            type: `map`,
            roam: true,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: `#fff`,
                },
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: `#fff`,
                },
              },
            },

            itemStyle: {
              normal: {
                borderColor: `#2ab8ff`,
                borderWidth: 1.5,
                areaColor: `#12235c`,
              },
              emphasis: {
                areaColor: `#2AB8FF`,
                borderWidth: 0,
                color: `red`,
              },
            },
            map: `guangdong`, // 使用
            data: customerBatteryCityData,
            // data: this.difficultData //热力图数据   不同区域 不同的底色
          },
          // 柱状体的主干
          {
            type: `lines`,
            zlevel: 5,
            effect: {
              show: false,
              symbolSize: 5, // 图标大小
            },
            lineStyle: {
              width: 2, // 尾迹线条宽度
              color: `rgb(22,255,255, .6)`,
              opacity: 1, // 尾迹线条透明度
              curveness: 0, // 尾迹线条曲直度
            },
            label: {
              show: 0,
              position: `end`,
              formatter: `245`,
            },
            silent: true,
            data: lineData(),
          },
          // 柱状体的顶部
          {
            type: `scatter`,
            coordinateSystem: `geo`,
            geoIndex: 0,
            zlevel: 5,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  let name = params.data[2].name
                  let value = params.data[2].fdl
                  let text = `{fline|${name.slice(0, 2)}}`
                  return text
                },
                color: `#fff`,
                rich: {
                  fline: {
                    // padding: [0, 25],
                    color: `#fff`,
                    fontSize: 14,
                    fontWeight: 400,
                  },
                  tline: {
                    // padding: [0, 27],
                    color: `#ABF8FF`,
                    fontSize: 12,
                  },
                },
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              color: `#000FFF`,
              opacity: 1,
            },
            symbol: img2,
            symbolSize: [100, 50],
            symbolOffset: [0, -20],
            z: 999,
            data: scatterData(),
          },
          // 柱状体的底部
          {
            geoIndex: 0,
            zlevel: 4,
            type: `effectScatter`,
            coordinateSystem: `geo`,
            rippleEffect: {
              scale: 10,
              brushType: `stroke`,
            },
            showEffectOn: `render`,
            label: {
              normal: {
                formatter: `{b}`,
                position: `bottom`,
                color: `#fff`,
                fontSize: 12,
                distance: 10,
                show: true,
              },
            },
            symbol: `circle`,
            symbolSize: [10, 5],
            itemStyle: {
              // color: '#F7AF21',
              color: `rgb(22,255,255, 1)`,
              opacity: 1,
            },
            data: scatterData2(),
          },
          // 底部外框
          {
            type: `scatter`,
            coordinateSystem: `geo`,
            geoIndex: 0,
            zlevel: 4,
            label: {
              show: false,
            },
            symbol: `circle`,
            symbolSize: [1, 1],
            itemStyle: {
              color: {
                type: `radial`,
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: `rgb(22,255,255, 0)`, // 0% 处的颜色
                  },
                  {
                    offset: 0.75,
                    color: `rgb(22,255,255, 0)`, // 100% 处的颜色
                  },
                  {
                    offset: 0.751,
                    color: `rgb(22,255,255, 1)`, // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: `rgb(22,255,255, 1)`, // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              opacity: 1,
            },
            silent: true,
            data: scatterData2(),
          },
        ],
      }

      // 动态计算柱形图的高度（定一个max）
      function lineMaxHeight() {
        const maxValue = Math.max(
          ...customerBatteryCityData.map((item) => item.value)
        )
        return 0.3
      }
      // 柱状体的主干
      function lineData() {
        return customerBatteryCityData.map((item) => {
          return {
            coords: [
              geoCoordMap[item.name],
              [
                geoCoordMap[item.name][0],
                geoCoordMap[item.name][1] + item.value * lineMaxHeight(),
              ],
            ],
          }
        })
      }
      // 柱状体的顶部
      function scatterData() {
        return customerBatteryCityData.map((item) => {
          return [
            geoCoordMap[item.name][0],
            geoCoordMap[item.name][1] + item.value * lineMaxHeight(),
            item,
          ]
        })
      }
      // 柱状体的底部
      function scatterData2() {
        return customerBatteryCityData.map((item) => {
          return {
            // name: item.name,
            value: geoCoordMap[item.name],
          }
        })
      }
      myChart.setOption(this.option)
      myChart.on(`click`, function (params) {
        const idx = params.dataIndex
        console.log(that)
        that.$emit(`toView`, params.data.adcode)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.chartsdom {
  width: 980px;
  height: 760px;
  .chartsdom {
    width: 100%;
    height: 100%;
  }
}
</style>
