<template>
  <div class="topic-element-edit">
    <element-resize
      v-model="elemData"
      :class="{ 'element-resize-act': curElement.id === data.id }"
      :transform-fit="transformFit"
      :element-pk="data.id"
      is-compact
      @resize-over="resizeOver"
      @on-click="activeCurElement"
    >
      <div
        :id="data.id"
        :class="classes"
        :style="styles"
        :data-type="data.type"
      >
        <component :is="compName" :data="data"></component>
      </div>
    </element-resize>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { objAssign } from "../../card/plugins/utils";
import ElementResize from "../../card/components/common/ElementResize";
import TopicNumber from "../../card/components/common/TopicNumber";
// elements
import EditText from "../../card/elements/text/ElemText";
import EditFieldText from "../elements/field-text/ElemFieldText";
import EditImage from "../../card/elements/image/ElemImage";
import EditLine from "../../card/elements/line/ElemLine";
import EditLines from "../../card/elements/lines/ElemLines";
import EditGrids from "../../card/elements/grids/ElemGrids";
import EditPane from "../../card/elements/pane/ElemPane";
import EditGutter from "../../card/elements/gutter/ElemGutter";
import EditFillField from "../elements/fill-field/ElemFillField";
import EditFillTable from "../../card/elements/fill-table/ElemFillTable";
import EditFillPane from "../../card/elements/fill-pane/ElemFillPane";

export default {
  name: "TopicElementEdit",
  components: {
    ElementResize,
    TopicNumber,
    EditText,
    EditFieldText,
    EditImage,
    EditLine,
    EditLines,
    EditGrids,
    EditPane,
    EditGutter,
    EditFillField,
    EditFillTable,
    EditFillPane,
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    transformFit: {
      type: Function,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      styles: {},
      elemData: {
        x: 0,
        y: 0,
        w: 0,
        h: 0,
        zindex: 9,
        init: false,
      },
      actives: {
        TEXT: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
        IMAGE: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
        LINES: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
        GRIDS: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
        LINE_HORIZONTAL: ["l", "r"],
        LINE_VERTICAL: ["t", "b"],
      },
    };
  },
  computed: {
    ...mapState("paper-export", ["curElement"]),
    elementName() {
      if (this.data.type.includes("LINE_")) return "line";
      return this.data.type.toLowerCase().replace("_", "-");
    },
    compName() {
      return `edit-${this.elementName}`;
    },
    classes() {
      return [
        "topic-design",
        "element-item",
        `element-item-${this.elementName}`,
      ];
    },
    active() {
      return this.actives[this.data.type];
    },
  },
  created() {
    this.init();
  },
  methods: {
    ...mapMutations("paper-export", ["setCurElement"]),
    init() {
      this.elemData = objAssign(this.elemData, this.data);
      this.styles = {
        left: this.data.x + "px",
        top: this.data.y + "px",
        width: this.data.w + "px",
        height: this.data.h + "px",
        zIndex: this.data.zindex,
      };
    },
    activeCurElement() {
      this.setCurElement(this.data);
    },
    resizeOver() {
      this.$emit("resize-over", Object.assign({}, this.data, this.elemData));
    },
  },
};
</script>
