<template>
  <div class="position-relative">
    <form>
      <!-- <div class="form-row">
        <label for="">عنوان </label>
        <div class="input-container">
          <input type="text" placeholder="عنوان گویا و مختصری را وارد کنید" v-model="propertyObj.value_json.title"/>
          <template v-if="errors.title && errors.title.length > 0">
            <div class="error-input" v-for="(error, index) in errors.title" :key="index">{{ error }}</div>
          </template>
        </div>
      </div> -->
      <div class="form-row">
        <label for="">بخش </label>
        <vue-select
          dir="rtl"
          v-model="propertyObj.value_json.type"
          :options="options"
        ></vue-select>
        <!-- <select v-model="propertyObj.value_json.type">
          <option value="اهداف مسئله">اهداف مسئله</option>
          <option value="روش های پیشنهاد">روش های پیشنهاد</option>
          <option value="محصول مورد انتظار">محصول مورد انتظار</option>
        </select> -->
      </div>

      <div class="form-row">
        <label for="">توضیح </label>
        <textarea
          v-model="propertyObj.value_json.desc"
          name=""
          id=""
          cols="30"
          rows="30"
          placeholder="توضیحی مختصر برای نحوه ارتباط"
        ></textarea>
      </div>

      <div class="popUp-tab__buttons">
        <div class="d-flex justify-content-between flex-grow-1">
          <span>&nbsp;</span>

          <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()"
            >
              ثبت
            </button>
          </div>
        </div>
      </div>

      <!-- <div class="popUp-tab__buttons">
        <a href="###" class="popUp-tab__clear" data-dismiss="modal">لغو</a>
        <a href="javascript:void(0)" class="popUp-tab__submit" data-dismiss="modal" @click="saveProperty()">ثبت</a>
      </div> -->
    </form>
  </div>
</template>

<script>
import { mapActions } from "pinia";
export default {
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      property: {
        value_json: {
          title: "",
          type: "",
          desc: "",
        },
        entity_id: this.data.entity.id,
        property_id: 7,
      },
      errors: {},
      options: [
        { id: 1, label: "اهداف مسئله" },
        { id: 2, label: "روش های پیشنهاد" },
        { id: 3, label: "محصول مورد انتظار" },
      ],
    };
  },

  computed: {
    propertyObj() {
      if (this.data.property) {
        return this.data.property;
      } else {
        return this.property;
      }
    },
  },

  methods: {
    ...mapActions("jahat", ["SAVE_PROPERTY"]),

    saveProperty() {
      let self = this;
      let property = this.propertyObj;
      let index = 0;

      if (property.id) {
        index = property.position;
      }

      this.SAVE_PROPERTY({ property, vm: this })
        .then((response) => {
          self.$emit("change", {
            item: response.data,
            type: "related_datas",
            index: index,
          });
        })
        .catch((errors) => {
          self.errors = errors.data.errors;
        });
    },
  },
};
</script>