<template>
  <div class="page">
    <div class="tool">
      <img
        src="@/assets/xuanze_nor.png"
        alt=""
        style="width:22px;height:22px;margin:0px 40px 0px 30px;cursor:pointer"
        @click="xuanze(2)"
        v-if="showimg1==1"
      >
      <img
        src="@/assets/xuanze_pre.png"
        alt=""
        style="width:22px;height:22px;margin:0px 40px 0px 30px;cursor:pointer"
        @click="xuanze(1)"
        v-else-if="showimg1==2"
      >
      <img
        src="@/assets/kuangxuan_nor.png"
        alt=""
        style="width:22px;height:22px;margin-right:40px;cursor:pointer"
        @click="kuangxuan(2)"
        v-if="showimg2==1"
      >
      <img
        src="@/assets/kuangxuan_pre.png"
        alt=""
        style="width:22px;height:22px;margin-right:40px;cursor:pointer"
        @click="kuangxuan(1)"
        v-else-if="showimg2==2"
      >
      <img
        src="@/assets/pouqie_nor.png"
        alt=""
        style="width:22px;height:22px;margin-right:40px;cursor:pointer"
        @click="pouqie(2)"
        v-if="showimg3==1"
      >
      <img
        src="@/assets/pouqie_pre.png"
        alt=""
        style="width:22px;height:22px;margin-right:40px;cursor:pointer"
        @click="pouqie(1)"
        v-if="showimg3==2"
      >
      <div class="pouqie" v-if="showimg3==2">
        <div
          class="celiangitem"
          v-for="(item,index) in pouqieArr"
          :key="item"
          @click="longDissection(index)"
          :class="{active:index==selectDissectionIndex}"
        >{{item}}</div>
      </div>
      <img
        src="@/assets/celiang_nor.png"
        alt=""
        style="width:22px;height:22px;margin-right:40px;cursor:pointer"
        @click="celiang(2)"
        v-if="showimg4==1"
      >
      <img
        src="@/assets/celiang_pre.png"
        alt=""
        style="width:22px;height:22px;margin-right:40px;cursor:pointer"
        @click="celiang(1)"
        v-if="showimg4==2"
      >
      <div class="celiang" v-if="showimg4==2">
        <div
          class="celiangitem"
          v-for="(item,index) in dataatrr"
          :key="item"
          @click="changeMeasure(index)"
          :class="{active:index==selectindex}"
        >{{item}}</div>
      </div>
      <img
        src="@/assets/manyou_nor.png"
        alt=""
        style="width:22px;height:22px;margin-right:40px;cursor:pointer"
        @click="manyou(2)"
        v-if="showimg5==1"
      >
      <img
        src="@/assets/manyou_pre.png"
        alt=""
        style="width:22px;height:22px;margin-right:40px;cursor:pointer"
        @click="manyou(1)"
        v-if="showimg5==2"
      >
      <img
        src="@/assets/tuichuquanping_nor.png"
        alt=""
        style="width:22px;height:22px;margin-right:0px;cursor:pointer"
        @click="tuichuquanping(2)"
        v-if="showimg6==1"
      >
      <img
        src="@/assets/tuichuquanping_pre.png"
        alt=""
        style="width:22px;height:22px;margin-right:0px;cursor:pointer"
        @click="tuichuquanping(1)"
        v-if="showimg6==2"
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showimg1: 1,
      showimg2: 1,
      showimg3: 1,
      showimg4: 1,
      showimg5: 1,
      showimg6: 1,
      isActive: false,
      selectindex: 0,
      selectDissectionIndex: 9,
      fullscreen: false,
      dataatrr: [
        '测量距离',
        '限制X轴',
        '限制Y轴',
        '限制Z轴'
      ],
      pouqieArr: [
        '设置剖切',
        '隐藏剖切',
        '恢复剖切'
      ]
    };
  },
  components: {

  },
  methods: {
    changeMeasure(index) {
      const that = this;
      that.showimg4 = 1;
      that.selectindex = index;
      switch (index) {
      case 0:
        that.$emit('viewToolHandler', 'linearNull');
        break;
      case 1:
        that.$emit('viewToolHandler', 'leveling');
        break;
      case 2:
        that.$emit('viewToolHandler', 'linearZ');
        break;
      case 3:
        that.$emit('viewToolHandler', 'vertical');
        break;
      default :
        that.$emit('viewToolHandler', 'linearNull');
        break;
      }
    },
    longDissection(index) {
      const that = this;
      that.showimg3 = 1;
      that.selectDissectionIndex = index;
      switch (index) {
      case 0:
        that.$emit('viewToolHandler', 'showToggleClipBox');
        break;
      case 1:
        that.$emit('viewToolHandler', 'hideToggleClipBox');
        break;
      case 2:
        that.$emit('viewToolHandler', 'resetClipBox');
        break;
      default :
        that.$emit('viewToolHandler', 'resetClipBox');
        break;
      }
    },
    xuanze(num) {
      this.showimg1 = num;
      this.showimg2 = 1;
      this.showimg3 = 1;
      this.showimg4 = 1;
      this.showimg5 = 1;
      this.showimg6 = 1;
      this.$emit('viewToolHandler', 'select');
    },
    kuangxuan(num) {
      this.showimg1 = 1;
      this.showimg2 = num;
      this.showimg3 = 1;
      this.showimg4 = 1;
      this.showimg5 = 1;
      this.showimg6 = 1;
      console.log('============box', num);
      if (num === 2) {
        this.$emit('viewToolHandler', 'boxSelect');
      } else {
        this.$emit('viewToolHandler', 'cancle-boxSelect');
      }
    },
    pouqie(num) {
      this.showimg1 = 1;
      this.showimg2 = 1;
      this.showimg3 = num;
      this.showimg4 = 1;
      this.showimg5 = 1;
      this.showimg6 = 1;
      // this.$emit('viewToolHandler','toggleClip');
    },
    celiang(num) {
      this.showimg1 = 1;
      this.showimg2 = 1;
      this.showimg3 = 1;
      this.showimg4 = num;
      this.showimg5 = 1;
      this.showimg6 = 1;
      if (num === 1) {
        this.$emit('viewToolHandler', 'nomal-measure');
      } else {
        this.$emit('viewToolHandler', 'measure');
      }
    },
    manyou(num) {
      this.showimg1 = 1;
      this.showimg2 = 1;
      this.showimg3 = 1;
      this.showimg4 = 1;
      this.showimg5 = num;
      this.showimg6 = 1;
      if (num === 2) {
        this.$emit('viewToolHandler', 'move');
      } else {
        this.$emit('viewToolHandler', 'nomal-move');
      }
    },
    tuichuquanping(num) {
      this.showimg1 = 1;
      this.showimg2 = 1;
      this.showimg3 = 1;
      this.showimg4 = 1;
      this.showimg5 = 1;
      this.showimg6 = num;
      this.handleFullScreen();
    },
    handleFullScreen() {
      const element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    keyHandle() {

    }
  }

};
</script>

<style scoped>
.celiangitem {
  width: 100%;
  height: 40px;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
.active {
  color: #0057ff;
  background-color: #52585e;
}
.page {
  width: 390px;
  height: 54px;
}
.tool {
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  width: 390px;
  height: 54px;
  background-color: #2f343b;
  border-radius: 4px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  position: absolute;
}
.celiang {
  width: 100px;
  height: 172px;
  background-color: #2f343b;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
  opacity: 0.9;
  position: absolute;
  left: 177px;
  bottom: 70px;
  border-radius: 6px;
}
.pouqie {
  width: 100px;
  height: 129px;
  background-color: #2f343b;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
  opacity: 0.9;
  position: absolute;
  left: 112px;
  bottom: 70px;
  border-radius: 6px;
}
</style>
