<template>
   <NuxtLayout name="default" :menu="adminMenu">
  <div class="pages role-page px-3 pb-0 pt-2">
    <sub-header-with-select
      canCreate="roles_new"
      @open-form="toggleRolesPanel"
      :showProjectSelect="$attrs.showProjectSelect"
      title="نقش ها"
    ></sub-header-with-select>

    <div class="pages-content pb-0 pt-2">
      <template v-if="canView">
        <my-table
          :tableActions="tableActions"
          height="auto"
          maxHeight="calc(100vh - 9em)"
          class="my-table"
          ref="rolesTable"
          :hasSearch="false"
          :paginationInfo="pagination"
          :sortingInfo="sorting"
          :items="roles"
          :fetchingData="fetchingData"
          :tableColumns="tableColumns"
          :totalPages="pagination.pages"
          @delete-table-item="deleteItem"
          @edit-table-item="toggleRolesPanel"
          @page-changed="pageChanged"
          @page-limit-changed="pageLimitChanged"
          @sort-changed="sortChanged"
        ></my-table>
      </template>
      <NoData 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>
      </NoData>
      <div class="side-panel" v-if="showPanel">
        <div class="side-panel-header">
          <h6 class="">مدیریت نقش ها</h6>
        </div>

        <div class="side-panel-content">
          <form class="section-form" role="section" @submit.prevent="save()">
            <div class="form-group">
              <label for="title">عنوان نقش</label>
              <input
                type="text"
                class="form-control"
                id="title"
                name="title"
                v-model="selectedItemClone.title"
              />
            </div>

            <div class="side-panel-footer mt-4">
              <div>
                <button
                  type="submit"
                  class="btn btn-outline-primary"
                  :disabled="loading"
                  @click.prevent="save()"
                >
                  <the-button-loading
                    v-if="loading"
                    :style="{ transform: 'scale(0.5)' }"
                  ></the-button-loading>
                  ثبت
                </button>
                <button
                  :disabled="loading"
                  @click.prevent="showPanel = false"
                  type="button"
                  class="btn btn-default"
                  data-dismiss="modal"
                >
                  لغو
                </button>
              </div>

              <div>
                <button
                  v-if="selectedItemClone.id"
                  @click="deleteItem(selectedItemClone.id)"
                  title="حذف"
                  class="btn delete-btn btn-outline-danger"
                  type="button"
                >
                  <svg class="icon icon-Component-295--1">
                    <use xlink:href="#icon-Component-295--1"></use>
                  </svg>
                  حذف
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</NuxtLayout>
</template>

<script>
// import permitApi from "@permission/permitApi";
import apis from "~/apis/permitApi";
import adminMenu from "~/json/admin/json/menu.json";
// import { mapGetters, mapMutations, mapActions } from "vuex";
import { defineAsyncComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useCommonStore } from "~/stores/commonStore";
import { usePermitStore } from "~/stores/permitStore";

export default {
  name: "Roles",
  setup() {
    definePageMeta({
      name: "Roles",
      layout: false,
    });
  },
  mounted() {
    this.checkPermisionBeforGetList();
  },
  created() {
    this.httpService = useNuxtApp()["$http"];
  },
  watch: {
    projectGetter() {
      this.showPanel = false;
      this.checkPermisionBeforGetList();
    },
  },
  data() {
    return {
      adminMenu:adminMenu,
      httpService: {},
      tableActions: [
        {
          showOutside: true,
          show: true,
          icon: "Component-242--1",
          title: "ویرایش",
          to: {
            name: "undefined",
          },
          selected: false,
          disabled: false,
          howToOpen: "",
          href: "",
          class: "edit-btn",
          action: "edit-table-item",
          can: "item-info_edit",
        },
        {
          showOutside: true,
          show: true,
          icon: "Component-295--1",
          title: "حذف",
          to: {
            name: "undefined",
          },
          selected: false,
          disabled: false,
          howToOpen: "",
          href: "",
          class: "delete-btn",
          action: "delete-table-item",
          can: "item-list_delete",
        },
      ],
      canView: false,
      fetchingData: false,
      tableColumns: [
        {
          isLink: true,
          key: "title",
          title: "عنوان",
          width: "2",
        },
      ],
      pagination: {
        page: 1,
        pages: 0,
        total: 0,
        offset: 0, // page * per_page
        limit: 10, //per_page
      },
      sorting: {
        sortby: "id",
        sortorder: "asc", // asc | desc | none
      },
      roles: [],
      loading: false,
      showPanel: false,
      selectedItemClone: {
        title: "",
        id: undefined,
        // project_id: undefined,
      },
      prevSelectedItemIndex: undefined,
    };
  },
  computed: {
    // ...mapGetters("permit", ["projectGetter"]),
    ...mapState(usePermitStore, ["projectGetter"]),
  },
  methods: {
    // ...mapActions(["checkPermissions"]),
    // ...mapMutations("permit", ["SET_PROJECT"]),
    ...mapActions(useCommonStore, ["checkPermissions"]),
    ...mapActions(usePermitStore, ["SET_PROJECT"]),

    async getRoles() {
      this.fetchingData = true;
      const payload = {
        // project_id: this.projectGetter?.id,
        isown: 3,
        ...this.sorting,
        ...this.pagination,
      };
      return await ApiService.formData(permitApi.roles.list, payload)
        .then((res) => {
          this.roles = res.data.data;
          this.pagination = { ...this.pagination, ...res.data.pagination };
        })

        .finally(() => {
          this.fetchingData = false;
          this.changeDetectionCounter++;
        });
    },
    save() {
      const url = this.selectedItemClone.id
        ? permitApi.roles.edit
        : permitApi.roles.add;

      ApiService.formData(url, this.selectedItemClone).then((res) => {
        this.getRoles();

        this.mySwalToast({
          title: "تبریک",
          html: res.data.message,
          icon: "success",
        });

        this.showPanel = false;
        this.resetForm();
      });
    },
    deleteItem(index) {
      let sectionId = this.roles[index].id;
      const data = {
        // project_id: this.projectGetter?.id,
        id: sectionId,
      };

      this.mySwalConfirm({
        title: "هشدار",
        html: "از حذف این بخش مطمئن هستید؟",
        icon: "warning",
      }).then((result) => {
        if (result.isConfirmed) {
          ApiService.formData(permitApi.roles.delete, data).then((res) => {
            this.getRoles();

            this.mySwalToast({
              title: "تبریک",
              html: res.data.message,
              icon: "success",
            });
          });
        }
      });
    },
    updateList() {
      this.resetPagination();
      this.getRoles();
    },
    resetPagination() {
      this.pagination = {
        pages: 0,
        total: 0,
        page: 1,
        offset: 0,
        limit: 10,
      };
    },
    pageLimitChanged(paging) {
      this.resetPagination();
      this.pagination.limit = paging.limit;

      this.getRoles();
    },
    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.getRoles();
    },
    sortChanged(sorting) {
      // keep limit status.
      // reset page and offset values.

      this.pagination.page = this.pagination.offset = 0;
      this.sorting = sorting;

      this.getRoles();
    },
    toggleRolesPanel(index = undefined) {
      if (index !== undefined) {
        if (this.prevSelectedItemIndex !== undefined)
          this.roles[this.prevSelectedItemIndex].active = false;

        this.prevSelectedItemIndex = index;
        this.roles[index].active = true;

        this.selectedItemClone = structuredClone(this.roles[index]);
      } else this.resetForm();

      this.showPanel = true;
    },
    resetForm() {
      this.selectedItemClone = {
        title: "",
        id: undefined,
        // project_id: this.projectGetter?.id,
      };
    },
    checkPermisionBeforGetList() {
      if (this.fetchingData) return;
      this.fetchingData = true;

      this.checkPermissions({ permission: "roles_view", _this: this })
        .then(() => {
          if (this.projectGetter) {
            this.getRoles()
              .then(() => {
                this.canView = true;
                this.fetchingData = false;
              })
              .catch(() => {
                this.canView = false;
                this.fetchingData = false;
              });
          } else {
            this.getProjects().then(() => {
              this.getRoles()
                .then(() => {
                  this.canView = true;
                  this.fetchingData = false;
                })
                .catch(() => {
                  this.canView = false;
                  this.fetchingData = false;
                });
            });
          }
        })
        .catch(() => {
          this.canView = false;
          this.fetchingData = false;
        });
    },
    async getProjects() {
      return await ApiService.formData(permitApi.projects.list).then((res) => {
        this.SET_PROJECT(res.data.data[0]);
      });
    },
  },
  components: {
    // SubHeaderWithSelect: defineAsyncComponent(() =>
    //   import("@/components/global/SubHeaderWithSelect.vue")
    // ),
    // TheContentLoading: defineAsyncComponent(() =>
    //   import("@/components/global/TheContentLoading.vue")
    // ),
    // MyTable: defineAsyncComponent(() =>
    //   import("@/components/global/MyTable.vue")
    // ),
    // NoData: defineAsyncComponent(() =>
    //   import("@/components/global/NoData.vue")
    // ),
    // TheButtonLoading: defineAsyncComponent(() =>
    //   import("@/components/global/TheButtonLoading.vue")
    // ),
  },
};
</script>
<style scoped lang="scss"></style>
