<template>
  <div class="pages">
    <sub-header
      myClass="mt-0 mb-3"
      :hasViewMode="false"
      :showDetailsPanel="false"
      title="فهرست فرم‌ها"
      @show-details="newForm"
    ></sub-header>

    <div class="pages-content ps-1">
      <template v-if="canView">
        <my-table
          height="calc(100vh - 15em)"
          :isDraggable="false"
          :items="items"
          :fetchingData="fetchingData"
          :tableColumns="tableColumns"
          :tableActions="tableActions"
          :paginationInfo="pagination"
          :sortingInfo="sorting"
          @delete-table-item="deleteItem"
          @edit-table-item="editItem"
          @select-list-columns="selectListColumnsEdit"
          @show-details="showDetails"
          @page-changed="pageChanged"
          @page-limit-changed="pageLimitChanged"
          @sort-changed="sortChanged"
          @on-linked-title-click="onLinkedTitleClick"
        />
      </template>
      <no-data v-else>
        <the-content-loading v-if="fetchingData"></the-content-loading>

        <div v-else class="d-flex justify-content-center align-items-center">
          <div
            class="alert alert-warning d-flex justify-content-center align-items-center"
          >
            <span
              class="tavasi tavasi-warning-circle color-inherit ms-1 text__32"
            ></span>
            عدم دسترسی
          </div>
        </div>
      </no-data>

      <form-show
        v-if="shwoPreviewForm"
        :selectedItem="rowItem"
        :tableColumns="tableColumns"
        @edit-item="formShowEditItem"
        @close-form-show="closeFormShow"
      ></form-show>
    </div>
  </div>
</template>
<script>
import keyValueApi from "@apis/keyValueApi";
import HttpService from "@services/httpService";
import tableActions from "@forms/json/formListTableAction";
import { mapGetters, mapMutations, mapActions } from "vuex";

export default {
  name: "formList",
  setup() {
    definePageMeta({
      name: "formList",
    });
  },
  mounted() {
    this.httpService = new HttpService();
    this.checkPermisionBeforGetList();
  },
  watch: {
    // if user clicked on the subheader component new button,
    getPanelStatus() {
      this.newForm();
    },
  },
  data() {
    return {
      canView: true,
      rowItem: {},
      shwoPreviewForm: false,
      httpService: undefined,

      sorting: {
        sortby: "created",
        sortorder: undefined, // asc | none
      },
      pagination: {
        pages: 0,
        total: 0,
        page: 1,
        offset: 0, // page * per_page
        limit: 10, //per_page
      },

      tableColumns: [
        { key: "value", title: "عنوان", width: "2", isLink: true },
        { key: "text", title: "توضیحات", width: "4" },
      ],
      tableActions: tableActions,
      fetchingData: false,
      buttonLoading: false,
      items: [],
    };
  },
  computed: {
    ...mapGetters(["getPanelStatus"]),
  },
  methods: {
    ...mapMutations(["TOGGLE_PANEL"]),
    ...mapActions(["checkPermissions"]),
    checkPermisionBeforGetList() {
      this.checkPermissions({ permission: "forms_list", _this: this })
        .then(() => {
          this.getForms()
            .then(() => {
              this.canView = true;
            })
            .catch(() => {
              this.canView = false;
            })
            .finally(() => {
              this.fetchingData = false;
            });
        })
        .catch(() => {
          this.canView = false;
        });
    },
    onLinkedTitleClick({ rowItem, tableColumn }) {
      this.formShowEditItem(rowItem);
    },
    /*
       summary: redirect to selecting table columns page.

       @fires when user clicked on the its icon in the context menu dropdown.
       @param {index} String index of form in the forms array.

       @return void.
    */
    selectListColumnsEdit(index) {
      const formId = this.items[index].id;
      this.$router.push({
        name: "selectListColumnsEdit",
        params: { id: formId },
      });
    },
    /*
       summary: get list of the forms.

       @fires when mount hook executed.

       @return void.
    */
    async getForms() {
      if (this.fetchingData) return;
      this.fetchingData = true;

      const formData = {
        isown: 3,

        type: 1,
        ...this.sorting,
        ...this.pagination,
      };
      let url = this.keyValueMicroServiceName + keyValueApi.forms.list;
      return await this.httpService
        .postRequest(url, formData)
        .then((response) => {
          this.items = response.data;
          this.pagination = { ...this.pagination, ...response.pagination };
        });
    },
    resetPagination() {
      this.pagination = {
        pages: 0,
        total: 0,
        page: 1,
        offset: 0,
        limit: 10,
      };
    },
    pageChanged(paging) {
      let page = paging.pageNumber;
      page -= 1;
      this.pagination.offset = page * paging.limit;
      this.pagination.limit = paging.limit;
      this.pagination.page = paging.pageNumber;

      this.getForms();
    },
    pageLimitChanged(paging) {
      this.resetPagination();
      this.pagination.limit = paging.limit;

      this.getForms();
    },
    sortChanged(sorting) {
      // keep limit status.
      // reset page and offset values.
      this.pagination.page = this.pagination.offset = 0;
      this.sorting = sorting;

      this.getForms();
    },
    deleteItem(index) {
      if (this.buttonLoading) return;
      this.buttonLoading = true;

      const formData = {
        id: this.items[index].id,
      };
      let url = this.keyValueMicroServiceName + keyValueApi.forms.delete;
      this.mySwalConfirm({
        title: "هشدار!!!",
        html: "از حذف این مورد مطمئن هستید؟",
      }).then((result) => {
        if (result.isConfirmed) {
          this.httpService
            .postRequest(url, formData)
            .then((response) => {
              this.getForms();
            })

            .finally(() => (this.buttonLoading = false));
        }
      });
    },
    /*
       summary: edit item

       description:
       called from the form show panel.

       @fires when clicked on the form show edit button.

       @param {form} Object form object.

       @return void.
    */
    formShowEditItem({ id }) {
      this.$router.push({ name: "editForm", params: { id } });
    },
    /*
       summary: edit item

       description:
       called from the forms table.

       @fires when clicked on the forms table edit button.

       @param {formIndex} Number form index in the forms array.

       @return void.
    */
    editItem(formIndex) {
      const formId = this.items[formIndex].id;
      this.$router.push({ name: "editForm", params: { id: formId } });
    },
    newForm() {
      this.$router
        .push({ name: "newForm" })
        .then(() => this.TOGGLE_PANEL(false));
    },
    showDetails({ rowItem, show }) {
      this.rowItem = rowItem;
      this.shwoPreviewForm = true;
    },
    closeFormShow() {
      this.shwoPreviewForm = false;
    },
  },
  components: {
    FormShow: () =>
      import( "@forms/forms/FormShow.vue"),
  },
};
</script>

<style lang="scss"></style>
