<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 });
});

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].province?.endsWith('省') || data[i].name?.endsWith('市')
          ? data[i].province.slice(0, -1)
          : data[i].province
      ];
    if (geoCoord) {
      res.push({
        name: data[i].province,
        value: geoCoord.concat(data[i].sopSum),
      });
    }
  }
  return res;
};
// const pinFormatterStr = (name, data) => {
//   let item = data.find((item) => item.province === name);
//   return '/' + item.sopNum;
// };
const dataHandle = (data) => {
  if (!data) {
    return [];
  } else {
    return [
      {
        type: 'map',
        mapType: 'china',
        geoIndex: 0,
        aspectScale: 0.75, //长宽比
        showLegendSymbol: false, // 存在legend时显示
        label: {
          normal: {
            show: true,
          },
          emphasis: {
            show: true,
            textStyle: {
              color: '#fff',
            },
          },
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#031525',
            borderColor: '#3B5077',
          },
          emphasis: {
            areaColor: '#2B91B7',
          },
        },
        animation: false,
        data: data.map((item) => {
          return {
            name: item.province,
            value: item,
          };
        }),
      },
    ];
  }
};
const options = computed(() => {
  return {
    backgroundColor: 'transparent',
    // backgroundColor: '#fff',
    tooltip: {
      trigger: 'item',
      formatter: function (obj) {
        let data = obj.data;
        let value = data?.value || {};
        let str =
          '派单数：' +
          '<span style="color:#1677ff">' +
          (value.crmNum || 0) +
          '</span>' +
          '<br />' +
          'sop数：' +
          '<span style="color:#1677ff">' +
          (value.sopNum || 0) +
          '</span>' +
          '<br />' +
          '准备阶段sop数：' +
          '<span style="color:#1677ff">' +
          (value.prepareSopNum || 0) +
          '</span>' +
          '<br />' +
          '扫描阶段sop数：' +
          '<span style="color:#1677ff">' +
          (value.scanSopNum || 0) +
          '</span>' +
          '<br />' +
          '评卷阶段sop数：' +
          '<span style="color:#1677ff">' +
          (value.markSopNum || 0) +
          '</span>' +
          '<br />' +
          '收尾阶段sop数：' +
          '<span style="color:#1677ff">' +
          (value.finalSopNum || 0) +
          '</span>' +
          '<br />' +
          '已完成sop数：' +
          '<span style="color:#1677ff">' +
          (value.finishSopNum || 0) +
          '</span>' +
          '<br />';
        return str;

        // 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;
      },
    },
    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: '12',
          formatter: (p) => {
            console.log('ppp', p);
            let target = props.data.find((item) => item.province === p.name);
            let str =
              '\n' + (target?.sopSum || 0) + '/' + (target?.sopNum || 0);
            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 + str;
          },
        },
        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>
