<template>
  <div class="position-relative">
    <form>
      <div class="form-row">
        <label for="">عنوان </label>
        <vue-select
          dir="rtl"
          v-model="propertyObj.entity.title"
          :options="all_problems"
        ></vue-select>
      </div>
      <div class="form-row">
        <label for="">نوع ارتباط</label>
        <select v-model="propertyObj.relation_type">
          <option value="9">هم افزا با</option>
          <option value="8">جزئی از</option>
          <option value="10">مغایر با</option>
        </select>
      </div>

      <div class="form-row">
        <label for="">توضیح </label>
        <textarea
          v-model="propertyObj.value_json.text"
          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="javascript:void(0)" class="popUp-tab__clear" data-dismiss="modal" ref="closeProblemsModal" >لغو</a>
      <a href="javascript:void(0)" class="popUp-tab__submit" @click="saveProperty()">ثبت</a>
    </div> -->
    </form>
  </div>
</template>

<script>
import { mapActions } from "pinia";
export default {
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      property: {
        entity: {
          title: "",
        },
        value_json: {
          text: "",
        },
        entity_id: this.data.entity.id,
        relation_type: 0,
      },

      all_problems: [],
    };
  },

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

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

    saveProperty() {
      let self = this;
      let property = this.propertyObj;
      let index = 0;
      let url = "entity/issues";

      if (property.id) {
        index = property.position;
        url = "entity/issues/" + property.id;
        property._method = "PUT";
      }

      this.SAVE_ENTITY_ENTITY({ property, url, vm: this }).then((response) => {
        self.$emit("change", {
          item: response.data,
          type: "related_issues",
          index: index,
        });
        self.closeModal();
      });
    },

    getAllProblems() {
      let self = this;
      ApiService.get(
        null,
        "entity/issues",
        function (response) {
          response.data.forEach((item) => {
            let data = {
              id: item.id,
              label: item.title,
            };
            self.all_problems.push(data);
          });
        },
        function () {}
      );
    },

    closeModal() {
      this.propertyObj.value_json = { text: "" };
      this.propertyObj.entity = { title: "" };
      this.propertyObj.relation_type = 0;

      this.$refs.closeProblemsModal.click();
    },
  },

  mounted() {
    this.getAllProblems();
  },
};
</script>