<template>
  <!-- 中国地图 -->
  <div class="map-ball"></div>
  <div id="mapChart" class="echarts">
    <ECharts :option="option" ref="EChartsRef" :resize="false" :onClick="onClick" />
    <template v-if="tenantPos && tenantPos.length > 0">
      <tooltip
        v-for="(item, index) in tenantPos"
        :key="index"
        :style="{ left: item.left + 'px', top: item.top + 'px' }"
        :item="item"
      />
    </template>
  </div>
</template>

<script setup>
  import echarts from '@/components/ECharts/config';
  import { computed } from 'vue';
  import { onMounted, onBeforeUnmount } from 'vue';
  import Decimal from 'decimal.js';
  import ECharts from '@/components/ECharts/index.vue';
  import mapJson from '../assets/china.json';
  import { getMapByTenant } from '@/api/dataScreenMock';
  import tooltip from './tooltip.vue';
  import { reactive, ref } from 'vue';
  const mapData = ref([]);
  const EChartsRef = ref();
  const timer = ref();
  const load = ref(false);

  const tenantPos = ref([]);
  onMounted(() => {
    document.body.addEventListener('click', (e) => {
      tenantPos.value = [];
    });
  });
  onBeforeUnmount(() => {
    if (timer.value) {
      clearInterval(timer.value);
      timer.value = null;
    }
  });
  const onClick = (e) => {
    e.event.event.stopPropagation();
    tenantPos.value = [];
    if (e.data.tenants && e.data.tenants.length > 0) {
      let width = 200;
      let height = 100;
      e.data.tenants.forEach((ele, index) => {
        let offsetX = e.event.offsetX;
        let offsetY = e.event.offsetY;
        if (index === 0) {
          offsetX = offsetX;
          offsetY = offsetY - height;
        }
        if (index === 1) {
          offsetX = offsetX - width;
          offsetY = offsetY - height * 2;
        }
        if (index === 2) {
          offsetX = offsetX - width;
          offsetY = offsetY + height;
        }
        if (index === 3) {
          offsetX = offsetX;
          offsetY = offsetY - height * 2;
        }
        if (index === 4) {
          offsetX = offsetX - width;
          offsetY = offsetY;
        }
        if (index === 5) {
          offsetX = offsetX + width;
          offsetY = offsetY - height * 2;
        }
        if (index === 6) {
          offsetX = offsetX + width;
          offsetY = offsetY - height;
        }
        if (index === 7) {
          offsetX = offsetX + width;
          offsetY = offsetY + height;
        }
        if (index === 8) {
          offsetX = offsetX;
          offsetY = offsetY + height;
        }
        if (index === 9) {
          offsetX = offsetX + width;
          offsetY = offsetY;
        }
        if (index === 10) {
          offsetX = offsetX - width;
          offsetY = offsetY - height;
        }
        tenantPos.value.push({
          left: offsetX,
          top: offsetY,
          ...ele,
        });
      });
    }
  };
  echarts.registerMap('china', mapJson);
  const query = () => {
    load.value = true;
    getMapByTenant()
      .then((res) => {
        mapData.value = [];
        if (res.result) {
          load.value = false;
          res.result.forEach((element) => {
            const findindex = mapData.value.findIndex((item) => item.name === element.province);
            if (findindex === -1) {
              mapData.value.push({
                name: element.province,
                value: element.commissionAmount,
                caseNum: element.caseNum,
                tenants: [
                  {
                    tenantName: element.tenantName,
                    tenantId: element.tenantId,
                    borrowNum: element.borrowNum,
                    commissionAmount: element.commissionAmount,
                    caseNum: element.caseNum,
                  },
                ],
              });
            } else {
              const item = mapData.value[findindex];
              item.value = Decimal(item.value || 0)
                .add(Decimal(element.commissionAmount || 0))
                .toNumber();
              item.caseNum = Decimal(item.caseNum || 0)
                .add(Decimal(element.caseNum || 0))
                .toNumber();
              item.tenants.push({
                tenantName: element.tenantName,
                tenantId: element.tenantId,
                borrowNum: element.borrowNum,
                commissionAmount: element.commissionAmount,
                caseNum: element.caseNum,
              });
            }
          });
          mapData.value.sort((a, b) => b.value - a.value);
        }
        EChartsRef.value.draw();
      })
      .catch(() => {
        mapData.value = [];
      });
  };
  query();
  timer.value = setInterval(() => {
    if (!load.value) {
      query();
    }
  }, 6000);
  let legend = ['案件量', '案件总金额'];
  let textColor = '#fff';
  let lineColor = 'rgba(255,255,255,0.2)';
  let colors = [
    {
      borderColor: 'rgba(227,161,96,1)',
      start: 'rgba(227,161,96,0.8)',
      end: 'rgba(227,161,96,0.3)',
    },
    {
      borderColor: 'rgba(0,222,255,1)',
      start: 'rgba(0,222,255,0.3)',
      end: 'rgba(0,222,255,0.8)',
    },
  ];
  let scale = 2;

  const option = computed(() => {
    return {
      timeline: {
        show: false,
        top: 0,
        data: [1],
      },
      legend: {
        left: '75%',
        top: '1%',
        itemWidth: 20,
        itemHeight: 10,
        itemGap: 33,
        icon: 'horizontal',
        textStyle: {
          color: '#ffffff',
          fontSize: 14,
        },
        data: legend,
      },
      grid: [
        {
          show: false,
          left: '65%',
          top: '5%',
          bottom: '48%',
          containLabel: true,
          width: '10%',
        },
        {
          show: false,
          left: '80%',
          top: '5%',
          bottom: '48%',
          width: '0%',
        },
        {
          show: false,
          left: '83%',
          top: '5%',
          bottom: '48%',
          containLabel: true,
          width: '17%',
        },
      ],
      xAxis: [
        {
          type: 'value',
          inverse: true,
          interval: 1000,
          //min: 500,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          position: 'top',
          axisLabel: {
            show: false,
            color: textColor,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: lineColor,
            },
          },
        },
        {
          gridIndex: 1,
          show: false,
        },
        {
          gridIndex: 2,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          position: 'top',
          axisLabel: {
            show: false,
            color: textColor,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: lineColor,
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'category',
          inverse: true,
          position: 'center',
          interval: 1000,
          axisLine: {
            show: false,
            lineStyle: {
              color: lineColor,
            },
          },

          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: mapData.value.map((v) => v.name),
        },
        {
          gridIndex: 1,
          type: 'category',
          inverse: true,
          position: 'center',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            padding: [0, 0, 0, 0],
            textStyle: {
              color: '#ffffff',
              fontSize: 14,
            },
            align: 'center',
          },
          data: mapData.value
            .map((v) => v.name)
            .map(function (value) {
              return {
                value: value,
                textStyle: {
                  align: 'center',
                },
              };
            }),
        },
        {
          gridIndex: 2,
          type: 'category',
          inverse: true,
          position: 'center',
          axisLine: {
            show: false,
            lineStyle: {
              color: lineColor,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: mapData.value.map((v) => v.name),
        },
      ],
      tooltip: {
        show: true,
        // formatter: function(params) {
        //     let html = ''
        //     html = html + params.name + '<br />案件总金额：' + (isNaN(params.value) ? 0 : params.value) + '元'
        //     // if (params.data.tenants) {
        //     //     params.data.tenants.forEach(ele => {
        //     //         html = html + '<br /><br />' + ele.tenantName + '<br />案件金额：' +  ele.commissionAmount
        //     //         html = html + '<br />' + '案件数：' +  ele.caseNum
        //     //         html = html + '<br />' + '案件人数：' +  ele.borrowNum
        //     //     })
        //     // }
        //     return html
        // }
      },
      visualMap: {
        min: 0,
        left: 26,
        bottom: 40,
        seriesIndex: 0,
        showLabel: !0,
        text: ['高', '低'],
        textStyle: {
          color: '#fff',
        },
        pieces: [
          {
            gt: 5000,
            label: '5000以上',
            color: '#8616fe',
          },
          {
            gt: 0,
            lt: 5000,
            label: '0-5000',
            color: '#6b1dfd',
          },
          {
            value: 0,
            color: 'rbga(255, 255, 255, 0.5)',
          },
        ],
        show: !0,
      },
      geo: {
        map: 'china',
        // show: false,
        aspectScale: 0.75,
        label: {
          emphasis: {
            show: false,
          },
        },
        top: 98,
        zoom: 1.4,
        left: '10%',
        regions: [
          {
            name: '南海诸岛',
            value: 0,
            itemStyle: {
              normal: {
                opacity: 0,
                label: {
                  show: false,
                },
              },
            },
          },
        ],
        itemStyle: {
          normal: {
            borderColor: 'rgba(147, 235, 248, 0)',
            borderWidth: 0.5,
            areaColor: {
              x: 1000,
              y: 1000,
              x2: 1000,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#83b2f9', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#83b2f9', // 50% 处的颜色
                },
              ],
              global: true, // 缺省为 false
            },
            opacity: 1,
          },
          emphasis: {
            show: false,
            areaColor: '#83b2f9',
          },
        },
        z: 1,
      },
      series: [
        {
          name: '案件总金额',
          type: 'map',
          map: 'china',
          aspectScale: 0.75,
          selectedMode: false,
          top: 99,
          zoom: 1.4,
          left: '9%',
          label: {
            normal: {
              show: false,
              fontSize: '14',
              color: 'rgba(0,0,0,0.7)',
            },
            emphasis: {
              show: true,
              fontSize: '14',
              color: 'rgba(255,255,255,1)',
            },
          },
          itemStyle: {
            normal: {
              borderColor: '#2cb3dd',
              borderWidth: 0.8,
              areaColor: {
                type: 'linear-gradient',
                x: 1000,
                y: 600,
                x2: 1000,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#4145c8', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#131b43', // 50% 处的颜色
                  },
                ],
                global: true, // 缺省为 false
              },
            },
            emphasis: {
              show: false,
              areaColor: '#4145c8',
            },
          },
          data: mapData.value,
        },
        {
          name: '案件量',
          type: 'bar',
          barWidth: 15,
          stack: '1',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: colors[0].start,
                },
                {
                  offset: 1,
                  color: colors[0].end,
                },
              ]),
            },
          },
          label: {
            normal: {
              align: 'right',
              show: false,
              fontSize: 14,
              color: '#ffffff',
            },
          },
          data: mapData.value.map((v) => v.caseNum),
          animationEasing: 'elasticOut',
        },
        {
          name: '案件量',
          type: 'bar',
          barWidth: 15,
          stack: '1',
          itemStyle: {
            normal: {
              color: colors[0].borderColor,
            },
          },
          data: mapData.value.map((v) => scale),
        },
        {
          name: '案件总金额',
          type: 'bar',
          stack: '2',
          barWidth: 15,
          xAxisIndex: 2,
          yAxisIndex: 2,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: colors[1].start,
                },
                {
                  offset: 1,
                  color: colors[1].end,
                },
              ]),
            },
          },
          label: {
            normal: {
              position: ['0', 1],
              show: false,
              fontSize: 14,
              color: '#ffffff',
            },
          },
          data: mapData.value.map((v) => v.value),
          animationEasing: 'elasticOut',
        },
        {
          name: '案件总金额',
          type: 'bar',
          xAxisIndex: 2,
          yAxisIndex: 2,
          barWidth: 15,
          stack: '2',
          itemStyle: {
            normal: {
              color: colors[1].borderColor,
            },
          },
          data: mapData.value.map((v) => scale),
        },
      ],
    };
  });
</script>

<style lang="scss" scoped>
  .echarts {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .map-ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);
    img {
      width: 500px;
      height: 500px;
    }
  }
</style>
