<template>
  <div class="position-relative">
    <form>
      <div class="form-row text__14">
        <label for=""> فیش به </label>
        <span class="text-overflow">{{
          data.value?.title ?? data.value?.summary
        }}</span>
      </div>
      <div class="form-row">
        <label for="">منبع: </label>
        <div class="input-container">
          <input
            type="text"
            ref="resource"
            placeholder="منبع را وارد نمایید."
            v-model="value.resource"
          />
          <div v-if="errors.resource && errors.resource.length > 0">
            <div
              class="error-input"
              v-for="(error, index) in errors.resource"
              :key="index"
            >
              {{ error }}
            </div>
          </div>
        </div>
      </div>
      <div class="form-row">
        <label for="">تاریخ ایجاد: </label>
        <div class="input-container">
          <input
            type="text"
            ref="date_text"
            placeholder="30/12/1402"
            v-model="value.date_text"
          />
          <div v-if="errors.date_text && errors.date_text.length > 0">
            <div
              class="error-input"
              v-for="(error, index) in errors.date_text"
              :key="index"
            >
              {{ error }}
            </div>
          </div>
        </div>
      </div>
      <div class="form-row">
        <label for="description">بیان </label>
        <div class="input-container">
          <textarea
            name="description"
            id="description"
            v-model="value.description"
            cols="30"
            rows="10"
            placeholder="بیان ای از پاسخ را گویا بیان فرمایید"
          ></textarea>
          <div
            v-if="errors['description'] && errors['description'].length > 0"
          >
            <div
              class="error-input"
              v-for="(error, index) in errors['description']"
              :key="index"
            >
              {{ error }}
            </div>
          </div>
        </div>
      </div>
      <div class="form-row">
        <label for="text">توضیحات بیشتر </label>
        <div class="input-container">
          <textarea
            name="text"
            id="text"
            v-model="value.text"
            cols="30"
            rows="10"
            placeholder="توضیحات بیشتر را وارد نمایید."
          ></textarea>
          <div v-if="errors['text'] && errors['text'].length > 0">
            <div
              class="error-input"
              v-for="(error, index) in errors['text']"
              :key="index"
            >
              {{ error }}
            </div>
          </div>
        </div>
      </div>
      <div class="form-row">
        <label for="">لینک: </label>
        <div class="input-container">
          <input
            type="text"
            ref="resource"
            placeholder="منبع را وارد نمایید."
            v-model="value.link"
          />
          <div v-if="errors.resource && errors.resource.length > 0">
            <div
              class="error-input"
              v-for="(error, index) in errors.resource"
              :key="index"
            >
              {{ error }}
            </div>
          </div>
        </div>
      </div>

      <div class="popUp-tab__buttons">
        <div class="d-flex justify-content-between flex-grow-1">
          <button
            class="btn delete-btn btn-outline-danger button_delete_Simple"
            @click.prevent="deleteProperty()"
          >
            حذف
          </button>

          <div class="d-flex">
            <button
              title="لغو"
              @click.prevent="$emit('close-modal')"
              class="popUp-tab__clear btn"
              type="button"
            >
              لغو
            </button>
            <button
              type="button"
              class="popUp-tab__submit btn"
              @click.prevent="saveProperty(value)"
            >
              ثبت
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import { mapState } from "pinia";
import { propertyMixin } from "~/chat/mixins/propertyMixin";
import commonMixin from "@chat/mixins/commonMixin";
import { entityMixin } from "@chat/mixins/entityMixin";

export default {
  mixins: [propertyMixin, commonMixin, entityMixin],
  props: {
    data: { type: Object, default: () => ({}) },
  },
  mounted() {
    const value = this.getPropertyValue(
      this.data.entity,
      this.data.keyName,
      this.data.index
    );

    if (value) this.value = value;
  },
  data() {
    return {
      value: {
        date_text: null,
        description: null,
        resource: null,
        text: null,
      },
    };
  },
  computed: {
    ...mapState("jahat", ["typesGetter"]),
  },

  
  mounted() {
    if (this.data.entity.fish) {
      this.value = {
        date_text: this.data.entity.fish[0].date_text,
        description: this.data.entity.fish[0].description,
        resource: this.data.entity.fish[0].resource,
        text: this.data.entity.fish[0].text,
        link: this.data.entity.fish[0].link,
      };
    }
  },
};
</script>
<style scoped>
#form {
  overflow: auto;
  height: 100%;
  max-height: 20em;
}
</style>