<template>
  <div class="position-relative">
    <form>
      <div class="form-row">
        <label for="">عنوان </label>
        <vue-select
          dir="rtl"
          v-model="project.title"
          :options="all_projects"
        ></vue-select>
      </div>

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

<script>
import { mapActions } from "pinia";

import { propertyMixin } from "~/chat/mixins/propertyMixin";

export default {
  mixins: [propertyMixin],

  props: {
    data: { type: Object, default: () => ({}) },
  },
  mounted() {
    this.project = this.data.entity;
    this.getAllProjects();
  },

  data() {
    return {
      project: {
        description: undefined,
        file: undefined,
        title: undefined,
      },
      all_projects: [],
    };
  },

  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/projects";

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

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

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

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

    //   this.$refs.closeProjectModal.click();
    // },
  },
};
</script>