<template>
  <div class="row form-group" :key="$attrs.key">
    <div class="col-12 d-flex ">
      <label :for="localFormElement.key" 
      >{{ localFormElement.label }}:&nbsp;</label
    >
    <span
      type="submit"
      class="submit-text me-2"
      @click.prevent="openModalTags(localFormElement)"
    >
     ویرایش
  </span>
    </div>
  

    <ul class="list-unstyled mt-2">
      <li
        v-for="(item, index) in textValue"
        :key="'qa_' + item.id"
        class="mb-2 list-item"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import formBuilderMixin from "@mixins/formBuilderMixin";
export default {
  mixins: [formBuilderMixin],
  computed: {
    myText() {
      if (this.localFormElement?.type == "date") return this.textDate;
      else return this.textValue;
    },
  },
  methods: {
    openModalTags(item){
      this.$emit("openModalTags", item);
    },
  },
};
</script>

<style scoped lang="scss" >
.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;
  }
}
.submit-text{
  color: #26c4c4;
  // &:hover{
  //   font-size: 0.9rem;
  // }
}
</style>
