// 地图组件

<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="events"
        :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, lazyAMapApiLoaderInstance } 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: {
    refresh(data) {
      console.log("刷新数据", data);
      this.markersData = data;

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

    relocate(center){
     this.center = [center.lng, center.lat];
     this.zoom=12
       //重新定位中心点
    },

    setMarker(lng, lat, address, siteId) {
      if (!lng && !lat) return;
      const size = (address || "").length * 5;

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

      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() {
    let self = this;
    return {
      searchEvents: {
        init: (e) => {},
      },
      mapData: {},
      markers: [],
      geocoder: null,
      amapManager,
      zoom: 8,
      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);
          // });
        },
        click: (e) => {
          //alert(e.target.getExtData().siteId);
          this.$emit("choose", e.target.getExtData().siteId);
          // 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>



