<template>
  <div>
    <div class="toolsboxbar pointer" @click="toolBoxShow = true">
      <i class="el-icon-news"></i>态势标绘
    </div>
    <transition name="fade" mode="out-in">
      <div class="toolsbox" v-if="toolBoxShow">
        <h3>
          标绘工具
          <span class="fr pointer">
            <i class="el-icon-close" @click="toolBoxShow = false"></i>
          </span>
        </h3>
        <ul class="toolBar">
          <li @click="toggleTool('drawMarker')" :class="{'cl': tabAct == 'drawMarker'}">
            <i class="iconfont icon-hongqi-svg"></i>标记
          </li>
          <li @click="toggleTool('drawPolyline')" :class="{'cl': tabAct == 'drawPolyline'}">
            <i class="iconfont icon-zhexian"></i>线段
          </li>
          <li @click="toggleTool('drawCircle')" :class="{'cl': tabAct == 'drawCircle'}">
            <i class="iconfont icon-yuanxing"></i>圆形
          </li>
          <li @click="toggleTool('drawPolygon')" :class="{'cl': tabAct == 'drawPolygon'}">
            <i class="iconfont icon-duobianxing"></i>多边形
          </li>
          <li @click="toggleTool('drawRule')" :class="{'cl': tabAct == 'drawRule'}">
            <i class="iconfont icon-ceju"></i>测距
          </li>
          <li @click="toggleTool('drawMeasureArea')" :class="{'cl': tabAct == 'drawMeasureArea'}">
            <i class="iconfont icon-cemianji"></i>面积
          </li>
          <li class="bjtx" @click="editOverlays()">编辑图形</li>
          <li class="bjtx" @click="endEditOverlays()">关闭编辑</li>
          <li class="bjtx" @click="delOverlays()">删除图形</li>
          <li class="bjtx" @click="endOverlays()">结束绘制</li>
          <li class="bjtx" @click="delAllOverlays()">清除所有</li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";

@Component({
  components: {},
})
export default class mouseTool extends Vue {
  @Prop(Object) MAP!:Object;
  @Prop() toolobj!:any;
  @Prop(Object) mouseTool!:Object;

  @Provide() editorArr: any = [];
  @Provide() tabAct: any = "";
  @Provide() toolBoxShow: boolean = false;
    toggleTool(wd: any) {
    let that = this;
    that.tabAct = wd;
    that.toolobj[wd]();
  }
  getAllDrawLays() {
    let that = this,
      laysArr = that.MAP.getAllOverlays(),
      CircleArr: any = [],
      MarkerArr: any = [],
      PolylineArr: any = [],
      PolygonArr: any = [];
    laysArr.forEach((ele: any) => {
      if (ele.CLASS_NAME == "AMap.Circle") CircleArr.push(ele);
      if (ele.CLASS_NAME == "AMap.Polygon") PolygonArr.push(ele);
      if (ele.CLASS_NAME == "AMap.Polyline") PolylineArr.push(ele);
      if (ele.CLASS_NAME == "AMap.Marker" && ele.getzIndex() == 9999) {
        MarkerArr.push(ele);
      }
    });
    let allDrawLays = [
      ...CircleArr,
      ...MarkerArr,
      ...PolylineArr,
      ...PolygonArr,
    ];
    return {
      allDrawLays,
      CircleArr,
      MarkerArr,
      PolylineArr,
      PolygonArr,
    };
  }
  editOverlays() {
    let that = this,
      layobj = that.getAllDrawLays(),
      polyArr = [...layobj.PolylineArr, ...layobj.PolylineArr],
      type = that.tabAct.substring(4);
    switch (type) {
      case "Circle":
        if (layobj.CircleArr.length > 0)
          layobj.CircleArr.forEach((ele: any) => {
            let editor = new AMap.CircleEditor(that.MAP, ele);
            editor.open();
            that.editorArr.push(editor);
          });
        break;
      case "Polyline":
        if (layobj.PolylineArr.length > 0)
          layobj.PolylineArr.forEach((ele: any) => {
            let editor = new AMap.PolyEditor(that.MAP, ele);
            editor.open();
            that.editorArr.push(editor);
          });
        break;
      case "Polygon":
        if (layobj.PolygonArr.length > 0)
          layobj.PolygonArr.forEach((ele: any) => {
            let editor = new AMap.PolyEditor(that.MAP, ele);
            editor.open();
            that.editorArr.push(editor);
          });
        break;
    }
  }
  alertFun(len: number, type: string, isedit: boolean) {
    let stype = "",
      html = "";

    switch (type) {
      case "Circle":
        stype = "圆形";
        break;
      case "Polyline":
        stype = "线段";
        break;
      case "Polygon":
        stype = "多边形";
        break;
    }
    for (let i = 0; i < len; i++) {
      let lena = i + 1;
      if (isedit)
        html += `<input name="in" type="radio" onClick="window.clickRadioLays(${lena})"/>第${lena}个${stype}`;
      else
        html += `<input name="in" type="radio" onClick="window.delRadioLays(${lena})"/>第${lena}个${stype}`;
    }
    this.$alert(html, "选择", {
      closeOnClickModal: true,
      showConfirmButton: false,
      dangerouslyUseHTMLString: true,
    });
  }
  endEditOverlays() {
    let that = this;
    if (that.editorArr.length > 0) {
      that.editorArr.forEach((ele: any) => {
        ele.close();
      });
    }
  }
  delAllOverlays() {
    let that = this;
    that.mouseTool.close(true);
    that.tabAct = "";
  }
  endOverlays() {
    let that = this;
    that.mouseTool.close(false);
    that.tabAct = "";
  }
  delOverlays() {
    let that = this,
      layobj: any = that.getAllDrawLays(),
      html = "",
      type = that.tabAct.substring(4),
      len = layobj[type + "Arr"] ? layobj[type + "Arr"].length : "";
    (window as any).delRadioLays = function (num: any) {
      that.MAP.remove(layobj[type + "Arr"][num - 1]);
    };
    if (len > 0) that.alertFun(len, type, false);
  }
  created() {
   
  }
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
.toolsboxbar {
  position: absolute;
  right: 85px;
  top: 12px;
  z-index: 2;
  border: 1px solid blue;
  background: white;
  color: blue;
  padding: 3px 5px;
  font-size: medium;
  border-radius: 3px;
  box-shadow: 1px 1px 3px 1px #a09e9e;
}
.toolsbox {
  width: 155px;
  position: absolute;
  right: 80px;
  top: 12px;
  z-index: 2;
  background: #fff;
  h3 {
    text-align: left;
    margin: 0;
    line-height: 1.8;
    background: #000;
    color: white;
    padding: 0 5px;
  }
}
.toolBar {
  overflow: hidden;
  display: flex;
  margin: 0;
  padding: 0;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5px;
  box-sizing: border-box;
  li {
    display: inline-block;
    border: 1px solid #333;
    padding: 2px;
    border-radius: 3px;
    cursor: pointer;
    min-width: 60px;
    text-align: center;
    margin: 2px 0;
    &.cl {
      background: #0000ff;
      color: white;
    }
    &.bjtx {
      &:hover {
        background: #08785c;
        color: white;
      }
    }
    .clr {
      background: #08785c;
      color: white;
    }
  }
}
</style>