<template>
  <div class="row form-group align-items-center mt-3" :key="$attrs.key">
    <label :for="localFormElement.key" class="col-auto "
      >{{ localFormElement.label }}:&nbsp;</label
    >
    <div class="col-md-9">
    <template v-if="isArray">
      <ul class="list-unstyled col-12">
        <li
          v-for="(item, index) in myText"
          :key="'qa_' + index"
          class="mb-2 list-item"
          v-html="perityHtmlText(item.title)"
          
        >
        </li>
      </ul>
    </template>

    <template v-else>
      <h6 class="form-control-plaintext text__13 label-title " style="color: var(--primary-color)" v-html="perityHtmlText(myText)">

      </h6>
    </template>
  </div>
  </div>
</template>

<script>
import formBuilderMixin from "~/extensions/formBuilderExtension.js";
export default {
  extends: formBuilderMixin,
  computed: {
    myText() {
      if (this.localFormElement?.type == "date") return this.textDate;
      else return this.textValue;
    },
    isArray() {
      return Array.isArray(this.myText);
    },
  },
  methods: {
    perityHtmlText(text) {
      //برای باگ  text.replaceAll is not a function
      text = String(text);
      text = text.replaceAll('\n', '<br>')
      return text;
    },
  },
};
</script>

<style scoped>
.form-control {
  height: auto !important;
}
.label-title {
  font-size: 0.9rem !important;
}
.list-unstyled {
    display: flex;
    flex-wrap: wrap;

    .list-item {
      border: 2px solid rgb(127, 170, 170);
      border-radius: 0.5em;
      padding: 0.5em;
      margin-left: 0.5em;
      margin-bottom: 0.5em;
      color: #495057;
    }
  }
</style>