<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="inputText"
          name="description"
          cols="30"
          rows="5"
          placeholder="کلمات یا عبارات واژه‌گان مطلوب را با جدا کنندهایی شبیه ، , - وارد کنید"
          @input="updateKeywords"
        ></textarea>
      </div>

      <div class="popUp-tab__buttons">
        <div class="d-flex justify-content-between flex-grow-1">
          <span>&nbsp;</span>
          <div data-v-e8ee7a26="" class="d-flex">
            <button
              type="button"
              class="popUp-tab__clear btn"
              @click.prevent="closeModal"
            >
              لغو
            </button>
            <button-component
              classes="btn-outline-primary"
              buttonText="افزودن"
              @click="saveProperty(value, true)"
            ></button-component>
          </div>
        </div>
      </div>

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

<script>
import { mapState, mapActions } from "pinia";
import { propertyMixin } from "@mixins/entity/propertyMixin";


export default {
  mixins: [propertyMixin],
  props: {
    data: { type: Object, default: () => ({}) },
  },
  mounted() {
    this.httpService = useNuxtApp()["$http"];

    // this.httpService = new HttpService(
    //   import.meta.env.VITE_REPO_BASE_URL +
    //     "public/" +
    //     this.$route.params.key +
    //     "/"
    // );
    const value = this.getPropertyValueFull(
      this.data.entity,
      this.data.keyName
    );
    if (value) this.value = value;

    let text = "";
    if (this.value !== undefined) {
      text = this.value.join(",");
      this.inputText = text;
    }
    // const text = this.value.join(", ")
    // this.inputText ==text
    // console.log(text)
    // this.getCritions();
  },
  data() {
    return {
      // value: {
      //   // entity_id: null,
      //   // entity_title: null,
      //   // description: null,
      // },
      value: undefined,
      inputText: undefined,
      keywords: [],
      critions: [],
      entityType: 3,
      pagination: {
        page: 1,
        pages: 0,
        total: 0,
        offset: 0,
        limit: 500,
      },
    };
  },
  computed: {
    ...mapState("list", ["selectedProjectGetter", "selectedItemGetter"]),
  },

  methods: {
    ...mapActions("list", ["SET_SELECTED_PROJECT"]),
    updateKeywords() {
      this.keywords = this.inputText.split(/(،-,)+/);
      this.value = this.keywords;
    },
  },

};
</script>
