<template>
  <div class="contain">
    <baidu-map
        class="map"
        :scroll-wheel-zoom="true"
        :double-click-zoom="false"
        @zoomend="mouseEvent"
        :center="center"
        :zoom="zoom">
      <!--      跳转菜单-->
      <bm-context-menu width="250">
        <bm-context-menu-item :callback="gotoshenzhen" text="去深圳采集点"></bm-context-menu-item>
        <bm-context-menu-item :callback="gotochengdu" text="去成都采集点"></bm-context-menu-item>
      </bm-context-menu>
      <!--      右上角地图类型切换-->
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP','BMAP_SATELLITE_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
      <!--右下角缩略图-->
      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
<!--      右下角定位-->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <!-- 搜索框 -->
      <bm-control :offset="{width: '10px', height: '10px'}">
        <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
          <el-input class="complete" v-model="keyword"></el-input>
        </bm-auto-complete>
        <el-button type="primary" @click="search">搜索</el-button>
      </bm-control>
      <!--缩放控件-->
<!--      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>-->
      <bm-marker v-for="(item,key ) of this.mapList" :key="key"
                 :title="item.content"
                 :icon="iconUrl"
                 :position="item.position"
                 :dragging="true"
                 @click="infoWindowOpen(item)"
                 :animation="item.animal">
        <!--        信息窗体-->
        <bm-info-window   :auto-pan="true" :show="item.show"   @close="infoWindowClose(item)">
          <div style="color:#fff;font-size:16px;">
            <div style="width:220px;font-size: 20px">摄像头数据信息</div>
            <div style="margin-top:5px;height: 3px; width:100%;background-color: #1981E1 !important;"></div>
            <div style="margin-top:10px;width:300px">  所属组织：{{ item.origin }}</div>
            <div style="margin-top:5px;width:300px">  详细地址：{{ item.address }}</div>
            <div style="margin-top:5px;width:300px">  经度：{{ item.position.lng  }}</div>
            <div style="margin-top:5px;width:300px">  纬度：{{ item.position.lat }}</div>
            <div style="margin-top:5px;width:300px">  IP地址：{{ item.ip  }}</div>
            <div style="margin-top:5px;width:220px">  摄像机类型：{{ item.type  }}</div>
            <div style="margin-top:5px;width:220px">  备注：{{ item.name  }}</div>
                      <img :src="iconUrl.url" style="width:10%" />
          </div>
        </bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>


</template>
<script>
export default {
  data(){
    return{
      mapList:[
        {
          position: { lng: 103.931057, lat: 30.755467 },
          show:false,
          origin:"公共安全中心实验室",
          address:"广东省深圳市观澜街道银星智界二期3号楼",
          ip:"192.168.1.108",
          type:"华为",
          content:"这是一个摄像头",
          name:"摄像头1",
          animal:"BMAP_ANIMATION_BOUNCE"
        },
        {
          position: { lng: 103.831057, lat: 30.755467 },
          show:false,
          content:"这是一个摄像头",
          name:"2",
          animal:"BMAP_ANIMATION_DROP"
        },
        {
          position: { lng: 103.931057, lat: 30.765467 },
          show:false,
          content:"这是一个摄像头",
          name:"3",
          animal:"BMAP_ANIMATION_DROP"
        }
      ],
      keyword: '',
      // item:{
      //   position: { lng: 103.931057, lat: 30.755467 },
      //   show:false,
      //   content:"这是一个摄像头"
      // },
      iconUrl: {
        url: require("../../../assets/img/video.png"),
        size: { width: 30, height: 30 }
      },
      zoom:14,
      center: {
        lng: 103.931057, lat: 30.755467
      },
      point:{
        lng: 103.931057, lat: 30.755467,
        showFlag:true,
        regionName:"11",
        location:"22",
        severity:"",
        reporterName:"",
        reporterPhone:"",
        orderPeopleStr:"",
        repairStartTime:"",
        information:"",
      },
    }
  },
  methods:{
    //逆地址解析
    search() {
      console.log("kaishishou")
      console.log(this.mapList)
      console.log(this.keyword)
      for (let i = 0; i <this.mapList.length ; i++) {
        if (this.mapList[i].name == this.keyword ){
          //到摄像头列表中搜索，将信息窗体显示出来
          console.log(this.mapList[i])
            this.mapList[i].show = true;
            this.mapList[i].animal ="BMAP_ANIMATION_BOUNCE";
        }
      }
    },
    // 覆盖物 点 信息窗体 关闭 --------- bm-info-window  暂时不用
    infoWindowClose(param) {
      param.show = false
      console.log(param.show)
    },
    // 覆盖物 点 信息窗体 打开,同时获取地图视野的中心点
    infoWindowOpen(param) {
      // bm-info-window  暂时不用
      console.log(param)
      param.show = true
      param.animal = "BMAP_ANIMATION_BOUNCE"
      this.center.lat = param.position.lat;
      this.center.lng = param.position.lng;
    },
    //上下文菜单跳转
    gotochengdu (e) {
      this.center = {
        // 103.943382, lat: 30.750594
        lng: 103.943382,
        lat:30.750594
      }
    },
    gotoshenzhen (e) {
      this.center = {
        // 114.036331, lat: 22.730421
        lng: 114.036331,
        lat: 22.730421
      }
    },
    //鼠标缩放触发函数
    mouseEvent(type, target) {
      //14  大于 14 显示  小于14 隐藏
      if (type.currentTarget.Oa > 14) {
        this.lableOpen = true;
      } else {
        this.lableOpen = false;
      }
    },
  }
}

</script>

<style scoped>
/*调试信息窗格的样式*/
/*地图标题 infoWindow*/
/deep/ .BMap_bubble_title{
  color:#fff;
  font-size:18px;
  /*font-weight: bold;*/
  text-align:left;
  background:transparent !important;
}
/deep/ .BMap_bottom {
  display: none;
}
/*去除四个角的方块*/
/deep/ .BMap_pop div:nth-child(1){
  border-radius:7px 0 0 0;
  background:transparent !important;
  border:0 !important;
}
/deep/ .BMap_pop > div, > img:nth-child(10) {
  display: none;
  overflow: unset;
}
/deep/ .BMap_pop > div:nth-child(9) {
  display: block;
  overflow: unset;
  width: 340px !important;
}
/deep/ .BMap_pop > div:nth-child(8) {
  /*display: block;*/
}
/deep/ .BMap_pop .BMap_top{
  display: none;
}
/deep/ .BMap_pop .BMap_center{
  background: transparent;
  border: none;
  position: sticky !important;
  height: 100%;
}
/deep/ .BMap_bubble_content {
  background: rgba(0, 0, 0, .5);
  border-radius: 5px;
  padding: 20px;
}
/deep/ .BMap_bubble_content .info-window{
  padding-right: 8px;
  width: 100%;
  max-height: 280px;
  overflow: auto;
}
/deep/ .BMap_bubble_content .info-window .el-divider{
  background: #ccccccbf;
}
/deep/ .BMap_bubble_content .info-window .address{
  color: #fff;
}
/*窗体阴影*/
/deep/ .BMap_shadow {
  /*margin-left: -1100px !important;*/
  display: none;
}

/*//此处修改百度地图信息窗口的小箭头样式,里面的图标也可以在这里自定义,直接添加 img{}自定义就好了*/
/deep/ .BMap_pop div:nth-child(8) {
    background-color: rgb(255, 255, 255, 0) !important;
    /*display: none;*/
    /*color: white !important;*/
    /*!/设置透明度*!*!*/
    /*opacity: 0.6;*/
}
/*自定义滚动条*/
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar{
  width: 6px;
  height: 1px;
}
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-thumb{
  border-radius: 6px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #535353;
}
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 6px;
  background: #EDEDED;
}

/*修改地图信息窗口对象样式*/
.contain{
  width: 100%;
  height: 100%;
}
.complete {
  width: 210px;
  margin-right:15px
}
.map {
  /*height: 750px;*/
  /*height: 850px;*/
  width: 100%;
  height: 800px;
}
/*
 去除百度地图版权
 去除右上角[地图、卫星、三维]控件
 去除百度地图右上角平移缩放控件的市县区文字
  */
.map >>> .anchorBL,
/*.map >>> .anchorTR,*/
.map >>> .BMap_zlHolder {
  display: none;
  visibility: hidden;
}
.conditions-div >>> .el-form-item {
  margin: 10px;
}

</style>
