<template>
  <div
    :class="['topic-column-edit', { 'is-active': curColumnId === data.id }]"
    :id="data.id"
    @drop.prevent="dropInnerElement($event)"
    @dragover.prevent
    @dragleave.prevent
    @mousedown="columnBodyClick"
  >
    <div v-if="data.elements.length" class="page-column-body">
      <topic-element-edit
        v-for="element in data.elements"
        :key="element.key"
        :data="element"
        :transform-fit="rebuildGuides"
        @resize-over="elementResizeOver"
      ></topic-element-edit>

      <!-- guide-lines -->
      <div class="element-guide-lines">
        <div
          class="guide-line guide-line-x"
          v-for="line in xLines"
          :key="`x-${line.top}`"
          :style="line"
        ></div>
        <div
          class="guide-line guide-line-y"
          v-for="line in yLines"
          :key="`y-${line.left}`"
          :style="line"
        ></div>
      </div>
    </div>
    <div class="page-column-body" v-else>
      <div class="page-column-forbid-area" v-if="curPage.showForbidArea">
        <p>该区域严禁作答</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import guideLinesMixins from "../../../mixins/guideLines";
import TopicElementEdit from "./TopicElementEdit";
import { getElementDesc } from "../elements/model";

export default {
  name: "topic-column-edit",
  mixins: [guideLinesMixins],
  components: { TopicElementEdit },
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState("free", ["curDragElement", "curPage", "curColumnId"])
  },
  methods: {
    ...mapMutations("free", [
      "setCurDragElement",
      "setCurElement",
      "setCurColumnId"
    ]),
    ...mapActions("free", ["addElement", "modifyElement"]),
    dropInnerElement(e) {
      let { offsetX: x, offsetY: y } = e;
      const { offsetLeft, offsetTop } = this.getOffsetInfo(
        e.target || e.srcElement
      );

      const curElement = {
        ...this.curDragElement,
        x: x + offsetLeft,
        y: y + offsetTop,
        desc: getElementDesc(this.curDragElement)
      };
      const columnNo = this.curPage.columns.findIndex(
        col => col.id === this.data.id
      );

      this.clear();
      this.setCurDragElement({});
      this.addElement({ element: curElement, columnIndex: columnNo });
    },
    getOffsetInfo(dom, endParentClass = "page-column-body") {
      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.modifyElement(element);
    },
    columnBodyClick() {
      console.log(this.data.id);
      this.setCurColumnId(this.data.id);
      this.setCurElement({});
    },
    rebuildGuides(element, actionType) {
      return this.rebuild(this.data.elements, element, actionType);
    }
  }
};
</script>