<template>
  <div class="mapwrap">
    <el-dialog
      title="绘制厂区边界"
      :visible.sync="dialogTableVisible"
      :show-close="false"
      :close-on-click-modal="false"
      id="mapcnt"
    >
      <el-row class="lt">
        <el-button type="success" size="small" @click="starDrawBounds"
          ><i class="el-icon-edit"></i> 开始绘制</el-button
        >
        <el-button type="warning" size="small" @click="removeBounds"
          ><i class="el-icon-delete"></i> 清除绘制</el-button
        >
        <el-button type="primary" size="small" @click="confirmFun"
          >提交边界</el-button
        >
        <el-button size="small" @click="$emit('dialogcancelFunB')"
          >取消</el-button
        >
      </el-row>
      <el-row>
        <div id="mapContainerB" class="mapContainer">
          <Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search>
        </div>
      </el-row>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide, Prop } from "vue-property-decorator";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";

@Component({
  components: {
    Search,
  },
})
export default class DrawBounds extends Vue {
  @Provide() MAP: any;
  @Provide() Mutil: any;
  @Provide() mapLoadDone = false;

  @Prop(Boolean) dialogTableVisible!: Boolean;
  @Prop(String) boundary!: String;

  @Provide() Coordinates: any = [];
  @Provide() mapView: any = {
    center: "",
    zoom: "",
    polygoncoorArr: [],
  };
  @Provide() currSelectPolygon: any;
  starDrawBounds() {
    let that = this;
    that.Mutil.drawPloygon(null, function (feature: any, target: any) {
      //drawend 触发事件
      let currView = that.MAP.getView();
      that.mapView.center = currView.getCenter();
      that.mapView.zoom = currView.getZoom();
      let x = feature.getGeometry().getCoordinates({
        right: true,
      });
      that.mapView.polygoncoorArr.push(x);
    });
  }
  removeBounds() {
    let that = this;
    that.Mutil.removeSearchm("boundary");
    that.mapView = {
      center: "",
      zoom: "",
      polygoncoorArr: [],
    };
  }
  confirmFun() {
    let that = this;
    that
      .$confirm("确认提交厂区边界吗？", "提示", {
        type: "info",
      })
      .then(() => {
        that.$emit("drawconfirm", JSON.stringify(that.mapView));
        that.$emit("dialogcancelFunB");
      })
      .catch(() => {
        return;
      });
  }
  mounted() {
    let that = this;
    console.log( that.dialogTableVisible )
      that.$nextTick(() => {
        that.Mutil = new Mutil("mapContainerB");
        that.MAP = that.Mutil.MAP;
        that.mapLoadDone = true;
        if (that.boundary) {
          that.mapView = JSON.parse((that as any).boundary);
          that.Mutil.drawPloygon(JSON.parse((that as any).boundary));
        }
        that.Mutil.mapSelectBind((evt: any) => {
          if (evt.selected[0].getGeometryName == "Polygon") {
            that.currSelectPolygon = evt.selected[0];
          }
        });
      });
  }
}
</script>

<style lang="scss">
#mapcnt .el-dialog {
  width: 90% !important;
}

.el-cascader {
  width: 100%;
}

.lt .el-input {
  width: 180px;
  margin-right: 15px;
  display: inline-block;
}

.mapContainer {
  width: 100%;
  height: 450px;
  position: relative;
  margin-top: 10px;
  overflow: hidden;
}

.el-vue-amap-container {
  width: 100%;
  height: 100%;
}

.search-box {
  position: absolute !important;
  top: 10px;
  left: 10px;
}

#searchbar input {
  padding: 5px;
  border: 1px solid royalblue;
  border-radius: 5px;
  min-width: 150px;
}
</style>