<template>
  <span class="ht-field-tail">
    <div v-if="hasErrors" class="el-form-item__error">{{
      errorMessage
    }}</div>
    <div v-if="readonly && tagFormatValue.length == 0" class="field-tail">
      <div v-if="isReadonlyTextarea">
        <div v-for="(item, index) in formatInputValue" :key="index">
          <p v-if="item" class="readonly_p">{{ item }}</p>
          <br v-else />
        </div>
      </div>
      <el-input v-else-if="$readonlyInput" v-model="inputValue" disabled></el-input>
      <span v-else>{{ inputValue }}</span>
      <slot name="append" class="el-input-group__append"></slot>
    </div>
    <span
      v-if="
        readonly &&
          tagFormatValue.constructor == Array &&
          tagFormatValue.length > 0
      "
    >
      <el-tag v-for="(label, index) in tagFormatValue" :key="index">{{
        label
      }}</el-tag>
    </span>

  </span>
</template>
<script>
import utils from "@/utils.js";

export default {
  name: "ht-field-tail",
  props: {
    fieldName: {
      type: String,
      required: true,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    inputValue: {
      type: [String, Number, Object, Array, Boolean],
    },
    tagFormatValue: {
      type: [Array],
      default() {
        return [];
      },
    },
    writeable: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      scopeName: null,
    };
  },
  computed: {
    fieldScopePath: function() {
      let path = this.fieldName;
      if (this.scopeName) {
        path = `${this.scopeName}.${this.fieldName}`;
      }
      return path;
    },
    hasErrors: function() {
      return this.errors && this.errors.has(this.fieldScopePath);
    },
    errorMessage: function() {
      ;
      return this.errors.first(this.fieldScopePath);
    },
    formatInputValue() {
      let value = [];
      if (this.readonly && typeof(this.inputValue) === "string") {
        if (this.inputValue.includes("↵")) {
          vlaue = this.inputValue.split("↵");
        } else if (this.inputValue.includes("\n")) {
          value = this.inputValue.split("\n");
        } else {
          value = [this.inputValue];
        }
      }
      return value;
    },
    isReadonlyTextarea(){
      return typeof(this.inputValue) === "string" ? this.inputValue.includes("↵") || this.inputValue.includes("\n") : false
    }
  },
  mounted() {
    this.scopeName = utils.getSomeAttributeFromParentElement(
      this.$el.parentElement,
      "data-vv-scope"
    );
    const { subScopeEl, index } = utils.getSubScopeElAndIndex(this.$el.parentElement);
    if (subScopeEl && (subScopeEl.getAttribute("row_readonly") == 'true' || subScopeEl.getAttribute("row_readonly") === true)) {
      this.$emit("update:writeable",false);
    }
  },
  created() {
    this.$validator = this.$root.$validator;
  },
};
</script>

<style lang="scss" scoped>
.field-tail {
  display: block;
  word-break: break-all;
  word-wrap: break-word;
}

td .el-form-item__error,
th .el-form-item__error {
  transform: scale(0.9);
  display: none;
}

td .el-form-item__error,
th .el-form-item__error {
  top: calc(100% - 3px);
}
.readonly_p{
  margin:0;
}
</style>
