<template>
  <div
    :class="['elem-text', { 'is-side': data.mode === 'side' }]"
    :style="elemStyles"
  >
    <div class="text-body" :style="styles">
      <div>{{ data.content || data.fieldName }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ElemText",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    styles() {
      return {
        fontWeight: this.data.fontWeight,
        fontFamily: this.data.fontFamily,
        fontSize: this.data.fontSize,
        color: this.data.color,
        textAlign: this.data.textAlign || null,
      };
    },
    elemStyles() {
      if (this.data.mode === "side") {
        return {
          position: "absolute",
          width: this.data.h + "px",
          height: this.data.w + "px",
          bottom: 0,
          left: this.data.w + "px",
        };
      } else {
        return null;
      }
    },
  },
  methods: {},
};
</script>
