<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view to-flex">
      <div ref="echartsMapRef" style="height: 100%;width: 80%;"></div>
      <!-- <div class="to-right">
        <h3>国内销售排名Top&nbsp;&nbsp;5</h3>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import {onMounted, reactive, ref} from "vue";
import router from "/@/router";

const params = reactive({
  code:'',
  city:''
})

// 定义变量内容
const echartsMapRef = ref<RefType>('')

const getJson = async (path) => {
  try {
    const module = await import(`./mockData/${path}.json`);
    // 注意：JSON 文件应导出为 default 属性
    return module.default
  } catch (error) {
    return null
  }
}


const initEchartsMap = async () => {
  const myChart = echarts.init(echartsMapRef.value)
  const myJson = await getJson(params.code)
  if(!myJson) return;
  echarts.registerMap('echartsMapList', myJson )
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: params.city+'销售数量',
      left: 'center',
      textStyle: {
        color: '#000'
      }
    },
    // layoutCenter: ['50%', '80%'],//位置
    // layoutSize:'130%',//大小
    tooltip: {
      trigger: 'item',
      formatter: (params) => params.name
    },
    visualMap: {
      min: 0,
      max: 50,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      inRange: {
        // color: ['lightskyblue', 'yellow', 'orangered']
        color: ['#aacff9','#75c7f6', '#33a9d6']
      }
    },
    series: [
      {
        name: params.city+'销售数量',
        type: 'map',
        map: 'echartsMapList',
        label: {
          show: true,
          fontSize: 12,
          formatter: (params) => {
            let cityName=params.name
            if(cityName.length>3){
              cityName = cityName.substring(0, 3) + '...'
            }
            if (params.value) {
              return cityName + ':' + params.value
            }
            return cityName + ':0'
          },
        },
        // top: '30%',
        roam: true,
        // zoom: 1.6,
        scaleLimit: {
          //滚轮缩放的极限控制
          min: 1, //缩放最小大小
        },
        data: [],
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

onMounted(() => {
  params.code = <string>router.currentRoute.value.params.code
  params.city =  <string>router.currentRoute.value.params.city
  initEchartsMap()
})

</script>

<style scoped lang="scss">
.to-flex {
  position: relative;
  //display: flex;
  //flex-direction: row;
  //z-index: 999;
  .to-right {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    bottom: 0;
    right: 0;
    width: 10%;
    max-width: 300px;
    height: 25%;
    background-color: rgba(0, 234, 255, 0.5);
    color: #000; /* 文本颜色为黑色 */
    h3 {
      text-align: center;
      font-size: 14px;
    }
    .item {
      text-align: center;
      font-size: 12px;
    }
  }
}
</style>
