<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 } 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 tooltip from './tooltip.vue'
import { reactive, ref } from 'vue';
const mapData = ref([]);
const EChartsRef = ref();
const load =ref(false);

const tenantPos = ref([]);
onMounted(() => {
    document.body.addEventListener('click', (e) => {
        tenantPos.value = []
    })
})
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,
                        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.tenants.push({tenantName: element.tenantName, tenantId: element.tenantId, borrowNum: element.borrowNum, commissionAmount: element.commissionAmount, caseNum: element.caseNum})
                }
            });
        }
        EChartsRef.value.draw()
    }).catch(() => {
        mapData.value = []
    })
}
query() 
setInterval(() => {
    if (!load.value) {
        query() 
    }
}, 3000)
// 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) {
                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%;
  position: relative;
}
.map-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  img {
    width: 500px;
    height: 500px;
  }
}
</style>
