<template>
  <el-row class="flex-auto">
    <el-col :sm="14" :xs="24">
      <v-chart
        ref="userMapChartRef"
        :option="userCountMapOption"
        style="height: 468px"
      />
    </el-col>
    <el-col :sm="10" :xs="24">
      <rankList />
    </el-col>
  </el-row>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { use, registerMap } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { MapChart } from 'echarts/charts';
  import {
    VisualMapComponent,
    GeoComponent,
    TooltipComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';
  import { useEcharts } from '@/utils/use-echarts';
  import rankList from './rank-list.vue'
  import axios from 'axios';

  use([
    CanvasRenderer,
    MapChart,
    VisualMapComponent,
    GeoComponent,
    TooltipComponent
  ]);

  const userMapChartRef = ref(null);

  useEcharts([userMapChartRef]);

  /** 用户分布前 10 名 */
  const userCountDataRank = ref([]);

  /** 用户分布地图配置 */
  const userCountMapOption = reactive({});

  /** 获取中国地图数据并注册地图 */
  const registerChinaMap = () => {
    axios.get('/json/china-provinces.geo.json').then((res) => {
      registerMap('china', res.data);
      getUserCountData();
    });
  };

  /** 获取用户分布数据 */
  const getUserCountData = () => {
    let data = [
      { name: '贵州', value: 570 },
      { name: '云南', value: 8890 },
      { name: '重庆', value: 10010 },
      { name: '吉林', value: 5056 },
      { name: '山西', value: 2123 },
      { name: '天津', value: 9130 },
      { name: '江西', value: 10170 },
      { name: '广西', value: 6172 },
      { name: '陕西', value: 9251 },
      { name: '黑龙江', value: 5125 },
      { name: '安徽', value: 9530 },
      { name: '北京', value: 51919 },
      { name: '福建', value: 3756 },
      { name: '上海', value: 59190 },
      { name: '湖北', value: 37109 },
      { name: '湖南', value: 8966 },
      { name: '四川', value: 31020 }
    ];

    const temp = data.sort((a, b) => b.value - a.value);
    const min = temp[temp.length - 1].value || 0;
    const max = temp[0].value || 1;
    //
    const list = temp.length > 10 ? temp.slice(0, 15) : temp;
    userCountDataRank.value = list.map((d) => {
      return {
        name: d.name,
        value: d.value,
        percent: (d.value / max) * 100
      };
    });
    //
    Object.assign(userCountMapOption, {
      tooltip: {
        trigger: 'item',
        borderWidth: 1
      },
      visualMap: {
        min: min,
        max: max,
        text: ['高', '低'],
        calculable: true,
        bottom: 10
      },
      series: [
        {
          name: '用户数',
          label: {
            show: true
          },
          type: 'map',
          map: 'china',
          data: data
        }
      ]
    });
  };

  registerChinaMap();
</script>

<style lang="scss" scoped>
  .user-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    .user-item-body {
      flex: 1;
      padding: 0 10px 0 12px;
    }

    :deep(.el-progress-bar__outer) {
      background-color: transparent;
    }
  }
</style>
