<template>
  <div class="elem-pane-box elem-pane-box-edit">
    <div class="elem-body" :style="bodyStyle">
      <!-- 子元件编辑区域 -->
      <div
        class="elem-pane-box-elements"
        @drop.prevent="dropInnerElement($event)"
        @dragover.prevent
        @dragleave.prevent
      >
        <box-element-edit
          v-for="element in data.elements"
          :key="element.id"
          class="elem-pane-box-element"
          :data="element"
          :transform-fit="rebuildGuides"
          @resize-over="elementResizeOver"
        ></box-element-edit>
        <!-- guide-lines -->
        <div v-if="xLines.length || yLines.length" class="element-guide-lines">
          <div
            v-for="line in xLines"
            :key="`x-${line.top}`"
            class="guide-line guide-line-x"
            :style="line"
          ></div>
          <div
            v-for="line in yLines"
            :key="`y-${line.left}`"
            class="guide-line guide-line-y"
            :style="line"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import BoxElementEdit from "../../components/BoxElementEdit.vue";
import guideLinesMixins from "../../../card/mixins/guideLines";

export default {
  name: "ElemPaneBoxEdit",
  components: { BoxElementEdit },
  mixins: [guideLinesMixins],
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      bodyStyle: {},
    };
  },
  computed: {
    ...mapState("paper-export", ["curDragElement"]),
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.modifyBodyStyle();
      },
    },
  },
  mounted() {
    this.modifyBodyStyle();
  },
  methods: {
    ...mapMutations("paper-export", ["setCurDragElement", "setCurElement"]),
    ...mapActions("paper-export", ["rebuildPages", "modifyElementChild"]),
    modifyBodyStyle() {
      this.$nextTick(() => {
        let bodyStyle = {
          height: this.data.h + "px",
        };
        if (this.data.borderStyle !== "none") {
          bodyStyle.border = `1px ${this.data.borderStyle} #333`;
        }
        this.bodyStyle = bodyStyle;
      });
    },
    dropInnerElement(e) {
      let { offsetX: x, offsetY: y } = e;
      const { offsetLeft, offsetTop } = this.getOffsetInfo(
        e.target || e.srcElement
      );
      // 解答题的子元素中会新增container字段
      const curElement = {
        ...this.curDragElement,
        x: x + offsetLeft,
        y: y + offsetTop,
        container: {
          id: this.data.id,
          type: this.data.type,
        },
      };
      this.elementResizeOver(curElement);
      this.setCurDragElement({});
      this.setCurElement(curElement);
    },
    getOffsetInfo(dom, endParentClass = "elem-pane-box-elements") {
      let parentNode = dom;
      let offsetTop = 0,
        offsetLeft = 0;
      while (!parentNode.className.includes(endParentClass)) {
        offsetTop += parentNode.offsetTop;
        offsetLeft += parentNode.offsetLeft;
        parentNode = parentNode.offsetParent;
      }
      return {
        offsetLeft,
        offsetTop,
      };
    },
    elementResizeOver(element) {
      this.clear();
      this.modifyElementChild(element);
      this.$nextTick(() => {
        this.rebuildPages();
      });
    },
    rebuildGuides(element, actionType) {
      return this.rebuild(this.data.elements, element, actionType);
    },
  },
};
</script>
