<template>
  <div :class="['featured-areas', !isCollapse && 'featured-areas1']" v-loading="fullLoading">
    <menu-edit
      :isCollapse="isCollapse"
      @draw-polygon="drawPolygon"
      @set-info="setLayerInfo"
      @set-form="setForm"
      ref="menuEdit"
      @getLoading="getLoading"
    />
    <div class="map-box">
      <b-map-polygon-editor ref="bmap" :layerInfo="layerInfo" @refreshApprove="getWaitApproveCount"/>
      <div class="icon-wrap" @click="handleCollapse">
        <i class="el-icon-arrow-left" v-if="isCollapse"></i>
        <i class="el-icon-arrow-right" v-else></i>
      </div>
    </div>
  </div>
</template>
<script>
import MenuEdit from "./menu-edit.vue";
import BMapPolygonEditor from "@/map/BMapPolygonEditor.vue";

export default {
  name: "FeaturedAreas",
  components: {
    MenuEdit,
    BMapPolygonEditor,
    MenuEdit,
  },
  data() {
    return {
      layerInfo: {},
      isCollapse: true,
      fullLoading:false,
    };
  },
  mounted() {},
  methods: {
    getLoading(bool){
      this.fullLoading=bool;
      console.log(bool,'fromPage')
    },
    getWaitApproveCount(){
      this.$refs.menuEdit.getWaitApproveCount();
    },
    // 绘制多边形覆盖物
    drawPolygon(data, showModal) {
      // console.log(data,'2313')
      this.$refs.bmap.showWKT(data, showModal);
    },
    setForm(data) {
      this.$refs.bmap.setForm(data);
    },
    // 设置图层(第一级区域)信息
    setLayerInfo(info) {
      // console.log(info,'info')
      this.layerInfo = info;
    },
    /**
     * 隐藏左侧菜单
     */
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>
<style lang="scss" scoped>
.featured-areas {
  height: calc(100vh - 225px);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  .map-box {
    width: calc(100% - 250px);
    position: relative;
    transition: all 0.2s;
  }
}
.featured-areas1 {
  .map-box {
    width: 100%;
    position: relative;
  }
}
.icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -20px;
  background-color: rgba(72, 134, 248, 0.7);
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  padding-left: 7px;
  cursor: pointer;
  transition: all 0.2 ease;
  z-index: 100;
}
.icon-wrap:hover {
  background-color: rgba(72, 134, 248, 1);
}
</style>