// 地图组件

<template>
  <div class="my-map">
    
    <el-amap
      ref="map"
      vid="amapDetail"
      :amap-manager="amapManager"
      :center="center"
      :zoom="20"
      :pitch="65"
      :rotation="45"
      viewMode="3D"
      :plugin="plugin"
      :events="events"
      class="amap-demo"
    >
      <div class="tuli1"><slot name="leftTop1"></slot></div>
      <div class="tuli"><slot name="leftTop"></slot></div>

       
    <div class="rightTop"><slot name="rightTop"></slot></div>
      <!-- <el-amap-search-box :on-search-result="onSearchResult" :events='searchEvents'/> -->

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

 
    </el-amap>
  </div>
</template>

<script>
import { formatterDate } from "@/assets/utils/index";
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
  name: "MapDetail",
  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);
      },
    },
  },
  created() {
    this.refresh(this.markersData);
  },
  methods: {
    formatterDate,
    getDeviceDetial() {
      //获取设备列表
      console.log("device siteId", this.info.siteId);
    },
    refresh(data) {
      console.log("刷新数据", data);
      this.markersData = data;

      this.markersData.map((item) => {
        // console.log("marker", item);
        this.setMarker(item);
      });
    },

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

    setMarker(item) {
      if (!item.lng && !item.lat) return;

      //console.log("data",formatterDate(item.createTime))

      let markerLabel = {
        label: { content: item.siteName, offset: [30, 70] },
        position: [item.lng, item.lat],
        icon: require("@/assets/images/ego_box_img_normal.png"),
        extData: item,
        events: {
          click: (e) => {
            console.log("getExtData", e.target.getExtData());
            let exData = e.target.getExtData();
            this.info = exData.extData;
            this.window.position = exData.position;

            this.$nextTick(() => {
              this.window.visible = true; //点击点坐标，出现信息窗体
            });
          },
        },
      };

      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)), (val) => {
        //data = val;

        console.log("callback:" + val);
      });
    },
  },
  data() {
    let self = this;
    return {
      visiblepop: false,
      searchEvents: {
        init: (e) => {},
      },
      window: {
        position: [104.405994, 30.915378],
        visible: false,
        content: '<div class="red">Hi! I am here!</div>',
      },
      mapData: {},
      info: {},
      markers: [],
      geocoder: null,
      amapManager,
      zoom: 20,
      center: [104.007767, 30.568308],
      marker: {},

      // 一些工具插件
    };
  },
};
</script>

<style lang="less">
.tuli {
  width: 400px;
  top: 60px;
  left: 34px;
  position: absolute;
  float: left;
  background-color: rgba(255, 255, 255, 0.7);
}
.tuli1 {
  width: 150px;
  top: 10px;
  left: 34px;
  position: absolute;
  float: left;
  background-color: rgba(255, 255, 255, 0.7);
}
.rightTop {
  width: 200px;
   top: 0px;
   right:0px;
 
  position: absolute;
  float: right;
  background-color: rgba(255, 255, 255, 1);
}
.amap-info-content {
  position: relative;
  background: #fff;
  line-height: 1.4;
  overflow: auto;
}
.my-map {
  .amap-demo {
    position: relative;
    width: 100%;
    min-height: 650px;

    .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>



