<template>
  <div
    :class="['elem-field-text', { 'is-side': data.mode === 'side' }]"
    :style="elemStyles"
  >
    <div
      :class="['text-body', { underline: data.showUnderline }]"
      :style="styles"
    >
      <span v-if="data.showLabel" class="text-label"
        >{{ data.fieldName }}：</span
      >
      <span>{{ data.content || data.fieldName }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "ElemFieldText",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    styles() {
      return {
        fontWeight: this.data.fontWeight,
        fontFamily: this.data.fontFamily.includes("宋体")
          ? `${this.data.fontFamily},宋体-简`
          : `${this.data.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>
