<template>
  <Button @click="back" type="primary" :loading="loading">返回上一級</Button>
  <Spin :spinning="loading">
    <div class="container" ref="echartsRef"></div>
  </Spin>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
import { Button, Spin } from 'ant-design-vue';

// 最頂層地圖的代號
const ROOR_MAP_CODE = '100000_full';
const echartsRef = ref<HTMLDivElement | null>(null);
const echartInstance = ref<echarts.ECharts | null>(null);
const loading = ref(false);

// 請求地圖數據
const fetchMapJson = async (mapCode: string) => {
  const response = await fetch(`https://geo.datav.aliyun.com/areas_v3/bound/${mapCode}.json`);
  const result = await response.json();
  return result;
};

// 記錄點擊鏈路
const mapCodes: string[] = [];
// 初始化 Echarts 實例
const initInstance = () => {
  if (!echartsRef.value) return;
  echartInstance.value = echarts.init(echartsRef.value);
  echartInstance.value.on('click', params => {
    if (params.seriesType === 'map') {
      const { adcode, level } = params.data;
      const mapCode = level === 'district' ? adcode : adcode + '_full';
      // 防止重復點擊最后一層
      if (mapCodes[mapCodes.length - 1] === mapCode) return;
      mapCodes.push(mapCode);
      updateOptions(mapCode);
    }
  });
};

// 返回上一級
const back = () => {
  //   無法再往上了
  if (!mapCodes.length) return;

  mapCodes.pop();
  if (mapCodes.length) {
    // 取最后一個去渲染數據
    updateOptions(mapCodes[mapCodes.length - 1]);
  } else {
    // 沒了說明需要渲染最頂層了
    updateOptions(ROOR_MAP_CODE);
  }
};

// 生成 Echarts 配置
const generateOptions = (mapCode: string, mapData: any): echarts.EChartsCoreOption => {
  return {
    tooltip: {
      show: true,
      //   格式化 tooltip 信息
      formatter: function (params: any) {
        if (params && params.data) {
          const { name } = params.data;
          return name;
        }
      },
    },
    geo: {
      // 傳進來 code，echarts 會去讀取已注冊的地圖數據
      map: mapCode,
      label: {
        show: true,
      },
    },
    series: [
      // 傳進來 code，echarts 會去讀取已注冊的地圖數據
      {
        type: 'map',
        map: mapCode,
        roam: true,
        geoIndex: 0,
        select: false,
        data: mapData,
      },
    ],
  };
};

// 更新地圖 Echarts 配置
const updateOptions = async (mapCode: string) => {
  if (!echartInstance.value) return;
  loading.value = true;
  const mapResult = await fetchMapJson(mapCode);
  echarts.registerMap(mapCode, mapResult);
  const mapdata = mapResult.features.map((item: any) => {
    const { name, adcode, level } = item.properties;
    return {
      name, // 地名
      adcode, // 區域編碼
      level, // 層級
    };
  });
  const options = generateOptions(mapCode, mapdata);
  //   配置 Echarts
  echartInstance.value.setOption(options);
  loading.value = false;
};

onMounted(() => {
  // 初始化
  initInstance();
  updateOptions(ROOR_MAP_CODE);
});
</script>

<style scoped lang="less">
.container {
  width: 800px;
  height: 800px;
}
</style>