<template>
  <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      scroll-wheel-zoom
      @ready="changeCenterAndZoom"
      :mapStyle="mapStyle"
  >
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

    <div v-for="(item, index) in markers" :key="index">
      <bm-marker
          :position="item.position"
          :icon="item.icon"
          @click="infoWindowOpen(item)"
      >
        <bm-info-window
            :show="item.show"
            @close="infoWindowClose(item)"
            @open="infoWindowOpen(item)"
        >
          <div class="info-window">
            <div v-for="device in item.deviceInfo">
              <div style="cursor: pointer; color: #fff;" @click="goDevice(device.gateway.mac)">{{$t('lang.device')}} {{device.gateway.mac}}</div>
              <div style="margin-top:5px">
                <span style="color: red" v-if="device.status==0">{{$t('lang.offline')}}</span>
                <span style="color: #67c23a" v-if="device.status==1">{{$t('lang.online')}}</span>
                <span v-if="device.status==2">{{$t('lang.alarm')}}</span>
                <span v-if="device.status==3">{{$t('lang.fault')}}</span>
              </div>
              <el-divider></el-divider>
            </div>
            <div class="address">{{$t('lang.detail-site')}}:{{item.address}}</div>
          </div>
        </bm-info-window>
      </bm-marker>
    </div>

  </baidu-map>


</template>
<script>


</script>
<style>
.baidu-map {

.BMap_bottom {
  display: none;
}

.BMap_pop {

> div,
> img:nth-child(10) {
  display: none;
  overflow: unset;
}

> div:nth-child(9) {
  display: block;
  overflow: unset;
  width: 340px !important;
}

> div:nth-child(8) {
  /*display: block;*/
}

.BMap_top {
  display: none;
}

.BMap_center {
  background: transparent;
  border: none;
  position: sticky !important;
  height: 100%;
}

}
.BMap_bubble_content {
  background: rgba(0, 0, 0, .5);
  border-radius: 5px;
  padding: 20px;

.info-window {
  padding-right: 8px;
  width: 100%;
  max-height: 280px;
  overflow: auto;

.el-divider {
  background: #ccccccbf;
}

.address {
  color: #fff;
}

}
/*//自定义滚动条样式*/
.info-window::-webkit-scrollbar {
  width: 6px;
  height: 1px;
}

.info-window::-webkit-scrollbar-thumb {
  border-radius: 6px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}

.info-window::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background: #EDEDED;
}

}
}

</style>