<template>
  <!-- 中国地图 -->
  <div class="map-ball"></div>
  <div id="mapChart" class="echarts">
    <ECharts :option="option" ref="EChartsRef" :resize="false" />
  </div>
</template>

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

echarts.registerMap("china", mapJson);
getMapByTenant().then(res => {
    mapData.value = []
    if (res.result) {
        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,
                    tenants: [{tenantName: element.tenantName, 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));
                item.tenants.push({tenantName: element.tenantName, borrowNum: element.borrowNum, commissionAmount: element.commissionAmount, caseNum: element.caseNum})
            }
        });
    }
    console.log('mapData.value', mapData.value)
    EChartsRef.value.draw()
}).catch(() => {
    mapData.value = []
})
// var geoCoordMap = {
//     台湾: [121.5135, 25.0308],
//     哈尔滨: [127.9688, 45.368],
//     内蒙古: [110.3467, 41.4899],
//     吉林: [125.8154, 44.2584],
//     北京市: [116.4551, 40.2539],
//     沈阳: [123.1238, 42.1216],
//     石家庄: [114.4995, 38.1006],
//     天津: [117.4219, 39.4189],
//     山西: [112.3352, 37.9413],
//     西安: [109.1162, 34.2004],
//     甘肃: [103.5901, 36.3043],
//     宁夏: [106.3586, 38.1775],
//     青海: [101.4038, 36.8207],
//     新疆: [87.9236, 43.5883],
//     西藏: [91.11, 29.97],
//     成都: [103.9526, 30.7617],
//     重庆: [108.384366, 30.439702],
//     青岛: [117.1582, 36.8701],
//     河南: [113.4668, 34.6234],
//     江苏: [118.8062, 31.9208],
//     安徽: [117.29, 32.0581],
//     武汉: [114.3896, 30.6628],
//     浙江: [119.5313, 29.8773],
//     福州: [119.4543, 25.9222],
//     江西: [116.0046, 28.6633],
//     湖南: [113.0823, 28.2568],
//     贵州: [106.6992, 26.7682],
//     云南: [102.9199, 25.4663],
//     广州: [113.12244, 23.009505],
//     广西: [108.479, 23.1152],
//     海南: [110.3893, 19.8516],
//     上海: [121.4648, 31.2891],
//   };

//   var convertData = function(data) {
//     var res = [];
//     for (var i = 0; i < data.length; i++) {
//         var geoCoord = geoCoordMap[data[i].name];
//         if (geoCoord) {
//             res.push({
//                 name: data[i].name,
//                 value: geoCoord.concat(data[i].value),
//             });
//         }
//     }
//     return res;
// };

const option = computed(() => {
  return {
    tooltip: {
            show: true,
            formatter: function(params) {
                console.log('params', 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,
            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,
        roam: false,
        label: {
            emphasis: {
                show: false
            },
            normal: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                show: false
            }
        }
    },
    series: [
    {
            name: "确诊病例",
            type: "map",
            map: 'china',
            aspectScale: 0.75,
            selectedMode: false,
            top: 145,
            zoom:1.53,
            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: {
                    areaColor: 'rgba(255,255,255,0.1)',
                    borderWidth: 2,
                    //shadowColor: 'rgba(0, 0, 0, 0.2)',
                    borderColor: "rgba(255,255,255,0.3)"
                },
                emphasis: {
                    areaColor: "#0196fa",
                    // shadowOffsetX: 0,
                    // shadowOffsetY: 0,
                    // borderWidth: 0
                }
            },
            data: mapData.value
        }
    ]
  }
})
</script>

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