<template>
  <div class="amap-bigsc-location">
    <div id="container" style="width:100%; height:100%"></div>
  </div>
</template>
<script>
import AMap from "AMap";
import markerIcon from "@/assets/images/big/map_marker-icon.png";
export default {
  name: "ShopLcation",
  props: {
    mapCenter: {
      type: Object,
      default: {
        lng: 116.397428,
        lat: 39.90923,
        address: ""
      }
    },
    zoom: {
      type: [String, Number],
      default: 10
    },
    draggable: {
      type: Boolean,
      default: false
    },
    deviceList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      aMap: null,
      pointResult: {
        lng: 119.275254,
        lat: 26.028928,
        address: ""
      },
      theme: "6c31a547eb9387caefc013b7809e9d21",
      infoWindow: null
    };
  },
  mounted() {
    this.initMap();
  },
  watch: {
    deviceList: {
      handler: function(list, oldVal) {
        // 创建设备定位的点
        if (this.aMap) {
          this.aMap.clearMap();
        }
        this.createMarker();
      },
      deep: true
    }
  },
  methods: {
    overview() {
      if(this.aMap) {
        this.aMap.setFitView();
      }
    },
    initMap() {
      this.pointResult["lng"] = this.mapCenter.lng;
      this.pointResult["lat"] = this.mapCenter.lat;
      this.aMap = new AMap.Map("container", {
        center: [this.mapCenter.lng, this.mapCenter.lat],
        resizeEnable: true,
        // zoom: this.zoom,
        mapStyle: "amap://styles/" + this.theme
      });
      this.createMarker();
    },
    // 创建窗口对象
    createInfoWindowO() {
      //鼠标点击marker弹出自定义的信息窗体
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: '',
        offset: new AMap.Pixel(-3, -9)
      });
    },
    // 地图标点 点击事件
    markerClick(e) {
      // console.log('地图点击标注点！！')
      if (!this.infoWindow) {
        this.createInfoWindowO();
      }
      this.infoWindow.setContent(e.target.content);
      this.infoWindow.open(this.aMap, e.target.getPosition());
    },
    // 创建设备定位的点
    createMarker() {
      var markerList = [];
      var _this = this;
      for (var i = 0; i < this.deviceList.length; i++) {
        if (this.deviceList[i].projectLat && this.deviceList[i].projectLng) {
          let marker = new AMap.Marker({
            position: [
              this.deviceList[i].projectLng,
              this.deviceList[i].projectLat
            ],
            // map: this.aMap,
            // icon: markerIcon,
            offset: new AMap.Pixel(-13, -30),
          });
          var content = [];
          content.push(
            `<div class="info-block">
              <div class="info-lable">
                <div class="t1">项目<span class="tt">:</span></div>
                <div class="t1">地址<span class="tt">:</span></div>
              </div>
              <div class="info-value">
                <div class="v1">${this.deviceList[i].projectName}</div>
                <div class="v1">
                <marquee style="margin: 0;" behavior="alternate" scrollamount="1" width="100%"><span>${this.deviceList[i].projectAddress}</span></marquee>
                </div>
              </div>
            </div>`
          );
          marker.content = _this.createInfoWindow(content.join("<br/>"))
          marker.on("click", _this.markerClick);
          markerList.push(marker);
        }
      }
      this.aMap.add(markerList);
      this.aMap.setFitView();
    },
    // 实例化信息窗体
    createInfoWindow(content) {
      var info = document.createElement("div");
      info.className = "custom-info input-card content-window-card";

      // 定义中部内容
      var middle = document.createElement("div");
      middle.className = "info-middle";
      middle.style.backgroundColor = "#ff2f6000";
      middle.innerHTML = content;
      info.appendChild(middle);

      return info;
    },
    //关闭信息窗体
    closeInfoWindow() {
      this.aMap.clearInfoWindow();
    },
    getPositionByLonLats(lng, lat) {
      var _this = this;
      // console.log("经度："+lng+"纬度"+lat);
      var lnglatXY = [lng, lat]; // 地图上所标点的坐标
      AMap.service("AMap.Geocoder", function() {
        // 回调函数
        var geocoder = new AMap.Geocoder({});
        geocoder.getAddress(lnglatXY, function(status, result) {
          if (status === "complete" && result.info === "OK") {
            // console.log(result.regeocode.formattedAddress);
            var address = result.regeocode.formattedAddress;
            _this.pointResult.address = address;
          }
          _this.$emit("mapEvent", _this.pointResult);
        });
      });
    },
    showInfoOut(e) {
      // 当点标注失去鼠标焦点的时候就执行return 数据
      this.getPositionByLonLats(
        this.pointResult["lng"],
        this.pointResult["lat"]
      );
      // this.$emit("")
    },
    showInfoM(e) {
      this.pointResult["lat"] = e.lnglat.lat;
      this.pointResult["lng"] = e.lnglat.lng;
    }
  }
};
</script>
<style lang="scss">
.amap-bigsc-location {
  width: 100%;
  height: 100%;
  .amap-marker:first-child .amap-icon img {
    width: 25px;
    height: 34px;
  }
  div.info-middle {
    padding: 20px;
    // background: #ff2f6000 !important;
  }
  div.info-block {
    width: 198px;
    height: 76px;
    background-image: url("../../../../assets/images/big/mapbj_v1.png");
    background-size: cover;
    display: flex;
    padding: 12px;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    font-weight: 400;
    padding-left: 5px;
  }
  div.info-lable {
    color: #07beff;
    margin-right: 8px;
    margin-left: 8px;
    letter-spacing: 7px;
    width: 50px;
  }
  div.info-value {
    width: calc(100% - 60px);
    text-overflow: ellipsis;
    overflow: hidden;
  }
  span.tt {
    margin-left: -6px;
  }
  div.input-card {
    background-color: #ff2f6000;
    box-shadow: 0;
  }
}
</style>
