// 地图组件

<template>
  <div class="my-map">
    <el-amap
      ref="map"
      vid="amapDemo"
      :amap-manager="amapManager"
      :center="center"
      :zoom="zoom"
      :plugin="plugin"
      :events="events"
      class="amap-demo"
    >
      <!-- <el-amap-search-box :on-search-result="onSearchResult" :events='searchEvents'/> -->

      <!--marker  -->
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="'marker' + index"
        :events="markerEvents"
        :position="marker.position"
        :label="marker.label"
        :icon="marker.icon"
        :extData="marker.extData"
      >
      </el-amap-marker>

      <!-- 标记 -->
      <!-- <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker> -->
      <!-- <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position">
          <div class='map-marker'>
            <img src="../assets/images/ego_box_img_normal.png" alt="">
            <p>
              <el-tag type='danger'>1231</el-tag>
            </p>
          </div>
        </el-amap-marker> -->
    </el-amap>
    <!-- <div slot="footer" class="dialog-footer">
        <el-button size='mini' @click="$emit('input', false)">取 消</el-button>
        <el-button size='mini' type="primary" @click="choose">确 定</el-button>
      </div> -->
  </div>
</template>

<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();

export default {
  props: {
    value: {
      type: Boolean,
    },
    originData: {
      type: Object,
      default: () => {},
    },
    markersData: {
      type: Array,
      required: false,
      default: () => [],
    },
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set() {
        this.$emit("input", false);
      },
    },
  },
  methods: {
    setMarker(lng, lat, address) {
      if (!lng && !lat) return;
      const size = (address || "").length * 5;
      // this.marker = {
      //   position: [lng, lat],
      // };

      // this.markers.push([lng, lat])

      let markerLabel = {
        label: { content: address, offset: [30, 70] },
        position: [lng, lat],
        icon: require("@/assets/images/ego_box_img_normal.png"),
        extData: { projectId: "1" },
      };

      this.markers.push(markerLabel)

    },
    // 处理搜索结果，定位到中心点
    onSearchResult(pois) {
      let latSum = 0;
      let lngSum = 0;
      if (!pois.length) return;
      pois.forEach((poi) => {
        let { lng, lat } = poi;
        lngSum += lng;
        latSum += lat;
      });
      let center = {
        lng: lngSum / pois.length,
        lat: latSum / pois.length,
      };
      this.setMarker(center.lng, center.lat, pois[0].name);
      this.center = [center.lng, center.lat];
    },
    choose() {
      this.$emit("input", false);
      this.$emit("choose", JSON.parse(JSON.stringify(this.mapData)));
    },
  },
  data() {
    return {
      searchEvents: {
        init: (e) => {},
      },
      mapData: {},
      markers: [],
      geocoder: null,
      amapManager,
      zoom: 10,
      center: [104.007767, 30.568308],
      marker: {},
      events: {
        init: (e) => {
          this.geocoder = new AMap.Geocoder();

          console.log("markersData", this.markersData);

          this.markersData.map((item) => {
            this.setMarker(item.lng, item.lat, item.address);
          });
          console.log(this.markers);

          //  this.center = [lng, lat]
          // const {lng, lat, address} = this.originData;
          // this.setMarker(lng, lat, address);
          // if(lng) {
          //   this.center = [lng, lat]
          // }
        },
        click: (e) => {
          const { lat, lng } = e.lnglat;
          this.geocoder.getAddress([lng, lat], (status, result) => {
            if (status === "complete" && result.info === "OK") {
              const address = result.regeocode.formattedAddress;
              this.setMarker(lng, lat, address);
              this.center = [lng, lat];
            }
          });
        },
      },
      // 一些工具插件
      plugin: [
        {
          pName: 'Geocoder',
          events: {
            init (o) {
              //console.log("一些工具插件--地址"+o.getAddress())
            }
          }
        },
        {
          // 定位
          pName: 'Geolocation',
          events: {
            init(o) {
              // o是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  // 设置经度
                  self.lng = result.position.lng
                  // 设置维度
                  self.lat = result.position.lat
                  // 设置坐标
                  self.center = [self.lng, self.lat]
                  self.markers.push([self.lng, self.lat])
                  // load
                  self.loaded = true
                  // 页面渲染好后
                  self.$nextTick()
                }
              })
            }
          }
        },
        {
          // 工具栏
          pName: 'ToolBar',
          events: {
            init(instance) {
               //console.log("工具栏:"+instance);
            }
          }
        },
        {
          // 鹰眼
          pName: 'OverView',
          events: {
            init(instance) {
               //console.log("鹰眼:"+instance);
            }
          }
        },
        {
          // 地图类型
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(instance) {
               //console.log("地图类型:"+instance);
            }
          }
        },
        {
          // 搜索
          pName: 'PlaceSearch',
          events: {
            init(instance) {
               //console.log("搜索:"+instance)
            }
          }
        }
      ]
    };
  },
};
</script>

<style lang="less">
.my-map {
  .amap-demo {
    position: relative;
    width: 100%;
    height: 600px;
    .map-marker {
      position: relative;
      width: 30px;
      height: 30px;
      img {
        position: absolute;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
      }
      .el-tag {
        position: absolute;
        color: #fff;
        top: 30px;
        transform: translateX(-50%);
        background: #f56c6c;
      }
    }
    .el-vue-search-box-container {
      position: absolute;
      top: -28px;
      width: 100%;
      box-shadow: 0 0 3px #ccc;
      .search-tips {
        width: 100%;
        max-height: 300px;
      }
    }
  }
}
</style>



