<template>
  <div class="container3">
    <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 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>
</template>
  
<script>
import calculateCenter from "@/utils/calculateCenter.js";
import { getpianqu, getDituInfo } from "@/api/detailDitu";
export default {
  data() {
    return {
      // 地址信息
      address: null,
      center: { lng: 0, lat: 0 },
      //地图展示级别
      zoom: 12,
      mapType: ["BMAP_NORMAL_MAP", "BMAP_HYBRID_MAP"],
      datas: [],
      datass: [],
      gridColor: [],
      dituInfo: [],
      show:false,
      active:1,
      timer:null,
      BMap:null,
      map:null,
      checked: true,
    
    };
  },
  created(){
    this.getpianqu();
    this.getDituInfo();
  },
  methods: {
    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);
      }
    },
    async getDituInfo() {
      const res = await getDituInfo();
      // console.log(res.data);
      this.dituInfo = res.data;
    },
    async getpianqu() {
      const res = await getpianqu("", "top");
      this.datas = res.data;
      // console.log(data, 'data')
      // console.log(this.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.datas, "datas");
      // console.log(this.datass, "datass");
      // console.log(this.gridColor, "gridColor");
    },
    async handler({ BMap, map },e) {
      //这句使得初始为卫星图
      // await this.getDitu();
      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);


      await getpianqu();
      await getDituInfo();
      let that = this;
      // map.setMapType(BMAP_HYBRID_MAP);
      // map.setMapType(BMAP_NORMAL_MAP);
      this.center.lng = 109.839706; //维度
      this.center.lat = 40.608379; //经度
      this.zoom = this.zoom;

      // let arr = [
      //   new BMap.Point(109.97372, 42.769429),
      //   new BMap.Point(108.97372, 43.769429),
      //   new BMap.Point(107.97372, 41.769429),
      // ];
      map.clearOverlays();
      this.$nextTick(() => {
        let qq = [];
        // console.log(this.datass,'datass');
        this.datass.forEach((item) => {
          //  console.log(item,'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: 2,
            fillOpacity: 0.5,
            strokeColor:'#fff'
          });
          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: 'block',
             color: "#000",
             fontSize: "12px",
             border: "none",
             fontWeight: "700",
             backgroundColor: "rgba(255,255,255,0)",
           });
          label.setContent(`<div style="font-weight: 700;text-shadow:2px 2px 2px #fff;">
           <div>小区总数：${this.dituInfo[index].districtCount}</div>
           <div>人口总数：${this.dituInfo[index].populationCount}</div>
           </div>`);
          map.addOverlay(label);

          //监听地图缩放
          // map.addEventListener("zoomend", function () {
          //   var level = this.getZoom();
          //   console.log(level);
          //   if (level >= 13) {
          //     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)",
          //     });
          //   }
          // });
        });

        // this.list.forEach((item, index) => {
        //   var point = new BMap.Point(item.long, item.lat);
        //   var content = "";
        //   // var label = new BMap.Label(content, {
        //   //   // 创建文本标注
        //   //   position: point,
        //   //   offset: new BMap.Size(10, 20),
        //   // });
        //   let myIcon = new BMap.Icon(
        //     require("../../assets/案件小图标+.png"),
        //     new BMap.Size(35, 35)
        //   );
        //   let marker = new BMap.Marker(point, { icon: myIcon });
        //   marker.addEventListener("mouseover", function (e, i) {
        //     //鼠标移入事件
        //     // console.log(i, "i事件");
        //     that.text = item.text;
        //     that.show = true;
        //     that.test();
        //   });
        //   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://127.0.0.1/servicecity/route/bigdata/list_case_log.html?reportCaseId=${ress[0].reportCaseId} `,
        //       area: ["30%", "50%"],
        //       title: "",
        //     });
        //   });
        //   // map.addOverlay(label); // 将标注添加到地图中
        //   map.addOverlay(marker); // 将标注添加到地图中
        //   // label.setTitle("我是文本标注label");
        //   // label.setStyle({
        //   //   // 设置label的样式
        //   //   color: "#000",
        //   //   fontSize: "30px",
        //   //   border: "2px solid #1E90FF",
        //   // });
        // });
      });
    },
    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>
.container3 {
  width: 46.7708vw;
  height: 51.7204vh;
  position: relative;

  // border: 1px solid #00ffff;
  .checkssMap {
    position: absolute;
    top: 0;
    right: 0;
    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;
    }
  }
  .BaiDuMap {
    width: 46.7708vw;
    height: 51.7204vh;

    position: relative;
  }

  .text {
    // width: 200px;
    // height: 50px;
    padding: 0.5376vh 0.5208vw;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
</style>
<style>
.anchorBL {
  display: none;
}
/* .BMap_stdMpCtrl,
    .ui_city_change,
    .BMap_noprint{
      display: none;
    } */
.BMap_stdMpCtrl {
  display: none;
}
.ui_city_change {
  display: none;
}
.anchorundefined {
  display: none;
}
</style>