<template>


<!--  <iframe style="width: 800px; height: 600px;" src="../../../../020/index.html"/>-->
<!--  <iframe :src="this.txtUrl"  width="100%" :style="{height:calHeight}"  sandbox></iframe>-->
<!--  <iframe src="../../../../public/index.html"  width="100%" :style="{height:calHeight}" ></iframe>-->
<!--  <iframe src="http://www.baidu.com/"  width="100%" :style="{height:calHeight}" ></iframe>-->
  <!-- 摄像头分布图 -->
  <!-- 观澜：lng: 114.036331, lat: 22.730421 -->
<!--  成都lng: 103.943382, lat: 30.750594-->

  <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']" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-map-type>
<!--右下角缩略图-->
      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>

      <!--缩放控件-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-marker :title="item.content"
                 :icon="iconUrl"
                 :position="item.position"
                 :dragging="true"
                 @click="infoWindowOpen(item)">
        <!-- 搜索框 -->
        <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-info-window :show="item.show"   @close="infoWindowClose(item)">
<!--           <p v-text="item.content"></p>-->
          <p>经度：{{item.position.lat}}</p>
          <p>纬度：{{item.position.lng}}</p>
          <img :src="iconUrl.url" style="width:100%" />
        </bm-info-window>
      </bm-marker>
      <bm-marker :title="item.content" :icon="iconUrl" :position="{lng: 103.943382, lat: 30.750594}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      <!--聚合动态添加的点坐标-->
      <bm-marker
          :icon="iconUrl"
          v-for="(item,key ) of this.mapList"
          :key="key"
          :position="{'lng':item.cameraLongitude,'lat':item.cameraLatitude}"
          @rightclick="rightmons(item.idFaceCamera)"
          :dragging="false"
      >
        <bm-label
            :massClear="false"
            @dblclick="deletePoint(item)"
            v-if="lableOpen"
            :content="'<div style=display:'+item.displayCss+ '><div >名称:' + item.cameraName+'</div>'+ '<div>位置:' + item.cameraRegionFirstlevelBackUp+'</div>'+'<div>坐标:' + item.cameraLongitude+','+ item.cameraLatitude+'</div></div >'"
            :labelStyle="{backgroundColor :'0.05',border :'0',color: 'blue', fontSize : '14px' ,padding:'10px'}"
            :offset="{width: -100, height: -90}"
        />
      </bm-marker>
    </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 {
      keyword: '',
      item:{
          position: { lng: 103.931057, lat: 30.755467 },
          show:false,
          content:"这是一个摄像头"
      },
      content:"shexiangtou",
      lableOpen: false,
      zoom:14,
      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
    },
    // 覆盖物 点 信息窗体 关闭 --------- 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>
.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>