<template>
  <div class="composition-element">
    <div class="composition-element-item" :style="styles" :id="data.id">
      <component :is="compName" :data="data"></component>
    </div>
  </div>
</template>

<script>
import ElemText from "./ElemText";
import ElemImage from "./ElemImage";
import ElemLineHorizontal from "./ElemLineHorizontal";
import ElemLineVertical from "./ElemLineVertical";

export default {
  name: "composition-element",
  components: {
    ElemText,
    ElemImage,
    ElemLineHorizontal,
    ElemLineVertical
  },
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {};
  },
  computed: {
    compName() {
      return `elem-${this.data.type.toLowerCase().replace("_", "-")}`;
    },
    styles() {
      return {
        height: this.data.h + "px"
      };
    }
  }
};
</script>
