<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/marker_noalarm.png";
import markerAlarmIcon from "@/assets/images/big/marker_alarm.png";
import infoTopIcon from "@/assets/images/big/map_top.png";
import infoBotIcon from "@/assets/images/big/map_bottom.png";
import infoAlarmIcon from "@/assets/images/big/map_alarm.png";
import infoDeviceIcon from "@/assets/images/big/device_1.png";
import infoCloseIcon from "@/assets/images/big/clors_map.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
    },
    projectList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      aMap: null,
      pointResult: {
        lng: 119.275254,
        lat: 26.028928,
        address: ""
      },
      theme: "6c31a547eb9387caefc013b7809e9d21",
      infoWindow: null
    };
  },
  mounted() {
    this.initMap();
  },
  watch: {
    projectList: {
      handler: function(list, oldVal) {
        // 创建设备定位的点
        if (this.aMap) {
          this.aMap.clearMap();
        }
        this.createMarker();
        // console.log("map_projectList: ", list);
        // this.textFu();
      },
      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();
      // this.textFu();
    },
    // 创建窗口对象
    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());
    },
    // 开发测试方法
    textFu() {
      let marker = new AMap.Marker({
        position: [116.4224009776628, 39.93482727239599],
        icon: markerIcon,
        offset: new AMap.Pixel(-13, -30)
      });
      var content = [];
      content.push(
        `<div class="info-block">
          <span class="info-title">报警提醒</span>
          <img class="info-close" src="${infoCloseIcon}"/>
          <img class="info-top" src="${infoTopIcon}" />
          <div class="info-wrap">
            <div class="info-item"><span class="info-lable">项目：</span><span class="info-value">智慧园区项目</span></div>
            <div class="info-item"><span class="info-lable">地址：</span><span class="info-value">智慧园区项目</span></div>
            <div class="info-item"><span class="info-lable">报警总数：</span><span class="info-value">智慧园区项目</span></div>
            <div class="alarm-icon-block">
              <img class="alarm-icon" src="${infoAlarmIcon}"/>
            </div>
            <div class="list-device">
              <div class="item-device"><img class="d-img" src="${infoDeviceIcon}" /> <span class="device-info">设备名称设备名称设备名称设备名</span> </div>
              <div class="item-device"><img class="d-img" src="${infoDeviceIcon}" /> <span class="device-info">设备名称设备名称设备名称设备名</span></div>
              <div class="item-device"><img class="d-img" src="${infoDeviceIcon}" /> <span class="device-info">设备名称设备名称设备名称设备名</span></div>
              <div class="item-device"><img class="d-img" src="${infoDeviceIcon}" /> <span class="device-info">设备名称设备名称设备名称设备名</span></div>
            </div>
          </div>
          <img class="info-bottom" src="${infoBotIcon}">
        </div>`
      );

      const contentStr = this.createInfoWindow(content.join("<br/>"));
      if (!this.infoWindow) {
        this.createInfoWindowO();
      }
      this.infoWindow.setContent(contentStr);
      this.infoWindow.open(this.aMap, [116.4224009776628, 39.93482727239599]);

      this.aMap.add(marker);
      this.aMap.setFitView();
    },
    // 创建设备定位的点
    createMarker() {
      var markerList = [];
      var _this = this;
      for (var i = 0; i < this.projectList.length; i++) {
        if (this.projectList[i].projectLat && this.projectList[i].projectLng) {
          let marker = new AMap.Marker({
            position: [
              this.projectList[i].projectLng,
              this.projectList[i].projectLat
            ],
            // map: this.aMap,
            icon: this.projectList[i].tenantIndexVo['unProcessed']　> 0 ? markerAlarmIcon : markerIcon,
            offset: new AMap.Pixel(-13, -30)
          });
          var content = [];
          window['amapObj'] = this.aMap;
          content.push(
            `<div class="info-block">
              <span class="info-title">报警提醒</span>
              <img name="closeImg" class="info-close" onclick="window['amapObj'].clearInfoWindow()" src="${infoCloseIcon}"/>
              <img class="info-top" src="${infoTopIcon}" />
              <div class="info-wrap">
                <div class="info-item"><span class="info-lable">项目：</span>
                  <span class="info-value">${this.projectList[i].projectName}</span></div>
                <div class="info-item"><span class="info-lable">地址：</span>
                  <marquee style="margin: 0; width:calc(100% - 80px);" behavior="alternate" scrollamount="1" width="calc(100% - 40px)">
                    <span class="info-value">${this.projectList[i].projectAddress}</span>
                  </marquee>
                </div>
                <div class="info-item"><span class="info-lable">报警总数：</span>
                  <span class="info-value" style="color: #ff3739;font-size: 24px;font-weight: 500;">${this.projectList[i].tenantIndexVo?.unProcessed}</span></div>
                <div class="alarm-icon-block">
                  <img class="alarm-icon" src="${infoAlarmIcon}"/>
                </div>
                <div class="list-device">
                  ${this.resultDeviceListStr(this.projectList[i].deviceAlarmSimpleVoList || [])}
                 </div>
              </div>
              <img class="info-bottom" src="${infoBotIcon}">
            </div>`
          );
          marker.content = _this.createInfoWindow(content.join("<br/>"));
          marker.on("click", _this.markerClick);
          markerList.push(marker);
        }
      }
      this.aMap.add(markerList);
      this.aMap.setFitView();
    },
    resultDeviceListStr(list) {
      var resultStr = '';
      var _this = this;
      window['_this'] = this;
      if (list && list.length > 0) {
        list.forEach(v => {
          // if (v.unProcessAlarmTotal > 0) {
            resultStr = resultStr +  `
              <div class="item-device" onclick="${_this}">
                <img class="d-img" src="${infoDeviceIcon}" />
                <span class="device-info" name="${v.deviceId}"
                onclick="window['_this'].$router.push({ name:'systemDevice', params: { 'deviceId': ${v.deviceId}, 'tempType': 'details' } })"
                style="${v.unProcessAlarmTotal > 0 ? 'color: #ff3739;':''}">${v.deviceName}</span>
              </div>
            `
          // }
        });
      }
      return resultStr;
    },
    // 实例化信息窗体
    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 {
    background-image: url("../../../../assets/images/big/mapbj_c_1.png");
    background-size: cover;
    display: flex;
    padding: 12px;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    font-weight: 400;
    padding-left: 5px;
    // border: 1px solid red;
    width: 350px;
    // height: 280px;
    flex-wrap: wrap;
  }
  img.info-top {
    height: 40px;
    width: 100%;
    position: relative;
    // top: -20px;
  }
  img.info-bottom {
    height: 40px;
    width: calc(100%);
    position: relative;
    // top: 20px;
  }
  div.info-wrap {
    min-height: 220px;
    width: 100%;
    background-image: url("../../../../assets/images/big/mapbj_c_1.png");
    background-size: contain;
    display: flex;
    flex-wrap: wrap;
  }
  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;
  }
  div.info-item {
    width: 100%;
    display: flex;
    padding-left: 30px;
    height: 30px;
  }

  span.info-title {
    position: relative;
    top: 30px;
    left: 140px;
    font-size: 16px;
    font-family: "Microsoft YaHei";
    font-weight: 400;
    color: #07b3f2;
    line-height: 24px;
    z-index: 1;
  }
  span.info-lable {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    font-weight: 400;
    color: #07beff;
    line-height: 28px;
  }
  span.info-value {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    font-weight: 400;
    color: #ffffff;
    line-height: 28px;
  }
  div.alarm-icon-block {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div.list-device {
    width: 100%;
    padding-left: 30px;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    padding-right: 30px;
    max-height: 150px;
    overflow: auto;
    // justify-content: space-between;
    // align-items: flex-start;
  }
  div.item-device {
    background: rgba(1, 112, 255, 0);
    height: 35px;
    // border: 1px solid #00c0ff;
    border-top: 1px solid #00c0ff75;
    border-radius: 3px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0px 10px;
    margin-bottom: 5px;
    margin-right: 5px;
    width: 100%;
  }
  img.d-img {
    margin-right: 10px;
  }
  span.device-info {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: calc(100% - 35px);
  }
  span.device-info:hover {
    color: #00c0ff;
  }
  img.info-close {
    position: relative;
    left: 250px;
    top: 25px;
    z-index: 1;
  }
}
</style>
