<template>
  <div class="element-item">
    <element-resize
      v-model="elemData"
      :class="{ 'element-resize-act': curElement.id === data.id }"
      :active="active"
      :element-pk="data.id"
      :style="{ zIndex: data.zIndex }"
      isCompact
      @resize-over="resizeOver"
      @on-click="activeCurElement"
    >
      <div class="element-item-body" :style="styles" :id="data.id"></div>
      <div class="element-delete" @click="toDelete">
        <i class="el-icon-error"></i>
      </div>
    </element-resize>
  </div>
</template>

<script>
import ElementResize from "./ElementResize";
import { objAssign } from "@/plugins/utils";

export default {
  name: "element-item",
  components: {
    ElementResize,
  },
  props: {
    data: {
      type: Object,
    },
    curElement: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      elemData: {
        x: 0,
        y: 0,
        w: 0,
        h: 0,
      },
      styles: {},
      active: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
    };
  },
  created() {
    this.init();
  },
  methods: {
    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",
      };
    },
    resizeOver() {
      this.$emit("resize-over", Object.assign({}, this.data, this.elemData));
    },
    activeCurElement() {
      this.$emit("act-element", this.data);
    },
    toDelete() {
      this.$emit("del-element", this.data);
    },
  },
};
</script>
