<template>
  <div class="map-center-warp">
    <!-- <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" /> -->
    <div class="map-pos">
      <custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
    </div>

    <el-dialog
      v-model="isShow"
      :title="currentMap.name + dialogTitle"
      :width="dialogWidth"
      :style="{ 'background-image': 'url(' + getAssetsFile(bgImageVal) + ')' }"
      :show-close="false"
      :before-close="handleClose"
      custom-class="map-info-dialog"
    >
      <template #header="{ close, titleId, titleClass }">
        <slot name="header"></slot>
      </template>
      <slot name="dialogContent"></slot>
    </el-dialog>
  </div>
</template>
<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
const route = useRoute();
const props = defineProps({
  dialogTitle: {
    type: String,
    default: '首页',
  },
  markerData: {
    type: Array,
    default: () => {
      return [];
    },
  },
  bgImage: {
    type: String,
    default: 'images/vsualized/mapopup.png',
  },
  dialogWidth: {
    type: Number,
    default: 360,
  },
});
var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
let bgImageVal = computed(() => {
  return props.bgImage;
});
const isShow = ref(false);
let geoData = geoJsonData;
let mapName = ref('ZJ' + route.name);
let mapConfig = reactive({
  map: mapName.value,
  zoom: 1,
  viewControl: {
    distance: 115,
    alpha: 60,
    beta: 0,
    minBeta: -360,
    maxBeta: 720,
    // 限制视角，使不能旋转缩放平移
    // rotateSensitivity: 0,
    // zoomSensitivity: 0,
    // panSensitivity: 0,
  },
  // itemStyle: {
  //   // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
  //   color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
  //   opacity: 1, // 图形的不透明度 [ default: 1 ]
  //   borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
  //   borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
  // },
  itemStyle: {
    normal: {
      borderColor: '#4bffb4', // 设置镇边界的颜色
      borderWidth: 1, // 设置镇边界的宽度
      areaColor: 'rgba(75,255,180,0.2)', // 设置背景透明，只显示边界
    },
    emphasis: {
      borderColor: '#4bffb4',
      borderWidth: 2,
      areaColor: 'rgba(75,255,180,0.5)', // 设置背景透明，只显示边界
      label: {
        color: '#fff',
      },
    },
  },
  select: {
    // 选中样式:ml-citation{ref="2,7" data="citationList"}
    itemStyle: {
      areaColor: 'rgba(75,255,180,0.6)',
      borderColor: '#4bffb4',
      borderWidth: 2,
    },
    label: {
      color: '#fff',
    },
  },

  label: {
    show: true,
    distance: 0,
    color: '#fff',
    padding: [6, 4, 2, 4],
    borderRadius: 4,
    textStyle: {
      fontSize: 12,
      color: '#fff', // 地图初始化区域字体颜色
      borderWidth: 0,
      borderColor: '#000',
    },
  },
  // emphasis: {
  //   //高亮状态的效果
  //   label: {
  //     show: true,
  //     color: '#fff',
  //   },
  //   itemStyle: {
  //     color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
  //   },
  // },
});

const chartsData = reactive({
  option: {
    title: {
      text: '',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (params.seriesType === 'effectScatter') {
          return `${params.name}: (${params.value[0]}, ${params.value[1]})`;
        }
        return params.name;
      },
    },
    toolbox: {
      show: false,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        // dataView: { readOnly: false },
        // restore: {},
        // saveAsImage: {},
      },
    },
    geo: {
      roam: true,
      left: '30px',
      show: false,
      zlevel: -1, // 必须设置，
      ...mapConfig,
    },
    series: [
      {
        roam: true,
        type: 'map',
        left: '30px',
        ...mapConfig,
      },
      {
        name: '闪烁散点',
        type: 'effectScatter', // 使用 effectScatter 类型
        coordinateSystem: 'geo',
        data: props.markerData,
        symbolSize: function (val) {
          return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
        },
        label: {
          formatter: '{b}',
          position: 'right',
          show: false,
        },
        rippleEffect: {
          period: 4, // 波纹动画周期
          scale: 3, // 波纹缩放比例
          brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
        },
        hoverAnimation: true,
      },
    ],
  },
});

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>
