<template>
  <div style="position: relative;width: 100%;">
    <div id="mapContainer" class="map"></div>
  </div>
</template>

<script>
export default {
  name: 'TencentMap',
  props: {
    lat: {
      type: Number,
      default: 30.67
    },
    lng: {
      type: Number,
      default: 104.06
    },
    isonloed: {
      type: Boolean,
      default: false
    },
    isx: {
      type: Boolean,
      default: true
    },
    ontype: {
      type: String,
      default: '1'
    },
    message: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      map: null,
      marker: null,
      address: '',
      markers: [],
      infoWindow: null,
    };
  },
  mounted() {
    // 初始化地图
    this.initMap(this.message);
  },
  methods: {
    initMap(e) {
      // this.message = e
      e.forEach((item,index) => {
        let list = this.ontype == '1' ? item.mapPunctuation.split(',') : this.ontype == '2' ? item.mapPunctuation.split(',') : this.ontype == '3' ? item.mapMarker.split(',') : [];
        item.lat = parseFloat(list[0]);
        item.lng = parseFloat(list[1]);
        item.name = this.ontype == '1' ? item.shopName : this.ontype == '2' ? item.advertisingName : this.ontype == '3' ? item.venueName :'无';
        // const markerLatLng = new TMap.LatLng(item.lat, item.lng);
        // let marker =  {
        //     "id": 'marker'+(index+1),
        //     "styleId": 'marker',
        //     "position": new TMap.LatLng(item.lat,item.lng),
        //     "properties": {
        //       "title": "marker" +(index+1)
        //     }
        // }
        this.markers.push(item);
      });
      // 将经纬度转换为腾讯地图的LatLng对象
      const centerLatLng = new TMap.LatLng(this.lat, this.lng);
      console.error(this.lat, this.lng)
      // 创建地图实例
      //初始化地图

      this.map = new TMap.Map("mapContainer", {
          zoom:12,//设置地图缩放级别
          center: centerLatLng//设置地图中心点坐标
      });
      // this.map = new TMap.Map(document.getElementById('mapContainer'), {
      //   center: centerLatLng,
      //   zoom: 13
      // });

      // 创建信息窗口实例
      // this.infoWindow = new TMap.InfoWindow({
      //   map: this.map,
      // });
      // this.marker = new TMap.MultiMarker({
      //   map: this.map,
      //   styles: {
      //     // 点标记样式
      //     marker: new TMap.MarkerStyle({
      //       width: 20, // 样式宽
      //       height: 30, // 样式高
      //       anchor: { x: 10, y: 30 }, // 描点位置
      //       src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png'
      //     }),
      //   },
      //   geometries: [
      //     // 点标记数据数组
      //     {
      //       // 标记位置(纬度，经度，高度)
      //       position: centerLatLng,
      //       id: 'marker',
      //     },
      //   ],
      // });

      // 遍历 message 数组，为每个位置创建一个标记
    
  

      this.createMarker()
    },
    createMarker(e) {
      let list = [
        [30.67454811395484,104.00550842285156],
        [30.67,104.06],
      ]
        const customIconUrl1 = require('@/assets/images/icon4.png'); // 确保返回的是 URL 字符串
        const customIconUrl2 = require('@/assets/images/icon6.png'); // 确保返回的是 URL 字符串
        const customIconUrl3 = require('@/assets/images/icon5.png'); // 确保返回的是 URL 字符串
        const icon =  this.ontype == '1'?customIconUrl1:this.ontype == '2'?customIconUrl2:this.ontype =='3'?customIconUrl3:''
        this.marker = new TMap.MultiMarker({
          id: 'marker-layer',
          map: this.map,
          styles: {
              "marker": new TMap.MarkerStyle({
                  "width": 51,
                  "height": 53,
                  "anchor": { x: 16, y: 32 },
                  "src": icon
              })
          },
          geometries: [
            {
              "id": 'marker1',
              "styleId": 'marker',
              "position": new TMap.LatLng(list[0][0],list[0][1],),
              "properties": {
                "title": "marker1"
              }
            },
            {
              "id": 'marker2',
              "styleId": 'marker',
              "position": new TMap.LatLng(list[1][0],list[1][1],),
              "properties": {
                "title": "marker2"
              }
            },
          ]
        });

        return
      if (!this.marker) {
        this.marker = new TMap.MultiMarker({
            id: 'marker-layer',
            map: this.map,
            styles: {
                "marker": new TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                })
            },
            geometries: e
        });
        this.marker = new TMap.MultiMarker({
            id: 'marker-layer',
            map: this.map,
            styles: {
                "marker": new TMap.MarkerStyle({
                    "width": 51,
                    "height": 53,
                    "anchor": { x: 16, y: 32 },
                    "src": icon
                })
            },
            geometries: e
        });
      }
  },
    showInfoWindow(marker, item) {
      console.error('----------')
      // 设置信息窗口的内容
      const content = `
        <div style="padding:10px 0;border-radius: 18px;">
          <p style="padding-top:10px;">资源名称:${item.name}</p>
          <p style="padding-top:10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;max-width: 200px;">位置:${item.detailedLocation}</p>
          <p style="padding-top:10px;">租赁情况:<text style="${item.publishStatus=='4'?"color: #3f9b6a;":"color: #f59a23;"}">${item.publishStatus=='0'?'待发布':item.publishStatus=='1'?'待审核':item.publishStatus=='2'?'已发布':item.publishStatus=='3'?'不通过':item.publishStatus=='4'?'已租赁':'-'}</text></p>
          </div>
      `;
      // <div style="background: #fff;padding:5px 15px;border-radius: 18px;">
      //     <el-form :model="${item}" ref="ruleForm" label-width="80px" class="demo-ruleForm">
      //       <el-form-item label="资源名称" prop="entityName">
      //         <div class="duiqi">${item.name}</div>
      //       </el-form-item>
      //       <el-form-item label="位置" prop="entityName">
      //         <div class="duiqi">${item.detailedLocation}</div>
      //       </el-form-item>
      //     </el-form>
      //   </div>
      // 设置信息窗口的位置和内容
      this.infoWindow.setPosition(marker.getPosition());
      this.infoWindow.setContent(content);
      this.infoWindow.open();
    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.address-info {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999999;
  background: #ffffff;
}
</style>