<template >
  <div id="amap_point_rendering_map" :style="mapStyle">
    <div v-show="false">
      <div id="amap_point_rendering_template">
        <a-descriptions :column="1">
          <a-descriptions-item v-for="(des, index) in describeList" :key="index" :label="des.describe" >{{ markers[des.field] }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </div>
</template>
<script>
import { GetGDMap } from '@vue2-client/utils/map-utils'
import { mapState } from 'vuex'
export default {
  name: 'AmapPointRendering',
  props: {
    // 选中点位后需要展示的信息描述
    describeList: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => { return [] } // lng:描述信息 lat:描述信息对应的值的字段名 { describe: '用户名称', field: 'name' }
    },
    // 需要渲染的点位数据
    markers: {
      type: String,
      default: null // lng:经度值 lat:纬度值
    },
    // 渲染点位的图片
    imgurl: {
      type: String,
      default: () => {
        return 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
      }
    },
    mapStyle: {
      type: Object,
      default: () => {
        return {
          width: '100%',
          height: '85vh',
          border: '2px solid lightgray',
          'border-radius': '5px'
        }
      }
    }
  },
  computed: {
    ...mapState('setting', ['isMobile', 'gaode_key', 'gaode_secret_key'])
  },
  data () {
    return {
      map: null,
      geocoder: null, // 逆地理编码
      infoWindow: null,
      selectrow: {}
    }
  },
  created () {
  },
  mounted () {
    GetGDMap(this.gaode_secret_key, this.gaode_key).then(aMap => {
      this.initMap(aMap)
      this.initData(aMap)
    })
  },
  methods: {
    initMap (aMap) {
      this.map = new (aMap).Map('amap_point_rendering_map', { // 设置地图容器id
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 10, // 初始化地图层级
      })
      this.geocoder = new (aMap).Geocoder({
        radius: 500 // 范围，默认：500
      })
      this.map.addControl(new (aMap).ToolBar()) // 初始化工具插件
      // 初始化窗体
      this.infoWindow = new (aMap).InfoWindow({
        anchor: 'bottom-center',
        isCustom: false, // 使用自定义窗体
        autoMove: true,
        content: '',
        showShadow: true,
        offset: new (aMap).Pixel(0, -25)
      })
    },
    initData (aMap) {
      // 创建一个 Marker 实例：
      if (this.markers) {
        const lngLat = this.markers.split(',')
        const lng = lngLat[0]
        const lat = lngLat[1]
        const marker = new (aMap).Marker({
          // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          position: new (aMap).LngLat(lng, lat),
          icon: new (aMap).Icon({
            // 图标大小
            size: new (aMap).Size(26, 28),
            imageSize: new (aMap).Size(26, 28),
            // 报警图标URL
            image: this.imgurl,
            // 图标偏移位置
            anchor: new (aMap).Pixel(0, 0),
          }),
          extData: this.markers
        })
        marker.on('click', (e) => {
          if (e.target.getExtData() && e.target.getExtData().lng) {
            this.infoWindow.setContent(document.getElementById('amap_point_rendering_template'))
            this.infoWindow.open(this.map, [e.target.getExtData().lng, e.target.getExtData().lat])
          }
        })
        // 将创建的点标记添加到已有的地图实例：
        this.map.add(marker)
        this.map.setFitView()
      }
    }
  }
}
</script>
