<template>
  <div class="contain">
    <baidu-map
        class="map"
        :scroll-wheel-zoom="true"
        :double-click-zoom="false"
        :center="center"
        :zoom="zoom">
<!--      地图类型切换-->
     <bm-map-type :map-types="['BMAP_NORMAL_MAP','BMAP_PERSPECTIVE_MAP','BMAP_SATELLITE_MAP']"  anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
      <div >
        <bm-marker :position="{lng: item.position.lng,lat: item.position.lat}" >
          <bm-info-window  :show="true"  class="bminfowindow" >
            <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:220px">  异常区域：</div>
              <div style="margin-top:5px;width:220px">  详细地址：</div>
              <div style="margin-top:5px;width:220px">  严重程度：</div>
              <div style="margin-top:5px;width:220px">  上报人：</div>
              <div style="margin-top:5px;width:220px">  联系方式：</div>
              <div style="margin-top:5px;width:220px">  指派人：</div>
              <div style="margin-top:5px;width:220px">  故障开始时间：</div>
              <div style="margin-top:5px;width:220px">  详细信息：</div>
            </div>
          </bm-info-window>
        </bm-marker>
      </div>
    </baidu-map>
  </div>

</template>
<script>
import cameraAddUpdate from "./camera-add-update";
import cameraUpload from "./camera-upload";
import cameraView from "./camera-view";
export default {
  components: {
    cameraAddUpdate,
    cameraView,
    cameraUpload
  },
  data() {
    return {
      //信息窗口数据导入
      Informationwindowdata: {
        type: Array,
        default() {
          return []
        }
      },
      keyword: '',
      item:{
          position: { lng: 103.931057, lat: 30.755467 },
          show:false,
          content:"这是一个摄像头"
      },
      content:"shexiangtou",
      lableOpen: false,
      zoom:18,
      center: {
        lng: 103.931057, lat: 30.755467
      },
      iconUrl: {
        url: require("../../../assets/img/video.png"),
        size: { width: 30, height: 30 }
      },
      list: true,
      mapList: [],
      mapOpen: false,
      // camera 和 camreaView切换，camreaView暂时不用
      viewState: false,
      // 表单查询
      formModel: {
        cameraName: "",
        cameraRegion: [],
        cameratLocationtypeId: ""
      },
      // table 列表
      cameraList: [],
      // 分页
      total: 0,
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        note: {}
      },
      // 设备区域
      areaOptions: [],
      areaProps: {
        multiple: true
      }
    };
  },
  methods: {
    deletePoint(e) {
      let arr = [];
      this.mapList.forEach(item => {
        if (e.idFaceCamera == item.idFaceCamera) {
          item.displayCss = "none";
        }
        arr.push(item);
      });
      this.mapList = arr;
    },
    //逆地址解析
    search() {
      this.item.show = true
      for (let i = 0; i <this.mapList.length ; i++) {
          if (this.mapList[i].name == this.keyword ){
            //到摄像头列表中搜索，将信息窗体显示出来
          }
      }
    },
    // 覆盖物 点 信息窗体 关闭 --------- bm-info-window  暂时不用
    infoWindowClose(param) {
    	this.item.show = false
    },
    // 覆盖物 点 信息窗体 打开
    infoWindowOpen(param) {
      // bm-info-window  暂时不用
      console.log(param)
      this.item.show = true
    },
    //上下文菜单跳转
    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;
      }
    },
    rightmons(type, target) {
      this.$nextTick(() => {
        this.$refs.addUpdateFaceRef.init("update", type);
      });
    },
    //摄像头分布图
    videoMap() {
      this.list = !this.list;
    },
    // el-pagination
    handleSizeChange: function(pageSize) {
      this.pageObj.pageSize = pageSize;
      this.handleCurrentChange();
    },
    handleCurrentChange: function(pageNo) {
      this.pageObj.pageNo = pageNo;
      this.pageObj.note = {
        ...this.pageObj.note,
        ...this.formModel
      };
      if (this.pageObj.note.cameraRegion.length === 0) {
        this.pageObj.note.cameraRegion = "";
      } else {
        this.pageObj.note.cameraRegion = String(
            this.pageObj.note.cameraRegion[
            this.pageObj.note.cameraRegion.length - 1
                ]
        );
      }
      this.commonSeach();
    },
    // 查询
    searchClick() {
      this.pageObj.note = {
        ...this.pageObj.note,
        ...this.formModel
      };
      if (this.pageObj.note.cameraName != "") {
        this.pageObj.pageNo = 1;
      } else if (this.pageObj.note.cameratLocationtypeId != "") {
        this.pageObj.pageNo = 1;
      }
      if (this.pageObj.note.cameraRegion.length === 0) {
        this.pageObj.note.cameraRegion = "";
      } else {
        this.pageObj.note.cameraRegion = String(
            this.pageObj.note.cameraRegion[
            this.pageObj.note.cameraRegion.length - 1
                ]
        );
        this.pageObj.pageNo = 1;
      }
      this.commonSeach();
    },
    searchClicks() {
      this.$http
          .get(`/camera/getAllList?cameraName=${this.formModel.cameraName}`)
          .then(res => {
            this.mapList = res.data.data;
          });
    },

  },
  created() {

  }
};
</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: 300px !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;
}
/*//此处修改百度地图信息窗口的小箭头样式,里面的图标也可以在这里自定义,直接添加 img{}自定义就好了*/
/*/deep/ .BMap_pop div:nth-child(8) {*/
/*    background-color: rgb(255, 255, 255, 0) !important;*/
/*    !*color: rgb(0, 220, 255) !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>
