<template>
  <div class="position-relative">
    <form action="">
      <div class="form-row">
        <label for="">عنوان </label>
        <span>{{ data.entity.title }}</span>
      </div>

      <div
        v-if="
          this.data.keyName == 'favorite' || this.data.keyName == 'unfavorite'
        "
        class="form-row"
      >
        <div class="d-flex justify-content-end">
          <div class="custom-control custom-switch">
            <input
              type="checkbox"
              id="goodbad"
              name="goodbad"
              v-model="goodBadType"
              class="custom-control-input"
            />

            <label class="custom-control-label" for="goodbad">مطلوب</label>
          </div>
          <label class="mb-0 me-2" for="goodbad">نامطلوب</label>
        </div>
      </div>

      <div class="form-row">
        <textarea
          v-model="value"
          name=""
          ref="text"
          cols="30"
          rows="30"
          placeholder="متن مطلوب را گویا و مختصر وارد کنید"
          style="overflow: auto"
        ></textarea>
      </div>

      <div class="popUp-tab__buttons">
        <div
         
          class="d-flex justify-content-between flex-grow-1"
        >
        <button
          class="btn delete-btn btn-outline-danger"
          @click.prevent="deleteProperty()"
        >
          حذف
        </button>
          <div data-v-e8ee7a26="" 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()"
        >
          ثبت
        </button>
          </div>
        </div>

      </div>
    </form>
  </div>
</template>

<script>
import { propertyMixin } from "~/entity/mixins/propertyMixin";
import repoApi from "~/apis/repoApi";
export default {
  mixins: [propertyMixin],

  props: {
    data: { type: Object, default: () => ({}) },
  },
  mounted() {
    // this.value = ('description' in this.data.entity ) ?  this.data.entity['description'] : '';
    this.value = this.getPropertyValue(
      this.data.entity,
      this.data.keyName,
      this.data.index
    );

    this.goodBadType = this.data.keyName == "favorite";
  },
  data() {
    return {
      value: "",
      goodBadType: true,
    };
  },
  

  
};
</script>
<style scoped>
/* .button_delete_Simple {
  position: absolute;
  bottom: 16px;
  right: 5px;
} */
</style>
