<template>
  <div v-show="visible">
    <el-card class="box-card" style="padding: 0 80 30 80;width: 350px;border-radius: 10px;">
      <div id="del-div">
        <el-link type="primary" icon="el-icon-close" @click="close()"></el-link>
      </div>
      <div class="equipInfoWindowTitle">{{ (currEquip.device_type_id + '') | equipType }}</div>
      <div class="equipInfoWindow">
        <span>　设备ID：</span>
        {{ currEquip.device_id }}
      </div>
      <div class="equipInfoWindow">
        <span>设备名称：</span>
        {{ currEquip.device_name || '暂无' }}
      </div>
      <div class="equipInfoWindow">
        <span>设备位置：</span>
        {{ currEquip.city }}
      </div>
      <div class="equipInfoWindow">
        <span>上报时间：</span>
        {{ (currEquip.addtime * 1000) | formatTime }}
      </div>
    </el-card>
    <div class="amap-info-sharp">
      <i class="el-icon-caret-bottom"></i>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      infoWindow: null,
      visible:false,
      currEquip: {
        device_type_id:null,
        device_id:null,
        device_name:null,
        city:null,
        addtime:0,
      }
    };
  },
  methods: {
    initialize(e) {
      this.visible = e.visible;
      this.currEquip = e.currEquip;
      this.infoWindow = e.infoWindow;
    },
    //关闭
    close() {
      this.infoWindow.close();
    },
  }
};
</script>
 
<style lang='less' scoped>
.amap-info-sharp {
  bottom: -1px;
  left: 48.5%;
  position: absolute;
  color: #fff;
  z-index: -1;
}
#del-div {
  position: absolute;
  right: 20px;
  top: 20px;
  transform: scale(1.2);
}

.equipInfoWindowTitle {
  border-bottom: 2px solid #35a478;
  line-height: 33px;
  margin-bottom: 5px;
}
.equipInfoWindow {
  color: #585858;
  font-size: 14px;
  line-height: 22px;
  span {
    color: #333;
  }
}
</style>
