<template>
  <div class="map">
   
    <div ref="mapContent" class="mapContent" >
      <tdt-map
        ref="tiandituMap"
        :center="center"
        :zoom="zoom"
        @init="init"
        map-style="black"
        class="amap-box"
        :mid="'amap-vue'"
      >
        <tdt-marker
          v-for="marker in markers"
          :position="[marker.lon, marker.lat]"
          :key="marker.id"
          :icon="marker.iconMap"
          style="width: 20px; height: 20px"
          @click="clickArrayMarker(marker)"
          :title="marker.name"
        >
        </tdt-marker>
      </tdt-map>
    </div>
    <a-modal
      class="modal"
      ref="modal"
      v-model:open="showCtrModal"
      :destroy-on-close="true"
      :get-container="() => $refs.mapContent"
      :footer="null"
      :title="testVal.name"
      :mask="true"
    >
      <template #closeIcon>
        <i class="iconfont icon-guanbi" style="font-size: 20px; cursor: pointer; color: #fff" />
      </template>
      <div class="modal-content">
        <div class="home-modal">
          <Modal :station-id="changeStationId"></Modal>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { getReq, postReq } from '@/request/api'
import Modal from '@/components/Home/Modal.vue'
import { loadTMap } from '@/utils/loadTMap'
import {gcj02ToWgs84} from '@/utils/gcj02ToWgs84'
import { TdtMap } from 'vue-tianditu'

export default {
  name: 'Map',
  components: { Modal, TdtMap },

  data() {
    return {
      center: [],
      // zoom: 16,
      zoom: 2,
      map: null,
      currentMarker: {},
      showCtrModal: false,
      markers: [],

      testVal: {
        name: '场站211',
        id: '2'
      },
      changeStationId: '',
      targetKey: '98d875e39cf0ebab01e56a0f86c5ed44'
    }
  },
  mounted() {
    this.initMap()
    // this.getMarkList()
  },
  methods: {
    init(map) {
      this.map = map
      // console.log(this.map.getCenter(),"this.map.getCenter()")
      this.map.centerAndZoom(new T.LngLat(116.404, 39.915), 12);
      // 监听地图加载完成事件
      this.map.addEventListener('load', () => {
        const c= this.map.getCenter()
        this.center =gcj02ToWgs84(c);
        console.log('GCJ02坐标:', this.center);
      });
      this.getMarkList()
    },
    async getMarkList() {
      try {
        let query = {
          role_id: localStorage.getItem('user')[0].role_id
        }
        const res = await getReq('/queryStationList', query)
        if (res.errcode === 0) {
          this.markers = res.data.map((item) => {
            console.log(gcj02ToWgs84(+item.lon, +item.lat),"gcj02ToWgs84(+item.lon, +item.lat)")
            let wgs = +item.lat && +item.lon ? gcj02ToWgs84(+item.lon, +item.lat) : [null, null]
            return {
              ...item,
              lon: wgs[0],
              lat: wgs[1],
              iconMap: !+item.status
                ? require('../../assets/home/homeIcon1.png')
                : require('../../assets/home/homeIcon.png')
            }
          })
          console.log("this.markers ",this.markers )
        } else {
          this.markers = []
          throw res
        }
      } catch (error) {
        console.log(error,'eeeeeeeeeeeeeeee')
      }
    },
    async initMap() {
      try {
        const [mapKey] = await Promise.all([this.getSysConfig('map-key')])
        // const gcj02LngLat=map.getCenter()
        // console.log(gcj02LngLat.getLng())
        console.log(mapKey,"mapKey")
        await loadTMap(mapKey)
        

        // 创建地图实例（需要HTML中存在id为mapContainer的元素）  
        // this.map = new T.Map("amap-vue");  
        // // this.map.centerAndZoom(new T.LngLat(116.404, 39.915), 12); // 初始中心点  
        
        // const centerGcj02 = this.map.getCenter();  
        // console.log("GCJ02坐标:", centerGcj02.getLng(), centerGcj02.getLat());  
        // const centerWgs84=gcj02ToWgs84(centerGcj02.getLng(),centerGcj02.getLat())



        // this.center =[]
      } catch (err) {
        console.error('天地图加载失败:', err)
      }
    },
    async getSysConfig() {
      let sysConfig
      try {
        const query = {}
        const res = await getReq('/', query)
        if (res.errcode === 0) {
          sysConfig = res.data.value
        } else {
          throw res
        }
      } catch (error) {
        sysConfig = this.targetKey
      }
      return sysConfig
    },
    async clickArrayMarker(currentVal) {
      this.changeStationId = currentVal.station_id
      console.log(currentVal, 'cccccccccccccccccccccc')
      this.showCtrModal = true
      // try {
      //   const query = {
      //     // station_id:this.changeStationId
      //   }
      //   const res = await postReq(query, '')
      //   if (res.errcode === 0) {
      //     this.modalInfo = res.data.records
      //   } else {
      //     throw res
      //   }
      // } catch (err) {
      //   console.log(err, 'eeeeeeeeeeeeeeeerr')
      // }
    }
  }
}
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;

  .mapContent{
    height:100%;
  }
  .icon1 {
    width: 32px;
    height: 80px;
    background: url('../../assets/home/homeIcon1.png');
    background-size: contain;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .icon {
    width: 32px;
    height: 80px;
    background: url('../../assets/home/homeIcon.png');
    background-size: contain;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  :deep(.ant-modal-root .ant-modal-mask) {
    background-color: #000 !important;
  }
  :deep(.modal.ant-modal) {
    width: 68% !important;
    height: 80% !important;
    min-width: 1200px !important;
    border: none;
    padding: 20px;
    background-image: url('../../assets/home/modal-bg.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    & > div {
      height: 100%;
    }
    .ant-modal-content {
      height: 100%;
      width: 96%;
      margin: auto;
      box-shadow: none;
      background: transparent;
      .ant-modal-close {
        position: absolute;
        right: 0;
        top: 3px;
      }
      .ant-modal-body {
        height: calc(100% - 45px);
        color: #fff;
        // padding: 10px;
        div > span {
          //   margin-right: 10px;
        }
      }
      .ant-modal-header {
        height: 45px;
        position: absolute;
        top: -45px;
        text-align: center;
        width: 96%;
        background: transparent;
        div {
          font-size: 32px;

          color: #fff;
        }
      }
    }
  }
  .modal-content {
    height: calc(100% - 45px);

    min-height: 700px;
  }
  .home-modal {
    height: 100%;
  }

  :deep(.tdt-marker-icon){
    height:auto!important;
  }
}
</style>
