<template>
  <div class="position-relative">
    <form>
      <div class="menu-multiselect">
        <multiselect
          v-model="value"
          id="crition-list"
          track-by="entity_id"
          label="entity_title"
          placeholder="جستجو بر اساس عناوین"
          :options="critions"
          :allow-empty="true"
          :searchable="true"
          :clear-on-select="false"
          :close-on-select="true"
          :options-limit="300"
          :limit="10"
          :max-height="600"
          @select="updateValue"
        >
        </multiselect>
      </div>

      <div class="form-row form-group p-0">
        <label class="col-md-12" for="description">توضیحات</label>
        <textarea
          class="col-md-12 h-auto"
          v-model="value.description"
          name="description"
          cols="30"
          rows="5"
          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-component
              classes="btn-outline-primary"
              buttonText="افزودن"
              @click="saveProperty()"
            ></button-component>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>

import repoApi from "~/apis/repoApi";
import { mapState, mapActions } from "pinia";
import { propertyMixin } from "~/chat/mixins/propertyMixin";

export default {
  mixins: [propertyMixin],
  props: {
    data: { type: Object, default: () => ({}) },
  },
  mounted() {
    this.httpServiceJahat = new HttpService(
      import.meta.env.VITE_REPO_BASE_URL + "crition"
    );

    const value = this.getPropertyValue(
      this.data.entity,
      this.data.keyName,
      this.data.index
    );
    if (value) this.value = value;

    this.getCritions();
  },
  data() {
    return {
      value: {
        entity_id: null,
        entity_title: null,
        description: null,
      },
      critions: [],
      httpServiceJahat: undefined,
      entityType: 3,
      pagination: {
        page: 1,
        pages: 0,
        total: 0,
        offset: 0,
        limit: 500,
      },
    };
  },
  computed: {
    ...mapState("list", ["selectedProjectGetter", "selectedItemGetter"]),
  },

  methods: {
    ...mapActions("list", ["SET_SELECTED_PROJECT"]),
    getCritions() {
      if (this.fetchingData) return;
      this.fetchingData = true;

      let url =
        repoApi.entity.list.replace("{{type}}", this.entityType) +
        `/${this.pagination.offset}/${this.pagination.limit}`;
      url += "/date_create/desc";

      this.httpServiceJahat.getRequest(url).then((res) => {
        const list = [];
        res.hits.hits.forEach((item, key) => {
          list.push({
            entity_id: item._source.id,
            entity_title: item._source.title,
          });
        });
        this.critions = list;

        this.fetchingData = false;
      });
    },

    updateValue(selectedCrition) {
      // this.value.entity_id = selectedCrition.id;
      // this.value.entity_title = selectedCrition.title;
    },
  },

};
</script>
