<template>
  <div class="map-tool">
    <div>
      <div class="MeasuringTools-box">
        <span class="MeasuringTools-box-span">{{ $t('message.mapTool.measureTool') }}</span>
        <div class="MeasuringTools-box-samll">
          <button :class="isMeasurethedistance? 'MeasuringTools-box-botton': 'MeasuringTools-box-change'"
                  @click="Measurethedistance()">
            <span>{{ $t('message.mapTool.measureDistance') }}</span>
          </button>
          <button :class="isMeasuringarea? 'MeasuringTools-box-botton': 'MeasuringTools-box-change'"
                  @click="Measuringarea">
            <span>{{ $t('message.mapTool.measureArea') }}</span>
          </button>
        </div>
      </div>

      <div class="MeasuringTools-bottom" v-show="isMeasuringarea">
        <span class="MeasuringTools-box-span">{{ $t('message.mapTool.drawingArea') }}</span>
        <span class="MeasuringTools-box-span" style="margin-left: 1.25rem">{{ $t('message.mapTool.shape') }}</span>
        <div class="commen">
          <img @click="Polygon"
               src="../../../public/drawArea/duobianxing.png"
               :class="PolygonChecked ? 'checked-class' : ''"
               alt=""/>
        </div>
        <div class="commen">
          <img @click="rectangle"
               src="../../../public/drawArea/juxing.png"
               :class="rectangleChecked ? 'checked-class' : ''"
               alt=""/>
        </div>
        <div type="info" class="commen">
          <img @click="circle"
               src="../../../public/drawArea/yuan.png"
               :class="circleChecked ? 'checked-class' : ''"
               alt=""/>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator'
import storeUtil from '@/util/store'

@Component({})
export default class MapTool extends Vue {
  private visible = false
  private isMeasurethedistance = false
  private isMeasuringarea = false
  private PolygonChecked = false
  private rectangleChecked = false
  private circleChecked = false
  private map: any = storeUtil.getMapInstance()

  @Watch('$store.state.mapToolDialog', {immediate: true})
  setData(data: any) {
    if (data) {
      this.visible = data.show
    }
  }

  public mounted() {
    (window as any).deleteClick = this.deleteClick
  }

  /**
   * 测距离
   * @constructor
   * @private
   */
  private Measurethedistance() {
    this.isMeasurethedistance = true
    this.isMeasuringarea = false;
    (storeUtil.getMapFun() as any).addRanging(storeUtil.getMapInstance(), 'radius')
  }

  private Measuringarea() {
    this.isMeasuringarea = true
    this.isMeasurethedistance = false
  }

  /**
   * 绘制多边形
   * @constructor
   * @private
   */
  private Polygon() {
    this.PolygonChecked = true
    this.circleChecked = false
    this.rectangleChecked = false;
    (storeUtil.getMapFun() as any).addPolygon(storeUtil.getMapInstance())
  }

  /**
   * 绘制矩形
   * @private
   */
  private rectangle() {
    this.PolygonChecked = false
    this.circleChecked = false
    this.rectangleChecked = true;
    (storeUtil.getMapFun() as any).addRectangle(storeUtil.getMapInstance())
  }

  /**
   * 绘制圆形
   * @private
   */
  private circle() {
    this.PolygonChecked = false
    this.circleChecked = true
    this.rectangleChecked = false;
    (storeUtil.getMapFun() as any).addCircle(storeUtil.getMapInstance())
  }

  private deleteClick(deleteid: any, type: any) {
    (storeUtil.getMapFun() as any).backVector(type).forEachFeature((n: any) => {
      if (n.ol_uid === deleteid.split('-')[1]) {
        (storeUtil.getMapFun() as any).backVector(type).removeFeature(n)
      }
    })
    this.map
      .getOverlays()
      .getArray()
      .forEach((item: any) => {
        if (item.values_.element.getAttribute('id') === deleteid.split('-')[1]) {
          this.map.removeOverlay(item)
        }
      })
  }

  private cancel() {
    (storeUtil.getMapFun() as any).delAllMapTool()
  }
}
</script>

<style lang="scss" scoped>
.map-tool {
  ::v-deep .el-dialog__body {
    display: flex !important;
    align-items: center !important;
    min-height: 6.25rem !important;
    max-height: 10.625rem !important;
    height: auto !important;
  }
}

::v-deep .el-dialog {
  position: absolute;
  top: 6.25rem;
  right: 1.25rem
}

.MeasuringTools-box {
  display: flex;
  align-items: center;

  .MeasuringTools-box-samll {
    margin-left: 1.875rem;
    display: flex;
    align-items: center;

    .MeasuringTools-box-span {
      font-size: 0.875rem;
      font-weight: 500;
      color: #333333;
    }

    .MeasuringTools-box-botton {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background-color: #2c469b;
      width: 7.5625rem;
      border: #2c469b 0.0625rem solid;
      color: #ffffff;
      text-align: center;
      box-sizing: border-box;
      outline: 0;
      margin: 0 1.25rem;
      transition: 0.1s;
      font-weight: 500;
      padding: 0.75rem 1.25rem;
      font-size: 0.875rem;
      border-radius: 0.1875rem;
    }

    .MeasuringTools-box-change {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background-color: #ffffff;
      width: 7.5625rem;
      border: #2c469b 0.0625rem solid;
      color: #2c469b;
      text-align: center;
      box-sizing: border-box;
      outline: 0;
      margin: 0 1.25rem;
      transition: 0.1s;
      font-weight: 500;
      padding: 0.75rem 1.25rem;
      font-size: 0.875rem;
      border-radius: 0.1875rem;
    }

    button {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
  }
}

.MeasuringTools-bottom {
  display: flex;
  align-items: center;
  margin-top: 1.25rem;
  height: 2.5rem;
}

.MeasuringTools-bottom > div {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 1.25rem;
  background: #eeeeee;
  display: flex;
  align-items: center;
  float: left;
}

.MeasuringTools-bottom > .commen {
  display: flex;
  align-items: center;
  justify-content: center;
}

.MeasuringTools-bottom > div > img {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.checked-class {
  background: #2c469b56 !important;
}
</style>
