<template>
  <div>
    <the-content-loading v-if="fetchingData"></the-content-loading>

    <form v-else @submit.prevent="onSave()">
      <div class="form-group">
        <!-- <label for="stop-words"></label> -->
        <textarea
          v-model="stopWords"
          class="form-control"
          id="stop-words"
          rows="10"
          style="height: auto"
        ></textarea>
      </div>

      <button-component
        type="submit"
        classes="btn-primary"
        :buttonText="saveButtonText"
      >
      </button-component>
    </form>
  </div>
</template>

<script>
import settingsApi from "~/apis/settingsApi";

export default {
  name: "stopWord",
  setup() {
    definePageMeta({
      name: "stopWord",
    });
  },
  props: {
    saveButtonText: {
      default: "ذخیره",
    },
  },
  data() {
    return {
      stopWords: "",
      fetchingData: false,
      data: undefined,
      buttonLoading: false,
    };
  },

  methods: {
    getData() {
      var vm = this;
      this.fetchingData = true;

      var url = settingsApi.app.getByKey;
      url = url.replace("{{key_option}}", "words_stop");
      // let url = apis.admin.get.replace("{{system}}", this.$route.meta.apiKey);

      ApiService.getRequest(url)
        .then((response) => {
          vm.fetchingData = false;

          this.stopWords = response.data.hits.hits[0]._source.value;
          this.data = response.data.hits.hits[0]._source;
        })

        .finally(() => {
          vm.fetchingData = false;
        });
    },
    onSave() {
      if (this.buttonLoading) return;
      this.buttonLoading = true;

      // var url = apis.admin.save;
      // const payload = { ...this.data, ...{ value: this.stopWords } };

      var url = settingsApi.app.saveByKey;
      url = url.replace("{{key_option}}", "words_stop");
      const payload = { value: this.stopWords };

      ApiService.postRequest(url, payload)
        .then((response) => {
          this.mySwalToast({
            title: "تبریک",
            html: response.data.message,
            icon: "success",
          });
        })

        .finally(() => {
          this.buttonLoading = false;
        });
    },
  },
  mounted() {
    this.getData();
  },
  watch: {
    //   $route: {
    //     handler: function () {
    //       this.$store.state.collapsed = false;
    //     },
    //     deep: true,
    //     immediate: true,
    //   },
  },
};
</script>