<template>
  <div class="homeContainer">
    <div class="amap-wrapper">
      <el-amap vid="amapContainer" :zoom="zoom" :center="center" class="amap-demo">
        <el-amap-marker
          v-for="(marker, index) in markers"
          :key="index"
          :position="marker.position"
          :events="marker.events"
          :visible="marker.visible"
          :draggable="marker.draggable"
          :content="marker.content"
          :vid="index"
          :title="marker.title"
        ></el-amap-marker>
      </el-amap>
      <span @click="emitEvent"></span>
    </div>
    <!-- <div v-if="!mtIs">
      <div>
        <div>直梯</div>
        <div></div>
      </div>
    </div>-->
  </div>
</template>

<script>
// 引入高德使用高德
import aMap from "vue-amap";
import { lazyAMapApiLoaderInstance } from "vue-amap";
// 初始化高德
aMap.initAMapApiLoader({
  key: "937eb4405db2a8895695506871c3a1d5",
  plugin: [
    "AMap.Autocomplete",
    "AMap.PlaceSearch",
    "AMap.Scale",
    "AMap.OverView",
    "AMap.ToolBar",
    "AMap.MapType",
    "AMap.PolyEditor",
    "AMap.CircleEditor"
  ],
  v: "1.4.4",
  uiVersion: "1.0.11"
});
// lazyAMapApiLoaderInstance.load().then(() => {
//   // your code ...
//   this.map = new AMap.Map("amapContainer", {
//     // center: new AMap.LngLat(114.3052500000,30.5927600000)
//   });
// });
export default {
  data() {
    return {
      mtIs: false,
      zoom: 14,
      center: [114.305252, 30.592762],
      markers: [
        {
          position: [114.305252, 30.592762],
          content:
            '<i class="iconfont icondingwei" style="color:pink;font-size:32px;"></i>',
          events: {
            click: e => {},
            dragend: e => {
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            }
          },
          visible: true,
          draggable: false,
          template: "<span>8888</span>"
        }
      ]
    };
  },
  mounted() {},
  methods: {
    emitEvent(renmark, a) {
      //  this.mtIs=true;
      var color;
      var renmarkList = renmark.liftDataList;
      if (renmarkList.length < 1) {
        this.markers = [];
        return;
      }
      var newMarkers = [];
      for (
        var i = 0, renmarkLength = renmarkList.length;
        i < renmarkLength;
        i++
      ) {
        if (renmarkList[i].coordinate) {
          switch (a) {
            case 0:
              color = "#51B0FF";
              break;
            case 10:
              color = "#e8e171";
              break;
            case 11:
              color = "#ff9c00";
              break;
            case 12:
              color = "#b7e5a1";
              break;
            case 20:
              color = "#DC4F4A";
              break;
            case 21:
              color = "#FEE188";
              break;
          }
          var arr = {
            position: [],
            content:
              '<i class="iconfont icondingwei" style="color:' +
              color +
              ';font-size:32px;"></i>',
            events: {
              click: e => {
                console.log(e);
              },
              dragend: e => {
                this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
              }
            }
          };
          var aposition = renmarkList[i].coordinate.split(",");
          this.center = [aposition[0], aposition[1]];
          arr.title = `项目名称:${renmarkList[i].projectName}\n电梯编号:${
            renmarkList[i].liftCode
          }\n电梯位置:${
            renmarkList[i].liftAddress ? renmarkList[i].liftAddress : "未知"
          }\n维保工:${
            renmarkList[i].workerName ? renmarkList[i].workerName : "未知"
          }`;
          let arrObj = arr.position;
          arrObj[0] = aposition[0];
          arrObj[1] = aposition[1];
          newMarkers.push(arr);
          this.markers = newMarkers;
        }
      }
    },
    emitEventPro(renmark){
      var aposition = renmark.coordinate.split(",");
      this.center = [aposition[0], aposition[1]];
      this.markers[0].position = [aposition[0], aposition[1]];
      this.markers[0].content= '<i class="iconfont icondingwei" style="color:#DC4F4A;font-size:32px;"></i>'
      this.markers[0].title = `电梯位置:${
            renmark.devicePosition ? renmark.devicePosition : "未知"
          }\n维保工:${
            renmark.workerName ? renmark.workerName : "未知"
          }`;
    },
    allEvent(data) {
      // this.mtIs=false;
      if (data.length < 1) {
        this.markers = [];
        return;
      }
      var newMarkers = [];
      for (var i = 0, renmarkLength = data.length; i < renmarkLength; i++) {
        if (data[i].coordinate) {
           var arr = {
          position: [],
          content:
            '<i class="iconfont icondingwei" style="color:#51B0FF;font-size:32px;"></i>'
        };
        var aposition = data[i].coordinate.split(",");
        let arrObj = arr.position;
        arrObj[0] = aposition[0];
        arrObj[1] = aposition[1];
        newMarkers.push(arr);
         this.markers = newMarkers;
        }
      }
    },
  }
};
</script>
<style lang="stylus">
.homeContainer {
  display: inline-block;
  height:700px;
  width: 100%;
  margin-top: 15px;
  padding: 0 15px;

  .amap-wrapper {
    width: 100%;
    height: 700px;
  }
}
</style>

<style lang="">
</style>
