<template>
  <div class="map-container">
    <div id="aMap" class="map-container2"></div>
  </div>
</template>

<script setup lang="ts" name="Map">
import { useAMap } from '@/hooks/AMap/useAMap';
import { useDrawTool } from '@/hooks/AMap/useDrawTool';
import { getDictLabel } from '@/utils/dict';
import {
  getEmergencyExpertDetails,
  getEmergencyShelterTypeDetails,
  getGasolinestationDetails,
  getHospitalDetails,
  getMiningcompanyDetails,
  getWarehouseDetails,
  getChemicalcompanyDetails,
  getSchoolDetails,
  getWaterloggedRoadsDetails,
  getShipRealtilmePositionDetails,
  getUAVDetails,
  getRainbowDetails,
  getTouristAttractionDetails,
  getConstructionSitesDetails,
  getYardSitesDetails,
  getStationInfoDetails,
  getMajorHazardSourceDetails,
  getBuildingProjectDetails,
  getChemicalWarehouseDetails,
  getMiningOperationsDetails,
  getEmergencyTransportResourcesDetails, getEmergencyDisasterInfoOfficerDetails
} from '@/api/globalMap/spatialAnalysis';
import { pointDetailTemplate } from './mapData';
import {getPointInfoList} from "@/api/globalMap";
import {getCurrentInstance, inject, nextTick, onMounted, onUnmounted, reactive, ref, toRefs, watch} from "vue";

interface Props {
  activeMap: string;
  pointType: [];
}

const props = withDefaults(defineProps<Props>(), {});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { point_type } = toRefs<any>(proxy?.useDict('point_type'));

const emits = defineEmits(['update:drawing', 'selectGraphics', 'unSelectGraphics', 'showTextEditBox', 'onDrawCompleted', 'handleShowVideo', 'handleShowWarehouse']);

const mapState = reactive({
  center: [110.93154257997, 21.669064031332],
  zoom: 7.9,
  minZoom: 6,
  maxZoom: 20,
  isThreeDimensional: false,
  // 是否显示比例尺
  showScale: true
});

let AMap, map, scale;

// 鼠标绘制工具
const drawTool = useDrawTool();
// 初始化地图
const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, getMarkers, getScale, showInfo, hideInfo, handleHover } = useAMap({
  key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
  version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  pitch: mapState.isThreeDimensional ? 45 : 0,
  zoom: mapState.zoom,
  center: [mapState.center[0], mapState.center[1]],
  dragEnable: true,
  scrollWheel: true,
  enableMouseTool: true,
  // 加载完成事件
  onLoadCompleted: () => {
    AMap = getAMap();
    map = getMap();
    scale = getScale();
    if (!['logical', 'vectorgraph'].includes(props.activeMap)) {
      switchMap(props.activeMap);
    } else {
      map.removeLayer();
    }
    drawTool.initMouseTool({ container: 'aMap', map, AMap });
    handleResize();
  },
  onMarkerClick: (data) => {
    // 多点位
    if (data.type === '1') {
      let path = [];
      props.pointType.forEach((item) => {
        path.push(item.component);
      });
      getPointInfoList({
        option: path.toString(),
        longitude: data.longitude.toString(),
        latitude: data.latitude.toString()
      }).then((res) => {
        const data2 = res.data.list;
        let content = document.createElement('div');
        content.className = 'point-info';
        let content2 = '';
        content2 += '<div class="title-box"><div class="gradient-text">多点位信息</div></div>';
        content2 += '<div class="icon1"></div>';
        content2 += '<div class="icon2"></div>';
        content2 += '<div class="icon3"></div>';
        content2 += '<div class="icon4"></div>';
        content.innerHTML = content2;
        let tableBox = document.createElement('div');
        tableBox.className = 'table-box';
        let table = document.createElement('div');
        table.className = 'table';
        table.innerHTML = '<div class="point-item"><div class="td3">主题</div><div class="td3">名称</div></div>';
        data2.forEach((item) => {
          item.longitude = data.longitude;
          item.latitude = data.latitude;
          const div = document.createElement('div');
          div.className = 'point-item point-item-hover';
          div.innerHTML =
            '<div class="td4">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td4">' + item.name + '</div>';
          div.addEventListener('click', () => {
            handlePointDetails(item);
          });
          table.appendChild(div);
        });
        tableBox.appendChild(table);
        content.appendChild(tableBox);
        let closeBtn = document.createElement('div');
        closeBtn.className = 'close';
        closeBtn.onclick = hideInfo;
        content.appendChild(closeBtn);
        showInfo(content, [data.longitude, data.latitude], true);
      });
    } else {
      handlePointDetails(data);
    }
  }
});
const handlePointDetails = (data) => {
  let methodList = {
    '1': getEmergencyExpertDetails,
    '2': getWarehouseDetails,
    '3': getEmergencyShelterTypeDetails,
    '4': getWaterloggedRoadsDetails,
    '5': getSchoolDetails,
    '6': getHospitalDetails,
    '7': getGasolinestationDetails,
    '8': getMiningcompanyDetails,
    // '9': getChemicalcompanyDetails,
    '10': getShipRealtilmePositionDetails,
    '11': getChemicalcompanyDetails,
    '12': getChemicalcompanyDetails,
    '13': getChemicalcompanyDetails,
    '14': getChemicalcompanyDetails,
    '15': getUAVDetails,
    '16': getRainbowDetails,
    '18': getMiningOperationsDetails,
    '21': getBuildingProjectDetails,
    '22': getChemicalWarehouseDetails,
    '23': getMajorHazardSourceDetails,
    '24': getStationInfoDetails,
    '25': getYardSitesDetails,
    '26': getTouristAttractionDetails,
    '27': getConstructionSitesDetails,
    '28': getEmergencyTransportResourcesDetails,
    '29': getEmergencyDisasterInfoOfficerDetails
  };
  let titleList = {
    '1': '专家信息',
    '2': '物资与装备仓库信息',
    '3': '避难所信息',
    '4': '易涝点信息',
    '5': '学校信息',
    '6': '医院信息',
    '7': '加油站信息',
    '8': '非煤矿山企业信息',
    '9': '危化企业信息',
    '10': '船舶动态信息',
    '11': '危险化学品经营企业信息',
    '12': '危险化学品生产企业信息',
    '13': '危险化学品使用企业(使用许可)信息',
    '14': '化工企业(不发使用许可)信息',
    '15': '无人机信息',
    '16': '雨窝点',
    '17': '地质灾害隐患点',
    '18': '矿山施工',
    '19': '工矿商贸',
    '20': '气象灾害防御重点单位',
    '21': '建筑工程',
    '22': '储罐',
    '23': '重大危险源',
    '24': '客运站',
    '25': '堆场',
    '26': '旅游场所',
    '27': '在建工地',
    '28': '运输资源',
    '29': '灾害信息员'
  };
  let method = methodList[data.dataType];
  let title = !!titleList[data.dataType] ? titleList[data.dataType] : '信息';
  if (!method) return;
  method(data.id).then((res) => {
    if (!!pointDetailTemplate[data.dataType]) {
      let div = document.createElement('div');
      div.className = 'point-info';
      let titleDom = document.createElement('div');
      titleDom.className = 'title-box';
      titleDom.innerHTML = '<div class="gradient-text">' + title + '</div></div>';
      div.appendChild(titleDom);
      if (data.dataType === 2) {
        let btnBox = document.createElement('div');
        let btn = document.createElement('div');
        btnBox.className = 'flex';
        btn.className = 'btn';
        btn.innerHTML = '<div class="video-icon"></div><div>物资详情</div>';
        btn.onclick = () => {
          emits('handleShowWarehouse', data);
        };
        btnBox.appendChild(btn);
        div.appendChild(btnBox);
      } else if (data.dataType === 4) {
        let btnBox = document.createElement('div');
        let btn = document.createElement('div');
        btnBox.className = 'flex';
        btn.className = 'btn';
        btn.innerHTML = '<div class="video-icon"></div><div>附近视频</div>';
        btn.onclick = () => {
          emits('handleShowVideo', data);
        };
        btnBox.appendChild(btn);
        div.appendChild(btnBox);
      }
      let icon1 = document.createElement('div');
      icon1.className = 'icon1';
      let icon2 = document.createElement('div');
      icon2.className = 'icon2';
      let icon3 = document.createElement('div');
      icon3.className = 'icon3';
      let icon4 = document.createElement('div');
      icon4.className = 'icon4';
      div.appendChild(icon1);
      div.appendChild(icon2);
      div.appendChild(icon3);
      div.appendChild(icon4);
      let table = document.createElement('div');
      table.className = 'table-box';
      let content = '';
      content += '<div class="table">';
      const newData = filterTd(res.rows[0], data.dataType);
      newData.forEach((item) => {
        if (item.type === 'shortText') {
          content += '<div class="tr">';
          item.data.forEach((item2) => {
            content += '<div class="point-item">';
            content += '<div class="td1">' + item2.label + '</div><div class="td2">' + item2.value + '</div>';
            content += '</div>';
          });
          content += '</div>';
        } else {
          content += '<div class="point-item2">';
          content += '<div class="td1">' + item.data[0].label + '</div><div class="td2">' + item.data[0].value + '</div>';
          content += '</div>';
        }
      });
      content += '</div>';
      table.innerHTML = content;
      div.appendChild(table);
      let closeBtn = document.createElement('div');
      closeBtn.className = 'close';
      closeBtn.onclick = hideInfo;
      div.appendChild(closeBtn);
      showInfo(div, [data.longitude, data.latitude], true);
    }
  });
};
const filterTd = (obj, dataType) => {
  let data = [];
  let tempData = {};
  let i = 0;
  for (let key in obj) {
    let keyLabel = pointDetailTemplate[dataType][key];
    if (!!keyLabel) {
      if (i === 2) {
        i = 0;
      }
      const value = !!obj[key] ? obj[key] : '';
      if (value && value.length > 8) {
        if (i === 0) {
          data.push({ type: 'longText', data: [{ label: keyLabel, value: value }] });
          i = 0;
        } else {
          tempData = { type: 'longText', data: [{ label: keyLabel, value: value }] };
        }
      } else {
        if (i === 0) {
          data.push({ type: 'shortText', data: [{ label: keyLabel, value: value }] });
        } else {
          data[data.length - 1].data.push({ label: keyLabel, value: value });
        }
        i++;
        if (!!tempData && JSON.stringify(tempData) !== '{}') {
          data.push(tempData);
          tempData = {};
          i = 0;
        }
      }
    }
  }
  if (!!tempData && JSON.stringify(tempData) !== '{}') {
    data.push(tempData);
  }
  if (data[data.length - 1].data && data[data.length - 1].data.length === 1 && data[data.length - 1].type === 'shortText') {
    data[data.length - 1].data[1] = { label: '', value: '' };
  }
  return data;
};
// 监听地图类型变化
watch(
  () => props.activeMap,
  () => {
    switchMap(props.activeMap);
  }
);

defineExpose({ addMarker, addSearchMarker, getMarkers, clearMarker, getMap, drawTool, handleHover });
const handleResize = () => {
  map.resize();
};
onMounted(() => {
  window.addEventListener('resize', handleResize);
});
// 卸载事件
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<style lang="scss" scoped>
.map-container2 {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.map-container {
  width: 100%;
  height: 100%;

  :deep(.amap-logo),
  :deep(.amap-copyright) {
    display: none !important;
  }
}
</style>
