<template>
  <my-chart :options="options"></my-chart>
</template>
<script setup name="ChinaPointChart">
import { computed, onMounted } from 'vue';
import chinaMap from '@/assets/json/china.json';
import * as echarts from 'echarts';
import MyChart from '../../global/chart';
import geoCoordMap from './geoCoordMap';
import { colorList } from '@/utils/chart';
import { useAppStore } from '@/store';
const appStore = useAppStore();
onMounted(() => {
  echarts.registerMap('china', { geoJSON: chinaMap });
});
// let data2 = [
//   { name: '哈尔滨', value: 131426 },
//   { name: '沈阳', value: 30716 },
//   { name: '西安', value: 25380 },
//   { name: '太原', value: 25152 },
//   { name: '呼和浩特', value: 19896 },
//   { name: '天津', value: 14843 },
//   { name: '石家庄', value: 13697 },
//   { name: '郑州', value: 8494 },
//   { name: '贵阳', value: 8442 },
// ];
// let data1 = [
//   { name: '银川', value: 8398 },
//   { name: '西宁', value: 8390 },
//   { name: '济南', value: 67715 },
//   { name: '长春', value: 7100 },
//   { name: '北京', value: 36506 },
//   { name: '重庆', value: 4672 },
//   { name: '兰州', value: 4302 },
//   { name: '乌鲁木齐', value: 4294 },
//   { name: '上海', value: 3091 },
//   { name: '昆明', value: 2428 },
//   { name: '武汉', value: 71800 },
// ];
const opacityColorList = ['rgba(22, 93, 255, 0.30)', 'rgba(0, 180, 42, 0.50)'];
const props = defineProps({ data: Object });
const handleVal = (val) => {
  if (val < 10) {
    return val * 2;
  } else {
    return 20 + Math.ceil(val / 10);
  }
};
const convertData = (data) => {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord =
      geoCoordMap[
        data[i].name?.endsWith('省') || data[i].name?.endsWith('市')
          ? data[i].name.slice(0, -1)
          : data[i].name
      ];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value),
      });
    }
  }
  return res;
};
const dataHandle = (data) => {
  if (!data) {
    return [];
  } else {
    let arr = [];
    for (let i = 0; i < data.length; i++) {
      let item = data[i];
      arr.push(
        {
          name: item.name,
          type: 'scatter',
          coordinateSystem: 'geo',
          data: convertData(item.data),
          symbolSize: function (val) {
            return 5 + handleVal(val[2]);
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true,
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: colorList[i],
              borderColor: opacityColorList[i] || colorList[i],
              borderWidth: 2,
            },
          },
        }
        // {
        //   name: item.name,
        //   type: 'effectScatter',
        //   coordinateSystem: 'geo',
        //   data: convertData(
        //     item.data.sort(function (a, b) {
        //       return b.value - a.value;
        //     })
        //   ),
        //   symbolSize: function (val) {
        //     return val[2] * 10;
        //   },
        //   showEffectOn: 'render',
        //   rippleEffect: {
        //     brushType: 'stroke',
        //   },
        //   hoverAnimation: true,
        //   label: {
        //     normal: {
        //       formatter: '{b}',
        //       position: 'right',
        //       fontSize: 12,
        //       show: true,
        //     },
        //   },
        //   itemStyle: {
        //     normal: {
        //       color: colorList[i],
        //       shadowBlur: 10,
        //       shadowColor: '#333',
        //     },
        //   },
        //   zlevel: 1,
        // }
      );
    }
    return arr;
  }
};
const options = computed(() => {
  return {
    // backgroundColor: 'rgba(0,0,0,.05)',
    backgroundColor: '#fff',
    tooltip: {
      trigger: 'item',
      formatter: function (obj) {
        let str = obj.seriesName + '<br />';
        str =
          str +
          '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
          obj.color +
          ';"></span>' +
          obj.name +
          ' : ' +
          obj.value[2];
        return str;
      },
    },
    legend: {
      orient: 'horizontal',
      y: 'bottom',
      x: 'left',
      data: ['教务处', '研究生'],
      textStyle: {
        color: appStore.isFullscreen ? '#e5e5e5' : '#333',
      },
    },
    geo: {
      map: 'china',
      zoom: 1.7,
      label: {
        emphasis: {
          show: false,
        },
      },
      top: '28%',

      roam: true,
      label: {
        normal: {
          show: true,
          // color: 'rgb(249, 249, 249)', //省份标签字体颜色
          color: '#999', //省份标签字体颜色
          fontSize: '7',
          formatter: (p) => {
            switch (p.name) {
              case '内蒙古自治区':
                p.name = '内蒙古';
                break;
              case '西藏自治区':
                p.name = '西藏';
                break;
              case '新疆维吾尔自治区':
                p.name = '新疆';
                break;
              case '宁夏回族自治区':
                p.name = '宁夏';
                break;
              case '广西壮族自治区':
                p.name = '广西';
                break;
              case '香港特别行政区':
                p.name = '香港';
                break;
              case '澳门特别行政区':
                p.name = '澳门';
                break;
            }
            return p.name;
          },
        },
        emphasis: {
          show: true,
          color: '#f75a00',
        },
      },
      itemStyle: {
        normal: {
          // areaColor: '#24CFF4',
          areaColor: '#fff',
          // borderColor: '#53D9FF',
          borderColor: '#cfcfcf',
          borderWidth: 1.3,
          shadowBlur: 0,
          // shadowBlur: 15,
          // shadowColor: 'rgb(58,115,192)',
          shadowColor: 'transparent',
          shadowOffsetX: 7,
          shadowOffsetY: 6,
        },
        emphasis: {
          //悬浮上去后的背景色
          // areaColor: '#8dd7fc',
          areaColor: '#eee',
          // borderWidth: 1.6,
          // shadowBlur: 25,
        },
      },
    },
    series: dataHandle(props.data),
  };
});
</script>
<style lang="less" scoped></style>
