<template>
  <div class="drawToolBox">
    <div class="drawIcon" @click="toolShow = !toolShow">
      <img :src="require('@/utils/plotUtil/img/arrow.png')" alt />
      标绘
    </div>
    <transition name="fade">
      <div class="drawTool" v-if="toolShow">
        <h2>
          态势标绘
          <span @click="toolShow = !toolShow">&times;</span>
        </h2>
        <div id="menu">
          <div class="menu_type">
            <ul>
              <li v-for="(i, index) in menuType" :key="index" :class="{ active: index == inde }" @click="inde = index">
                <div class="menu_img">
                  <img :src="i.imgSrc" alt />
                </div>
                <div class="menu_txt">{{ i.txt }}</div>
              </li>
              <li
                @click="
                  clearCurrFeature();
                  inde = 4;
                "
              >
                <div class="menu_img">
                  <img :src="require('@/utils/plotUtil/img/clear.png')" alt />
                  <div class="menu_txt">清除</div>
                </div>
              </li>
              <!--<li @click="function(){inde = 5;}" :class="{'active': 5 == inde}">
                            <div class="menu_img">
                                <img :src="require('@/utils/plotUtil/img/move.png')" alt />
                                <div class="menu_txt">移动</div>
                            </div>
                        </li>-->
              <li @click="inde = 6" :class="{ active: 6 == inde }">
                <div class="menu_img">
                  <img :src="require('@/utils/plotUtil/img/qita.png')" alt />
                  <div class="menu_txt">其他</div>
                </div>
              </li>
            </ul>
          </div>
          <div class="menuSonType" v-show="inde == 0">
            <button type="button" @click="activate('MARKER')" :class="{ act: 'MARKER' == TYPE }" style="padding-top:5px">点</button>
          </div>
          <div class="menuSonType" v-show="inde == 1">
            <button type="button" @click="activate('CIRCLE')" :class="{ act: 'CIRCLE' == TYPE }">圆</button>
            <button type="button" @click="activate('ELLIPSE')" :class="{ act: 'ELLIPSE' == TYPE }">椭圆</button>
            <button type="button" @click="activate('LUNE')" :class="{ act: 'LUNE' == TYPE }">弓形</button>
            <button type="button" @click="activate('SECTOR')" :class="{ act: 'SECTOR' == TYPE }">扇形</button>
            <button type="button" @click="activate('CLOSED_CURVE')" :class="{ act: 'CLOSED_CURVE' == TYPE }">曲线面</button>
            <button type="button" @click="activate('POLYGON')" :class="{ act: 'POLYGON' == TYPE }">多边形</button>
            <button type="button" @click="activate('RECTANGLE')" :class="{ act: 'RECTANGLE' == TYPE }">矩形</button>
            <button type="button" @click="activate('FREEHAND_POLYGON')" :class="{ act: 'FREEHAND_POLYGON' == TYPE }">自由面</button>
            <button type="button" @click="activate('GATHERING_PLACE')" :class="{ act: 'GATHERING_PLACE' == TYPE }">聚集地</button>
          </div>
          <div class="menuSonType" v-show="inde == 2">
            <button type="button" @click="activate('DOUBLE_ARROW')" :class="{ act: 'DOUBLE_ARROW' == TYPE }">钳击</button>
            <button type="button" @click="activate('STRAIGHT_ARROW')" :class="{ act: 'STRAIGHT_ARROW' == TYPE }">直箭头</button>
            <button type="button" @click="activate('FINE_ARROW')" :class="{ act: 'FINE_ARROW' == TYPE }">细直箭头</button>
            <button type="button" @click="activate('ASSAULT_DIRECTION')" :class="{ act: 'ASSAULT_DIRECTION' == TYPE }">突击方向</button>
            <button type="button" @click="activate('ATTACK_ARROW')" :class="{ act: 'ATTACK_ARROW' == TYPE }">进攻方向</button>
            <button type="button" @click="activate('TAILED_ATTACK_ARROW')" :class="{ act: 'TAILED_ATTACK_ARROW' == TYPE }">进攻方向（尾）</button>
            <button type="button" @click="activate('SQUAD_COMBAT')" :class="{ act: 'SQUAD_COMBAT' == TYPE }">分队战斗行动</button>
            <button type="button" @click="activate('TAILED_SQUAD_COMBAT')" :class="{ act: 'TAILED_SQUAD_COMBAT' == TYPE }">分队战斗行动（尾）</button>
          </div>
          <div class="menuSonType" v-show="inde == 3">
            <button type="button" @click="activate('ARC')" :class="{ act: 'ARC' == TYPE }">弧线</button>
            <button type="button" @click="activate('CURVE')" :class="{ act: 'CURVE' == TYPE }">曲线</button>
            <button type="button" @click="activate('POLYLINE')" :class="{ act: 'POLYLINE' == TYPE }">折线</button>
            <button type="button" @click="activate('FREEHAND_LINE')" :class="{ act: 'FREEHAND_LINE' == TYPE }">自由线</button>
          </div>
          <div class="menuSonType" v-show="inde == 6">
            <button type="button" @click="plotOperator('moveUp')" :class="{ act: 'moveUp' == TYPE }">上移</button>
            <button type="button" @click="plotOperator('moveDown')" :class="{ act: 'moveDown' == TYPE }">下移</button>
            <button type="button" @click="plotOperator('setToTop')" :class="{ act: 'setToTop' == TYPE }">置顶</button>
            <button type="button" @click="plotOperator('setToBottom')" :class="{ act: 'setToBottom' == TYPE }">置底</button>
            <button type="button" @click="plotOperator('clearFeatures', true)" :class="{ act: 'clearFeatures' == TYPE }">全部清除</button>
          </div>
          <div class="styleBox" v-if="op_feature && featureStyle.image">
            <img
              src="@/assets/flag.png"
              alt
              width="50px"
              @click="
                featureStyle.image.icon = { src: require('../assets/flag.png'), scale: 0.5 };
                setStyle();
              "
            />
            <img
              src="@/assets/start.png"
              alt
              width="20px"
              @click="
                featureStyle.image.icon = { src: require('../assets/start.png'), scale: 1 };
                setStyle();
              "
            />
            <img
              src="@/assets/mid.png"
              alt
              width="20px"
              @click="
                featureStyle.image.icon = { src: require('../assets/mid.png'), scale: 1 };
                setStyle();
              "
            />
            <img
              src="@/assets/end.png"
              alt
              width="20px"
              @click="
                featureStyle.image.icon = { src: require('../assets/end.png'), scale: 1 };
                setStyle();
              "
            />
          </div>
          <div class="styleBox" v-if="op_feature">
            <p v-if="featureStyle.image && featureStyle.image.icon.scale">
              图标尺寸:
              <input type="number" v-model="featureStyle.image.icon.scale" @input="setStyle()" />
            </p>
            <p v-if="featureStyle.stroke && featureStyle.stroke.color">
              线条颜色:
              <input type="color" v-model="featureStyle.stroke.color" @change="setStyle()" />
            </p>
            <p v-if="featureStyle.stroke && featureStyle.stroke.width">
              线条宽度:
              <input type="number" v-model="featureStyle.stroke.width" @input="setStyle()" />
            </p>
            <p v-if="featureStyle.fill && featureStyle.fill.color">
              填充颜色:
              <span
                class="coRgba coGreen"
                @click="
                  featureStyle.fill.color = 'rgba(0, 255,0, 0.4)';
                  setStyle();
                "
              ></span>
              <span
                class="coRgba coBlue"
                @click="
                  featureStyle.fill.color = 'rgba(0, 0, 255, 0.4)';
                  setStyle();
                "
              ></span>
              <span
                class="coRgba coPurple"
                @click="
                  featureStyle.fill.color = 'rgba(255, 3, 236, 0.4)';
                  setStyle();
                "
              ></span>
              <span
                class="coRgba coRed"
                @click="
                  featureStyle.fill.color = 'rgba(255, 3, 3, 0.4)';
                  setStyle();
                "
              ></span>
            </p>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import "ol/ol.css";
import { Map, View } from "ol";
import { OverviewMap, defaults } from "ol/control";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat, toLonLat } from "ol/proj";
import olPlot from "@/utils/plotUtil/index.js";

@Component({
  components: {},
})
export default class Home extends Vue {
  @Prop(Object) MAP;

  @Provide() inde = null;
  @Provide() TYPE = null;
  @Provide() toolShow = false;
  @Provide() menuType = [
    {
      imgSrc: require("@/utils/plotUtil/img/flag.png"),
      txt: "点标",
    },
    {
      imgSrc: require("@/utils/plotUtil/img/circle.png"),
      txt: "面标",
    },
    {
      imgSrc: require("@/utils/plotUtil/img/arrow.png"),
      txt: "箭头",
    },
    {
      imgSrc: require("@/utils/plotUtil/img/line.png"),
      txt: "线标",
    },
    // {
    //   imgSrc: require("@/utils/plotUtil/img/clear.png"),
    //   txt: "清除",
    // },
    // {
    //   imgSrc: require("@/utils/plotUtil/img/move.png"),
    //   txt: "移动",
    // },
    // {
    //   imgSrc: require("@/utils/plotUtil/img/qita.png"),
    //   txt: "其他",
    // },
  ];
  @Provide() op_feature = null;
  @Provide() op_layer;
  @Provide() featureStyle = {
    fill: "",
    stroke: "",
  };
  @Watch("featureStyle") change(newVal) {}
  activate(type, zindex) {
    let that = this;
    that.op_feature = null;
    that.TYPE = type;
    that.op_layer.addFeature(olPlot.PlotTypes[type]);
  }
  //其他操作
  plotOperator(method, no_need_feature) {
    this.TYPE = method;
    console.log(this.op_feature, !this.op_feature);
    if (!this.op_feature) {
      alert("请先选择一个标绘图元");
      return;
    }
    this.op_layer[method](this.op_feature);
    if (method == "clearFeatures") this.op_feature = null;
  }
  //清除当前标绘
  clearCurrFeature() {
    if (!this.op_feature) {
      alert("请先选择一个标绘图元！");
      return;
    }
    this.op_layer.removeFeature(this.op_feature);
    this.op_feature = null;
  }
  //设置样式
  setStyle() {
    if (!this.op_feature) {
      alert("请先选择一个标绘图元");
      return;
    }
    this.op_feature.setStyle(this.featureStyle);
  }
  toggleType(key, evt) {
    console.log(key, evt);
  }
  mounted() {
    let that = this;
    that.op_layer = new olPlot.PlottingLayer(that.MAP);
    //激活绘图工具时
    that.op_layer.on(olPlot.FeatureOperatorEvent.ACTIVATE, function (e) {
      that.op_feature = e.feature_operator;
      //获取当前图形样式
      that.featureStyle = that.op_feature.getStyle();
    });
    //绘制完成时
    that.op_layer.on(olPlot.FeatureOperatorEvent.DEACTIVATE, function (e) {
      that.TYPE = null;
    });
  }
}
</script>

<style lang="scss">
#menu .menuSonType:nth-child(3) {
  @for $i from 1 through 9 {
    button:nth-child(#{$i}) {
      background: url("../assets/tsicon/tsicon0#{$i}.png") top center #fff no-repeat;
    }
  }
}
#menu .menuSonType:nth-child(4) {
  @for $i from 1 through 8 {
    button:nth-child(#{$i}) {
      background: url("../assets/tsicon/tsicon#{$i + 9}.png") top center #fff no-repeat;
    }
  }
}
#menu .menuSonType:nth-child(5) {
  @for $i from 1 through 4 {
    button:nth-child(#{$i}) {
      background: url("../assets/tsicon/tsicon#{$i + 17}.png") top center #fff no-repeat;
    }
  }
}
#menu .menuSonType:nth-child(6){
    button{
    padding-top: 5px;
    }
}
#menu .menuSonType button {
  background-size: auto 30px !important;
  padding-top: 30px;
  border: 1px solid #0c59a3;
  box-sizing: border-box;
  border-radius: 3px;
}
</style>
<style>
.drawToolBox {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.drawTool {
  background: #fff;
  border: 1px solid #1b944b;
  width: 450px;
  position: absolute;
  right: 3em;
  top: 0;
}

.drawTool h2 {
  background: #1b5194;
  color: white;
  margin: 0;
  padding: 5px;
  text-align: left;
  font-weight: normal;
  font-size: 1.1em;
}

.drawTool h2 span {
  font-size: 20px;
  float: right;
  cursor: pointer;
  width: 20px;
}

.drawTool #menu {
  padding: 10px;
}

.menu_type {
}

.menu_type ul {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.menu_type ul li {
  text-align: center;
  font-size: 13px;
  display: block;
  padding: 5px;
  border: 2px solid #cfe1d6;
  border-right: none;
  width: 45px;
  height: 45px;
  cursor: pointer;
}

.menu_type ul li.active {
  background-color: #e2e2e2;
}

.menu_type ul li:last-child {
  border-right: 2px solid #cfe1d6;
}

.menu_type ul li img {
  width: 30px;
  height: 30px;
}

.menu_img {
  height: 30px;
}

.menu_txt {
  height: 15px;
  line-height: 15px;
}

.menuSonType {
  background: rgba(0, 0, 0, 0.6);
  padding: 10px;
  border-radius: 5px;
  position: relative;
  margin-top: 10px;
}

.menuSonType:before {
  content: "";
  width: 0;
  height: 0;
  border-width: 10px;
  display: block;
  overflow: hidden;
  border-color: transparent;
  border-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
}

.menuSonType button {
  background: #fff;
  background: #fff;
  margin: 5px;
  outline: none;
  border: none;
  font-size: 16px;
  padding: 5px 8px;
}

.menuSonType button.act {
    box-shadow: 0 0 8px 3px #5db7f7;
}

/*画图时的提示文字*/
.se-tooltip {
  background: rgba(255, 255, 255, 0.8);
  border: 1px dashed red;
}

.colorFan {
  display: inline-block;
  width: 10px;
  height: 10px;
}

.styleBox {
  overflow: hidden;
  border: 1px solid #e2e0e0;
  padding: 10px;
  margin-top: 5px;
  border-radius: 5px;
}

.styleBox .stit {
  font-size: 16px;
  text-align: center;
}

.styleBox p {
  margin: 0;
  line-height: 30px;
  display: inline-block;
  padding: 5px 2px;
  font-size: 14px;
  box-sizing: border-box;
  text-align: center;
}

.styleBox p input {
  width: 40px;
  height: 20px;
}

.styleBox button {
  display: block;
  background: linear-gradient(#34a5f8, #088ef0);
  color: #fff;
  outline: none;
  border: none;
  padding: 6px 10px;
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  margin: 0 auto;
  font-size: 14px;
  border-radius: 3px;
}

/* <span class="coRgba coGreen"></span>
          <span class="coRgba coBlue"></span>
          <span class="coRgba coPurple"></span>
          <span class="coRgba coRed"></span> */
.coRgba {
  display: inline-block;
  margin: 0 3px;
  padding: 8px;
  cursor: pointer;
}

.coGreen {
  background: #0bd30b;
}

.coBlue {
  background: blue;
}

.coPurple {
  background: #e107e1;
}

.coRed {
  background: red;
}

.styleBox > img {
  padding: 10px;
}

.styleBox > img:nth-child(1) {
  padding: 5px;
  cursor: pointer;
}

.p-helper-control-point-div {
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  background-color: #ff0;
  opacity: 0.8;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
}

.drawIcon {
  width: 2em;
  padding: 5px;
  right: 1.2em;
  line-height: 1;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #2b84ff;
  font-size: 14px;
  cursor: pointer;
}

.drawIcon img {
  width: 2em;
}
</style>
