<template>
  <div class="relative">
    <div
      v-if="isBack"
      @click="onBack"
      class="absolute left-25px top-25px z-999 text-white border rounded-2px px-30px py-6px text-12px cursor-pointer"
      >返回</div
    >
    <div ref="chartRef" :style="{ height, width }"> </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, PropType, ref, Ref, onMounted } from 'vue'

  import { useECharts } from '/@/hooks/web/useECharts'
  import { registerMap } from 'echarts'
  import { deepMerge } from '/@/utils'
  // import icon from '/@/assets/images/data-address.png'

  const domImg = document.createElement('img')
  domImg.style.height = '8px'
  domImg.src =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE4MTE0OTgyQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE4MTE0OTgzQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTgxMTQ5ODBBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTgxMTQ5ODFBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4v4trwAAAAVklEQVR42mL0D225cu0hAzWAjpY8C9CsL19/wIV4uDnI5gKNYmKgKhjcxrFAggBZiBIuyDhqRQWQOxoVo1ExGhWjUTEaFYMiKoB1LVq1TXZUAI0CCDAAcAlaxCt7dtQAAAAASUVORK5CYII='

  const domImgHover = document.createElement('img')
  domImgHover.style.height = '8px'
  domImgHover.src =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFDQ0Q2RjYyQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFDQ0Q2RjYzQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUNDRDZGNjBBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUNDRDZGNjFBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6FboimAAAASklEQVR42mIUnL9XtHsDAzXA69IARjWtXJYX7+FCfyQEKeEyMVAVDG7jWCB+RhaihAsybjQqRqNiNCpGo2I0KoZZVDBSt9oGCDAAhYNrvRu3DWEAAAAASUVORK5CYII='
  const img2 = 'image://https://www.makeapie.cn/asset/get/s/data-1619318279159-o6ZbTGoO0.png'
  export default defineComponent({
    props: {
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: 'calc(100vh - 0px)',
      },
    },
    setup() {
      const chartRef = ref<HTMLDivElement | null>(null)
      const isBack = ref<boolean>(false)
      const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
      const mapJSON = ref()
      const tempMapJSON = ref()
      const mapData = [
        {
          name: '古湖街道',
          value: [105.243227, 29.340601],
          datas: 768,
          img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
        },
      ]

      function onBack() {
        isBack.value = false
        tempMapJSON.value = deepMerge(mapJSON.value)
        mapInit()
      }

      function mapInit() {
        registerMap('lcxz', tempMapJSON.value)
        setOptions({
          backgroundColor: '#012248',
          stateAnimation: {
            duration: 100,
          },
          geo: {
            map: 'lcxz',
            roam: false,
            silent: false,
            label: {
              color: '#fff',
              show: true,
            },
            itemStyle: {
              borderColor: '#53D9FF',
              borderWidth: 1.3,
              shadowBlur: 15,
              shadowColor: 'rgb(58,115,192)',
              shadowOffsetX: 7,
              shadowOffsetY: 6,
              areaColor: {
                image: domImg,
              },
            },
            emphasis: {
              itemStyle: {
                areaColor: '#8dd7fc',
                color: '#fff',
              },
              label: {
                color: '#012248',
              },
            },
          },
          series: [
            {
              type: 'map',
              roam: false,
              map: 'lcxz',
              select: {
                disabled: true,
              },
              label: {
                // show: false,
                color: '#fff',
              },
              itemStyle: {
                borderColor: '#2ab8ff',
                areaColor: {
                  image: domImg,
                },
                borderWidth: 1,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 1,
              },
              emphasis: {
                label: {
                  color: '#fff',
                },
                itemStyle: {
                  areaColor: {
                    image: domImgHover,
                    repeat: 'repeat',
                  },
                  borderColor: '#2ab8ff',
                  borderWidth: 1,
                  shadowColor: 'rgba(0, 255, 255, 0.7)',
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowOffsetY: 1,
                },
              },
            },
            {
              tooltip: {
                show: false,
              },
              type: 'effectScatter',
              coordinateSystem: 'geo',
              rippleEffect: {
                scale: 10,
                brushType: 'stroke',
              },
              showEffectOn: 'render',
              symbol: 'circle',
              zlevel: 1,
              symbolSize: [10, 5],
              itemStyle: {
                color: (params): any => {
                  var colorList = [
                    {
                      type: 'linear',
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#64fbc5',
                        },
                        {
                          offset: 1,
                          color: '#018ace',
                        },
                      ],
                      global: false,
                    },
                    {
                      type: 'linear',
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#61c0f1 ',
                        },
                        {
                          offset: 1,
                          color: '#6f2eb6',
                        },
                      ],
                      global: false,
                    },
                  ]
                  return colorList[params.dataIndex % colorList.length]
                },
              },
              data: mapData,
            },
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              tooltip: {
                show: false,
              },
              symbol: (_, params) => {
                return mapData[params.dataIndex].img
              },
              symbolSize: [32, 41],
              symbolOffset: [0, -20],
              z: 9999,
              data: mapData,
            },
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              stateAnimation: {
                duration: 300,
                easing: 'bounceOut',
              },
              label: {
                show: true,
                align: 'center',
                formatter: function (params) {
                  var name = params.name
                  var value = mapData[params.dataIndex].datas
                  var text = `{fline|${value}}\n{tline|${name}}`
                  return text
                },
                color: '#fff',
                rich: {
                  fline: {
                    padding: [0, 25],
                    color: '#fff',
                    textShadowColor: '#030615',
                    textShadowOffsetX: 1,
                    textShadowOffsetY: 1,
                    fontSize: 14,
                    fontWeight: 400,
                  },
                  tline: {
                    padding: [0, 27],
                    color: '#ABF8FF',
                    fontSize: 12,
                  },
                },
              },
              itemStyle: {
                color: '#00FFF6',
              },
              symbol: img2,
              symbolSize: [100, 50],
              symbolOffset: [0, -60],
              z: 999,
              data: mapData,
            },
          ],
        })
      }

      onMounted(async () => {
        mapJSON.value = (await (await import('./lcxz.json')).default) as any
        tempMapJSON.value = deepMerge(mapJSON.value)
        mapInit()
        getInstance()?.on('click', (e) => {
          if (e.seriesType == 'map') {
            const temp = mapJSON.value.features.filter((obj) => obj.properties.name == e.name)
            if (temp) {
              isBack.value = true
              tempMapJSON.value = deepMerge({
                type: 'FeatureCollection',
                features: temp,
              })
              mapInit()
            }
          }
        })
      })

      return { chartRef, isBack, onBack }
    },
  })
</script>
