<template>
  <div class="map-center-warp">
    <div class="map-pos">
      <custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import * as echarts from 'echarts';
import geoJsonData from './china.json'; // 根据实际情况调整路径;
const route = useRoute();
const props = defineProps({
  dialogTitle: {
    type: String,
    default: '首页',
  },
});
const isShow = ref(false);
let geoData = geoJsonData;
let mapName = ref('china');

const chinaGeoCoordMap = ref({
  云南: [102.9199, 25.4663],
  广东: [113.12244, 23.009505],
  香港: [114.133834, 22.381374],
  四川: [104.063707, 30.658753],
  河北: [114.511072, 38.054693],
  北京: [116.46, 39.92],
  浙江: [120.19, 30.26],
  山东: [117, 36.65],
  福建: [119.3, 26.08],
  上海: [121.48, 31.22],
  重庆: [106.54, 29.59],
  江西: [115.89, 28.68],
  山西: [112.53, 37.87],
  黑龙江: [126.63, 45.75],
  陕西: [108.95, 34.27],
  辽宁: [123.38, 41.8],
  海南: [110.35, 20.02],
  湖南: [113, 28.21],
  宁夏: [106.27, 38.47],
  湖北: [114.31, 30.52],
  内蒙古: [111.65, 40.82],
  天津: [117.2, 39.13],
  贵州: [106.71, 26.57],
  甘肃: [103.73, 36.03],
  江苏: [118.78, 32.04],
  吉林: [125.35, 43.88],
  河南: [113.65, 34.76],
  青海: [101.74, 36.56],
  安徽: [117.27, 31.86],
  广西: [108.33, 22.84],
  西藏: [91.11, 29.97],
  新疆: [87.68, 43.77],
});
const chinaDatas = ref([
  [{ name: '云南', value: 382 }],
  [{ name: '广东', value: 62256 }],
  [{ name: '香港', value: 9256 }],
  [{ name: '四川', value: 1256 }],
  [{ name: '河北', value: 382 }],
  [{ name: '北京', value: 88 }],
  [{ name: '浙江', value: 87 }],
  [{ name: '山东', value: 87 }],
  [{ name: '福建', value: 87 }],
  [{ name: '上海', value: 87 }],
  [{ name: '重庆', value: 87 }],
  [{ name: '江西', value: 86 }],
  [{ name: '山西', value: 84 }],
  [{ name: '黑龙江', value: 83 }],
  [{ name: '陕西', value: 83 }],
  [{ name: '辽宁', value: 82 }],
  [{ name: '海南', value: 82 }],
  [{ name: '湖南', value: 82 }],
  [{ name: '宁夏', value: 82 }],
  [{ name: '湖北', value: 81 }],
  [{ name: '内蒙古', value: 81 }],
  [{ name: '天津', value: 80 }],
  [{ name: '贵州', value: 80 }],
  [{ name: '甘肃', value: 80 }],
  [{ name: '江苏', value: 80 }],
  [{ name: '吉林', value: 80 }],
  [{ name: '河南', value: 79 }],
  [{ name: '青海', value: 79 }],
  [{ name: '广西', value: 78 }],
  [{ name: '安徽', value: 77 }],
  [{ name: '新疆', value: 76 }],
  [{ name: '西藏', value: 76 }],
]);
// 设置扩散中心
const convertData = (data) => {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var dataItem = data[i];
    var fromCoord = [102.9199, 25.4663];
    var toCoord = chinaGeoCoordMap.value[dataItem[0].name];
    if (fromCoord && toCoord) {
      res.push([
        {
          coord: fromCoord,
          value: dataItem[0].value,
        },
        {
          coord: toCoord,
        },
      ]);
    }
  }
  return res;
};
const getSeries = () => {
  let list = [];
  [['云南', chinaDatas.value]].forEach(function (item, i) {
    list.push(
      {
        type: 'lines',
        zlevel: 1,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0.3, //尾迹线条曲直度
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#0096FF' },
              { offset: 1, color: '#00FF00' },
            ]),
          },
        },
        data: convertData(item[1]),
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4, //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {
              //圆环显示文字
              return params.data.name;
            },
            fontSize: 10,
          },
          emphasis: {
            show: true,
          },
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 3 + (val[2] / 2000) * 1; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: '#FFA54F',
          },
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap.value[dataItem[0].name].concat([dataItem[0].value]),
          };
        }),
      },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4,
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            //offset:[5, 0],
            color: '#0f0',
            formatter: '{b}',
            textStyle: {
              color: '#0f0',
            },
          },
          emphasis: {
            show: true,
            color: '#FFA54F',
          },
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [
          {
            name: item[0],
            value: chinaGeoCoordMap.value[item[0]].concat([]),
          },
        ],
      }
    );
  });
  return list;
};

const chartsData = reactive({
  option: {
    title: {
      text: '地图统计图表',
      subtext: '',
      x: 'center',
      y: 'top',
      textStyle: {
        color: '#2b7',
        fontSize: 20,
        fontWeight: 'bold',
      },
      subtextStyle: {
        color: '#C0C4CC',
        fontSize: '15',
        height: '40',
        lineHeight: '40',
      },
    },
    tooltip: {
      trigger: 'item',
      className: 'custom-tooltip-container', // 自定义父容器类名
      backgroundColor: 'rgba(0,0,0,0.5)',
      borderColor: '#35d0c0',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function (params, ticket, callback) {
        let val = 0;
        let str = `<div class="custom-echarts-tips"></div>`;
        if (typeof params.value == 'number') {
          val = params.value;
        } else {
          val = params.value[params.value.length - 1];
        }
        //根据业务自己拓展要显示的内容
        var res = '';
        var name = params.name;
        res = `<span style='color:#fff;'> ${name}<br/>数据：${val}</span>`;
        return res;
      },
    },
    backgroundColor: 'transparent',
    geo: {
      map: mapName.value,
      zoom: 1.2,
      top: 250,
      label: {
        emphasis: {
          show: false,
        },
      },
      roam: false, //是否允许缩放
      itemStyle: {
        normal: {
          color: 'rgba(75,255,180,0.5)', //地图背景色
          borderColor: '#4bffb4', //省市边界线00fcff 516a89
          borderWidth: 1,
          areaColor: {
            type: 'radial', // 径向渐变
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              { offset: 0, color: 'rgba(17,217,245,0.2)' },
              { offset: 1, color: 'rgba(10,209,231,0.6)' },
            ],
          },
          shadowColor: '#182f68',
          shadowOffsetY: 2,
        },
        emphasis: {
          color: 'rgba(10,209,231,0.6)', //悬浮背景
          borderWidth: 2,
        },
      },
    },
    series: getSeries(),
  },
});

let currentMap = reactive({});

const mapClick = (data) => {
  //   if (props.markerData.length && props.markerData.length > 0) {
  //     if (data.seriesType == 'effectScatter') {
  //       isShow.value = true;
  //       currentMap = data;
  //       emit('mapclick', currentMap);
  //     }
  //   } else {
  //     isShow.value = true;
  //     currentMap = data;
  //     emit('mapclick', currentMap);
  //   }
};
const handleClose = () => {
  isShow.value = false;
};

const emit = defineEmits(['mapclick']);
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
}

::v-deep() {
  .el-dialog {
    background: url(iconUrl) no-repeat left top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px !important;
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    background-size: 100% 100%;
    padding: 16px;
    margin-top: 15%;
  }
  .el-dialog__header {
    margin-top: 10px;
    text-align: left;
    padding-left: 48px;
    .el-dialog__title,
    i {
      color: #fff !important;
    }
    .el-dialog__headerbtn {
      top: 8px !important;
    }
  }
  .map-dialog-my-header {
    margin-top: 4px;
    display: inline-flex;
    justify-content: space-between;
    h4 {
      font-weight: normal !important;
    }
  }
}
.map-center-warp {
  width: 100%;
  text-align: center;
  position: relative;
  height: 90%;
  .map-img {
    width: 80%;
    height: 80%;
    position: absolute;
    bottom: 0;
    left: 50%;
    object-fit: contain;
    transform: translateX(-50%);
    max-width: 1000px;
    max-height: 1000px;
  }
  .map-pos {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
