<template>
  <div class="container6">
    <div class="BaiDuMap">
      <baidu-map
        :center="center"
        :map-types="mapType"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        style="width: 100%; height: 100%"
        @ready="handler"
        @click="getClickInfo"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom"
      >
        <!-- 必须给容器指高度，不然地图将显示在一个高度为0的容器中，看不到 -->
        <bm-navigation anchor="BMAP_HYBRID_MAP"></bm-navigation>
        <bm-geolocation
          anchor="BMAP_HYBRID_MAP"
          :showAddressBar="true"
          :autoLocation="true"
        ></bm-geolocation>
        <bm-city-list anchor="BMAP_HYBRID_MAP"></bm-city-list>
      </baidu-map>
    </div>
    <div id="box">
      <div class="top">
        <div class="btns">
          <div @click=" fn('网格')" :class="{ active: text === '网格' }">
            <i class="el-icon-document-copy"></i> 网格
          </div>
          <div @click="fn('案件')" :class="{ active: text === '案件' }">
            <i class="el-icon-edit-outline"></i> 案件
          </div>
          <div @click="fn('定位')" :class="{ active: text === '定位' }">
            <i class="el-icon-location"></i> 定位
          </div>
        </div>
        <div class="content">
          <elCheckboxs v-if="text === '案件'" @check="check"></elCheckboxs>
          <elDingwei v-else-if="text === '定位'" @checkDingwei="checkDingwei"></elDingwei>
          <tree v-else @handleNodeClick="handleNodeClick" @handleNodeClicks="handleNodeClick" @initOut="handleNodeClick"></tree>
        </div>
      </div>
      <div @click="btn" id="btn"><i :class="className"></i></div>
    </div>
    <div class="checkssMap">
      
      <div
        @click="test(1)"
        :class="{ actived: active === 1 }"
        id="weixing"
        @mouseenter="onMouseOver"
        @mouseleave="onMouseOut"
      >
        卫星
      </div>
      <el-checkbox v-model="checked" v-if="show" @change="test(checked)"
        >混合</el-checkbox
      >
      <div @click="test(2)" :class="{ actived: active === 2 }" >地图</div>
      
    </div>
    <div class="dingwei-dialog" v-if="dwDialogShow">暂无人员定位信息!</div>
  </div>
</template>
<script>
import tree from "./el-tree.vue";
import elCheckboxs from "./el-checkbox.vue";
import elDingwei from "./el-dingwei.vue";
import calculateCenter from "@/utils/calculateCenter.js";
import { getpianqu,getanjianinfo } from "@/api/detailDitu";

export default {
  components: {
    tree,
    elCheckboxs,
    elDingwei,
  },
  created() {
    document.title = "查看详情";
    
    // this.getpianqu()
  },
  data() {
    return {
      // 地址信息
      checked: true,
      address: null,
      center: { lng: 0, lat: 0 },
      //地图展示级别
      zoom: 13,
      mapType: ["BMAP_HYBRID_MAP", "BMAP_NORMAL_MAP", "BMAP_SATELLITE_MAP"],
      // gr:BMAP_SATELLITE_MAP,
      isShow: false,
      text: "网格",
      className: "el-icon-arrow-down",
      BMap: null,
      map: null,
      active: 1,
      show: false,
      timer: null,
      datas: [],
      datass: [],
      gridColor: [],
      list:[],
      lng:109.88522856018068,
      lat:40.59079262612488,
      checkDingweiList:[],
      dwDialogShow:false,
      DwDialogtimer:null
    };
  },
  methods: {
    // async getpianqu(){
    //     const res = await getpianqu('top','')
    //     // console.log(res.data);
    //      this.handleNodeClick(res.data)
     
    // },
    checkDingwei(res,b){
          // console.log(res);
          // clearTimeout(this.DwDialogtimer)
          this.checkDingweiList = res.data
          // console.log( this.checkDingweiList,'checkDingweiList');
          let BMap = this.BMap;
          let map = this.map;
          let e = 1;
          this.handler({ BMap, map }, e);
          // console.log( this.checkDingweiList,'checkDingweiList');
          if(this.checkDingweiList.length === 0 && b.checkedNodes.length !== 0){
              this.dwDialogShow = true
            //  this.DwDialogtimer = 
            setTimeout(() => {
                  this.dwDialogShow = false  
              }, 1000);
          }
    },
    check(res){
          //  console.log(res.data);
          this.list = res.data
          let BMap = this.BMap;
          let map = this.map;
          let e = 1;
          this.handler({ BMap, map }, e);
    },
    fn(name){
          this.text = name
          if(this.text === '案件'){
            this.datas = [];
            this.datass = [];
            this.gridColor = [];
            this.checkDingweiList=[]
             this.zoom = 13
          }else if(this.text === '网格'){
            this.checkDingweiList=[]
            this.list = []
            // this.zoom = 14
          }else if(this.text === '定位'){
            this.datas = [];
            this.datass = [];
            this.gridColor = [];
            this.list = []
          }
          let BMap = this.BMap;
          let map = this.map;
          let e = 1;
          this.handler({ BMap, map }, e);
    },
    async handleNodeClick(data) {
     
      // console.log(data,'data');

      if(data.nodeTag === 'street'){  
        this.zoom = 15
      }else if(data.nodeTag === 'top'){
        this.zoom = 13
      //  console.log();
      }else if(data.nodeTag === 'community'){
        this.zoom = 16
      }else if (data.nodeTag=='user'){
        this.zoom=17
      }
      // console.log( this.datas)
  
      this.datas = [];
      this.datass = [];
      this.gridColor = [];
      // console.log(data);
      let BMap = this.BMap;
      let map = this.map;
      let e = 1;
      // console.log(this.datas,this.datass,this.gridColor);
      const res = await getpianqu(data.nodeId, data.nodeTag);
      this.datas = res.data
      // console.log(this.datas,'datas');
      // console.log(data, 'data')
          // console.log(this.datas,'datas');
      // console.log(this.datas[0].gridPointList[0].lng);
      // console.log(this.datas[0].gridPointList[0].lat);
      this.datas.forEach((item) => {
        this.datass.push(item.gridPointList);
        this.gridColor.push(item.gridColor);
      });
      // console.log(this.gridColor);
      //  console.log(this.datass);
      // console.log(data.nodeId,data.nodeTag);
      // console.log(res.data);
      // console.log(2122222)
      this.lng =  this.datas.length>0? this.datas[0].gridPointList[0].lng : 109.88522856018068; //维度
      this.lat =this.datas.length>0? this.datas[0].gridPointList[0].lat: 40.59079262612488; //经度
      this.handler({ BMap, map }, e);
    },
    // async getpianqu (){
    //   const res = await getpianqu(data.nodeId, data.nodeTag);
    // },
    onMouseOver() {
      this.show = true;
      clearTimeout(this.timer);
    },
    onMouseOut() {
      this.timer = setTimeout(() => {
        this.show = false;
      }, 3000);
    },
    test(e) {
      // console.log(e)
      let BMap = this.BMap;
      let map = this.map;
      if (e == 1) {
        this.handler({ BMap, map }, e);
        this.active = 1;
      } else if (e === 2) {
        this.handler({ BMap, map }, e);
        this.active = 2;
      } else {
        this.handler({ BMap, map }, e);
      }
    },
    btn() {
      let box = document.getElementById("box");
      console.log(box.style.height);
      if (box.style.height === "0px") {
        this.className = "el-icon-arrow-up";
        box.style.height = "500px";
      } else {
        this.className = "el-icon-arrow-down";
        box.style.height = "0";
      }
    },
    async handler({ BMap, map }, e) {
      // console.log(BMap,map)
      // console.log(1111)
      this.BMap = BMap;
      this.map = map;
      if (e && e == 1) map.setMapType(BMAP_HYBRID_MAP);
      else if (e === false) map.setMapType(BMAP_SATELLITE_MAP);
      else if (e && e == 2) map.setMapType(BMAP_NORMAL_MAP);
      else map.setMapType(BMAP_HYBRID_MAP);
      //这句使得初始为卫星图
      let that = this;
      // map.setMapType(BMAP_HYBRID_MAP);
      // map.setMapType(BMAP_NORMAL_MAP);

      //包头火车站 
        //  this.center.lng = 109.88522856018068; //维度
        //  this.center.lat = 40.59079262612488; //经度
     
          this.center.lng = this.lng //维度
          this.center.lat = this.lat //经度
      
      
      //  this.lng = this.datas[0].gridPointList[0].lng;
      //  this.lat =  this.datas[0].gridPointList[0].lat;
     
      // this.zoom = this.zoom;
      //  if(this.datas.length === 0){
      //   console.log('空');
      //  }
      //清除地图覆盖物（片区）
      map.clearOverlays();

      this.$nextTick(() => {
        //给地图添加片区
        let qq = [];
          // console.log(this.datas);
          // console.log(this.datass,'this.datass')
        this.datass.forEach((item) => {
          // console.log(item);
          let gr = [];
          item.forEach(item2 => {
            // console.log(item2);
            gr.push(new BMap.Point(item2.lng, item2.lat));
            //  console.log(gr, 'gr');
          });
          // this.zoom = parseInt(15 - (gr.length / 10))
          qq.push(gr);
        });
        // console.log(qq,'qq');
        qq.forEach((item, index) => {
          // console.log(123);
          var polygon = new BMap.Polygon([...item], {
            // strokeColor: this.gridColor[index],
            fillColor: this.gridColor[index],
            strokeWeight: 0.1,
            fillOpacity : 0.5,
          });
          map.addOverlay(polygon);
        });
       

        //给覆盖物（片区）中心添加名字
        this.datass.forEach((item, index) => {
          let pointObj = calculateCenter(item);
          // console.log(pointObj);
          var point = new BMap.Point(pointObj.lng, pointObj.lat);
          var content = "";
          var label = new BMap.Label(content, {
            // 创建文本标注
            position: point, // 设置标注的地理位置
            // offset: new BMap.Size('-50%','-50%' ), // 设置标注的偏移量
          });
           label.setStyle({
             // 设置label的样式
             display: 'none',
             color: "#000",
             fontSize: "12px",
             border: "none",
             fontWeight: "700",
             backgroundColor: "rgba(255,255,255,0)",
           });
          label.setContent(`<div>
           <div>${this.datas[index].gridName}</div>
           </div>`);
          map.addOverlay(label);

          //监听地图缩放
          map.addEventListener("zoomend", function () {
            var level = this.getZoom();
            // console.log(level);
            if (level >= 15) {
              label.setStyle({
                // 设置label的样式
                display: 'block',
                color: "#000",
                fontSize: "12px",
                border: "none",
                fontWeight: "700",
                backgroundColor: "rgba(255,255,255,0)",
              });
            }else{
              label.setStyle({
                // 设置label的样式
                display: 'none',
                color: "#000",
                fontSize: "12px",
                border: "none",
                fontWeight: "700",
                backgroundColor: "rgba(255,255,255,0)",
              });
            }
          });
        });











        //  var point = new BMap.Point(109.97372, 42.769429);
        //  var content = "哈哈哈哈哈哈";
        //  var label = new BMap.Label(content, {
        //    // 创建文本标注
        //    position: point, // 设置标注的地理位置
        //     offset: new BMap.Size('-50%','-50%' ), // 设置标注的偏移量
        //  });
        //  map.addOverlay(label);



       //给地图添加案件标注
       this.list.forEach((item, index) => {
         let point = new BMap.Point(item.lng, item.lat)
         let myIcon = new BMap.Icon(
           require("../../assets/15定位.png"),
           new BMap.Size(35, 35)
         );
         let marker = new BMap.Marker(point, { icon: myIcon });
         map.addOverlay(marker);
         marker.addEventListener("click", function (e, i) {
              // console.log(e)
            let ress = that.list.filter((items) => {
              if (items.lat == e.currentTarget.Nv.lat) return items;
            });
            //  console.log(ress);
             layer.open({
               type: 2,
               content: `http://219.147.99.164:8082/servicecity/route/bigdata/list_case_log.html?reportCaseId=${ress[0].reportCaseId} `,
               area: ["60%", "70%"],
               title: "",
             });
          });
       });
   
       //给地图添加人员定位信息
       
       this.checkDingweiList.forEach((item, index) => {
         let point = new BMap.Point(item.lng, item.lat)
         let myIcon = new BMap.Icon(
           require("../../assets/14定位.png"),
           new BMap.Size(35, 35)
         );
        //  console.log('定位');
         let marker = new BMap.Marker(point, { icon: myIcon });
         map.addOverlay(marker);
         

         var points = new BMap.Point(item.lng, item.lat);
         var content = "啊哈哈哈哈哈";
         var label = new BMap.Label(content, {
           // 创建文本标注
            position: points, // 设置标注的地理位置
              // offset: new BMap.Size('50%','50%' ), // 设置标注的偏移量
         });
         let url = ''
         if(item.userAvatar){
            url = item.userAvatar
         }else{
          url= 'a762c26b-855d-426d-97f1-d2bb69fa1356'
         }
         label.setContent(`<div style="font-size: 14px; display: flex; justify-content: space-around;align-items: center;width:200px;height:50px;border-radius:50px; background-color:#008000;position: absolute; left: -18%;top: -100%;border:1px solid #fff;">
           <img src='http://219.147.99.164:8082/servicecity/route/file/downloadfile/true/${url}' style="width: 30px;height: 30px;">
           <div>
           <div>姓名：${item.userName}</div>
           <div>电话：${item.userPhone}</div>
          </div>
           </div>`);
            label.setStyle({
              // 设置label的样式
              width:'200px',
              height:'50px',
               color: "#fff",
              // fontSize: "14px",
               border: "none",
              backgroundColor: "rgba(255,255,255,0)",
              // borderRadius: '50px',
            });
         map.addOverlay(label);
       });



      });
    },
    getClickInfo(e) {
      // 创建地理编码实例
      const myGeo = new BMap.Geocoder();
      // 根据坐标逆解析地址
      myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), (result) => {
        // console.log(result, "result-->>>>");
        if (result) {
          this.address = result.address;
        }
      });
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
    },
    syncCenterAndZoom(e) {
      // console.log(e.target, "e.target-->>>>");
      const { lng, lat } = e.target.getCenter();
      this.zoom = e.target.getZoom();
    },
  },
};
</script>
  <style lang="scss" scoped>
.container6 {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  position: relative;
.dingwei-dialog{
  position: absolute;
  width: 200px;
  height: 40px;
  background-color: rgba(0,0,0,.5);
  left: 50%;
  top: 50%;
  color: #fff;
  font-size: 18px;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  line-height: 40px;
  border-radius: 20px;
}
  .checkssMap {
    position: absolute;
    top: 10px;
    right: 17px;
    display: flex;
    .el-checkbox {
      width: 60px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #000;
      position: absolute;
      border: 1px solid #000;
      border-radius: 3px;
      cursor: pointer;
      left: 0;
      bottom: -100%;
      background-color: #fff;
     
    }

    .actived {
      background-color: #8ea8e0;
    }
    div {
      width: 50px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: #fff;
      border: 1px solid #000;
      border-radius: 3px;
      cursor: pointer;
    }
  }

  /* border: 1px solid #00ffff; */
  .BaiDuMap {
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  #box {
    width: 300px;
    height: 500px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: height 1s;
    .top {
      height: 100%;
      display: flex;
      overflow: hidden;

      .content {
        width: 80%;
        height: 100%;
        overflow-y: scroll;
        background-color: #fff;
     
      }
      .btns {
        width: 20%;
        height: 100%;
        color: #fff;
        background-color: #2e323e;
        font-size: 14px;
        div {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 50px;
          text-align: center;
          cursor: pointer;
        }
      }
      .active {
        background-color: #5786e7;
        
      }
    }

    #btn {
      width: 50px;
      height: 20px;
      position: absolute;
      bottom: -20px;

      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
      
    }
  }
}
</style>
  <style>
.anchorBL {
  display: none;

}
.BMap_stdMpCtrl {
  display: none;
}
.ui_city_change {
  display: none;
}
.anchorundefined {
  display: none;
}
</style>