// 地图组件

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

  <!--marker  -->
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="'marker' + index"
        :events="marker.events"
        :position="marker.position"
        :contentRender="contentRender"
        :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,
    contentRender(h, params){
      //console.log(params.extData.extData.productId)
      let value="el-icon-location-information location"+params.extData.extData.productId
      return (<i class={value} />)
    },
    getDeviceDetial() {
      //获取设备列表
      console.log("device siteId", this.info.siteId);
    },
    refresh(data) {
      console.log("刷新数据", data);
      // this.markersGroupData = data;
      //this.$refs.map.clear();
       let map = this.amapManager.getMap()
       map.clearMap()

      for(let group of data){
          for(let item of group.deviceList){
                //console.log("marker", item);
                this.setMarker(item);
          }

      }
    },

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

    setMarker(item) {
      if (!item.lon && !item.lati) return;

      let markerLabel = {
        label: { content: item.deviceName, offset: [30, 70] },
        position: [item.lon, item.lati],

        extData: item,

        events: {
          click: (e) => {
            console.log("getExtData", e.target.getExtData());
     
          },
        },
      };

      this.markers.push(markerLabel);
    },
    
    choose() {
      this.$emit("input", false);
      this.$emit("choose", JSON.parse(JSON.stringify(this.mapData)), (val) => {
        //data = val;

        console.log("callback:" + val);
      });
    },
  },
  data() {
    return {
      markersGroupData:[],
      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>



