<template>
  <div class="h-full" ref="mapRef">12</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useECharts } from '@/components/echarts/useECharts.js'
import chinaMap from './xj.json'
import { registerMap } from 'echarts'
import http from '@/utils/request'

const mapRef = ref(null)
const { setOptions } = useECharts(mapRef)
const data = ref([])

registerMap('xj', { geoJSON: chinaMap })

onMounted(() => {
  getData()
})

const getData = async () => {
  const resData = await http.get(
    '/admin-api/api/cockpit/store-number-distribution'
  )
  data.value = resData
  chatInit()
}

const convertData = (data) => {
  var geoCoordMap = []
  chinaMap.features.forEach((item) => {
    geoCoordMap[item.properties.name] =
      item.properties.centroid ?? item.properties.center
    // if(item.properties.name=='河北省' ) console.log(item.properties.centroid)
  })
  var res = []
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name]
    if (geoCoord && data[i].stores_count > 0) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].stores_count),
      })
    }
  }
  return res
}

const chatInit = () => {
  var max = 480,
    min = 14 // todo
  var maxSize4Pin = 100,
    minSize4Pin = 30

  setOptions({
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (params.name == '南海诸岛') return ''

        if (typeof params.value[2] == 'undefined') {
          return params.name + ' : ' + params.value
        } else {
          return params.name + ' : ' + params.value[2]
        }
      },
    },
    geo: {
      map: 'xj',
      zoom: 1.2,
      roam: false,
      // left: '20%',
      // top: '23%',
      label: {
        show: true,
        color: 'rgb(249, 249, 249)', //省份标签字体颜色
      },
      itemStyle: {
        areaColor: '#24CFF4',
        borderColor: '#53D9FF',
        borderWidth: 1.3,
        shadowBlur: 15,
        shadowColor: 'rgb(58,115,192)',
        shadowOffsetX: 7,
        shadowOffsetY: 6,
      },
      emphasis: {
        itemStyle: {
          areaColor: '#8dd7fc',
          borderWidth: 1.6,
          shadowBlur: 25,
        },
        label: {
          show: true,
          color: '#f75a00',
        },
      },
    },
    series: [
      {
        type: 'map',
        map: 'china',
        geoIndex: 0,
        aspectScale: 0.75, //长宽比
        showLegendSymbol: false, // 存在legend时显示
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
            textStyle: {
              color: '#fff',
            },
          },
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#031525',
            borderColor: '#FFFFFF',
          },
          emphasis: {
            areaColor: '#2B91B7',
          },
        },
        animation: false,
        data: data.value.map((e) => {
          return {
            name: e.name,
            value: e.stores_count,
          }
        }),
      },
      {
        name: '点',
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin',
        symbolSize: function (val) {
          var a = (maxSize4Pin - minSize4Pin) / (max - min)
          var b = minSize4Pin - a * min
          b = maxSize4Pin - a * max
          return a * val[2] + b
        },
        label: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
          formatter(value) {
            if (typeof value.data.value[2] == 'undefined') {
              return 0
            }
            return value.data.value[2] ?? 0
          },
        },
        itemStyle: {
          color: '#F62157',
        },
        zlevel: 6,
        data: convertData(data.value),
      },
    ],
  })
}
</script>
