<template>
  <div class="root_unit" v-if="unit.title !== 'ext'">
    <select-box
      class="title_box"
      :select="selectedItem === unit"
      :check="unit.type"
      @click.native="emitSelect(unit)"
      draggable="false"
      @del="del"
      @addNextlevel="addNextlevel"
      @modifyTitle="modifyTitle"
      @modifyForms="modifyForms"
    >
      <h2 class="title">
        <div class="label-text" :title="unit.title">{{ unit.title }}</div>
      </h2>
    </select-box>
    <template v-for="(item, index) in unit.children">
      <select-box
        class="property_box property_box-item property_box-item1"
        :class="{
          'half-transparent': startN == index && isInDragging && endN > -1,
        }"
        :select="selectedItem === item"
        @click="emitSelect(item)"
        @del="del"
        :show="3"
        @addNextlevel="addNextlevel"
        @modifyTitle="modifyTitle"
        @modifyForms="modifyForms"
        @dragstart="dragstart(item, index)"
        @dragend="dragend()"
        @dragover="dragover(item, index)"
        :key="item.id"
      >
        <div class="blue-line-con" v-show="isInDragging && endN === index">
          <div class="blue-line"></div>
        </div>
        <property-item class="property-item" :property="item"></property-item>
      </select-box>
    </template>
  </div>
</template>

<script lang="ts">
import PropertyItem from "./PropertyItem.vue";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import SelectBox from "./SelectBox.vue";
import { Property, Unit } from "@/plugins/types2";
@Component({
  components: {
    PropertyItem,
    SelectBox,
  },
})
export default class RootUnit extends Vue {
  @Prop() unit!: Unit;
  @Prop() selectedItem!: Unit | Property | null;
  @Prop() isDisabled!: boolean;
  public emitSelect(item: Unit | Property) {
    this.$emit("selected", item);
  }

  public Unit = Unit;
  public Property = Property;
  public startN: number = -1;
  public endN: number = -1;
  public isInDragging: boolean = false;
  public created() {}
  // 修改表现形式
  public modifyForms() {
    let that: any = this.selectedItem;
    if (this.selectedItem && this.selectedItem.type === 3) {
      return false;
    }
    if (this.selectedItem && this.selectedItem.type === 6) {
      if (that.value.trim() !== "") {
        that.value = this.timeFormate(that.value);
        this.selectedItem = that;
      }
    }
    this.$emit("modifyForms");
  }
  public timeFormate(timestamp: number) {
    let date = new Date(timestamp * 1000);
    let Y = date.getFullYear() + "-";
    let M =
      (date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1) + "-";
    let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate() + " ";
    return Y + M + D;
  }
  public modifyTitle() {
    this.$emit("modifyTitle");
  }
  public addNextlevel() {
    this.$emit("addNextlevel");
  }
  public del() {
    this.$emit("del");
  }
  // 拖放开始
  dragstart(item: Unit | Property, index: number) {
    this.endN = -1; //执行dragover操作时，start element才进入虚化
    this.startN = index;
    this.isInDragging = true;
  }
  // 拖动结束
  dragend() {
    this.isInDragging = false;
    if (this.startN === this.endN || this.endN < 0) {
      return false;
    } else {
      var Property = this.unit.children[this.startN]; //目标
      this.unit.children.splice(this.endN, 0, Property);
      if (this.startN > this.endN) {
        this.unit.children.splice(this.startN + 1, 1);
      } else if (this.startN < this.endN) {
        this.unit.children.splice(this.startN, 1);
      }
      this.$forceUpdate();
    }
  }
  // 进入另一个目标元素
  dragover(item: Unit, index: number) {
    this.endN = index;
  }
  dragoverExt(e: any) {}
}
</script>

<style scoped lang="less">
.title {
  width: 602px; /* 620 - 18 */
  padding-left: 18px;
  margin: 0;
  line-height: 42px;
  font-size: 16px;
  color: #292929;
}

.title_box {
  width: 620px;
}

.unit_box {
  width: 1060px; /* todo 选中效果ui未给出 */
  margin-top: 10px;
  padding: 10px 0;
}

.property_box {
  margin-top: 10px;
  width: 1170px;
}
.blue-line-con {
  position: relative;
  height: 1px;
}
.blue-line {
  height: 1px;
  background-color: #3f79fe;

  width: 300px;
  display: inline-block;

  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
}

.half-transparent {
  opacity: 0.3;
}
</style>

<style>
.property_box-item1 .base_form:hover {
  overflow: visible;
}
/*
 * 二级hover下，显示item头
 */
.property_box-item1 .base_form:hover .pre-tag,
.property_box-item1 .image_form:hover .pre-tag,
.property_box-item1 .title:hover .pre-tag {
  display: block !important;
}
/*
 * 被选中的二级item，即使在hover状态下，也不显示item头
 */
.property_box-item1.js-select_box_active .base_form:hover .pre-tag,
.property_box-item1.js-select_box_active .image_form:hover .pre-tag,
.property_box-item1.js-select_box_active .title:hover .pre-tag {
  display: none !important;
}
/*
 * 即使二级item被选中，对应的三级hover下也显示item头
 */
.property_box-item1.js-select_box_active
  .property_box-item2
  .base_form:hover
  .pre-tag,
.property_box-item1.js-select_box_active
  .property_box-item2
  .image_form:hover
  .pre-tag,
.property_box-item1.js-select_box_active
  .property_box-item2
  .title:hover
  .pre-tag {
  display: block !important;
}
</style>
