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

    <my-quill :parentButtonLoading="buttonLoading" v-else :tinyText="tinyText" @input="onSave"
      @on-save="onSave"></my-quill>
  </div>
</template>

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

export default {
  name: "dataSettingAboutUs",
  setup() {
    definePageMeta({
      name: "dataSettingAboutUs",
    });
  },
  data() {
    return {
      buttonLoading: false,
      tinyText: '',
      fetchingData: false,
      data: undefined,
    };
  },

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

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

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

          this.tinyText = response.data.hits.hits[0]._source.value;
          this.data = response.data.hits.hits[0]._source;

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

      // var url = apis.admin.save;
      // const payload = { ...this.data, ...{ value: newContent } }
      
      var url = settingsApi.app.saveByKey;
      url = url.replace("{{key_option}}", "about_text");
      const payload = { value: newContent }

      ApiService.postRequest(url, payload)
        .then((response) => {
          this.mySwalToast({
            title: "تبریک",
            html: response.data.message,
            icon: "success",
          });
        })
        .catch((error) => {
        }).finally(() => {
          this.buttonLoading = false;
        })
    }
  },
  mounted() {
    this.getData();
  },
  watch: {
    // $route: {
    //   handler: function () {
    //     this.$store.state.collapsed = false;
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
};
</script>
