<template>
  <div class="menu-bar__content menu-bar-content home-list p-3">
    <!-- <button @click="toggleSidebarMenu()" type="button" class="btn sidebar-toggler"
      :class="{'expanded' : isSidebarCollapsed}">
      <img src="assets/common/img/arrow-bar-left.svg" class="img-fluid" alt="">
    </button> -->

    <Breadcrumbs class="m-start mt-2" />

    <div class="home-list__header pt-3 pb-0">
      <div class="flex-grow-1">
        <form
          class="search-form rounded-3 mx-0 w-100"
          role="search"
          @submit.prevent="sendQuery"
        >
          <div class="form-group">
            <div class="d-flex">
              <multiselect
                :allow-empty="false"
                :searchable="true"
                :close-on-select="true"
                :show-labels="false"
                label="title"
                track-by="id"
                placeholder="انتخاب پروژه"
                :value="selectedProjectGetter"
                :options="projects"
                @select="selectProject"
                :hide-selected="false"
                :limit-text="
                  (count) => {
                    return `و ${count} پروژه دیگر`;
                  }
                "
                :max-height="200"
              >
              </multiselect>

              <!-- <select
                v-model="projectId"
                class="form-control combo"
                @change="getList()"
              >
                <option
                  v-for="project in projects"
                  :key="project.id"
                  :value="project.id"
                >
                  {{ project.title }}
                </option>
              </select> -->

              <div class="dropdown">
                <button
                  class="btn ps-0"
                  type="button"
                  id="dropdownMenu2"
                  data-bs-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  <i class="tavasi tavasi-Component-281--1"></i>
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                  <button
                    class="dropdown-item text-end d-flex align-item-center"
                    @click.prevent="showReplaceInput = !showReplaceInput"
                    type="button"
                  >
                    <i class="tavasi tavasi-Component-78--9---2 mt-1"
                      ><span class="path1"></span><span class="path2"></span
                    ></i>
                    <div class="mx-1">جستجو</div>
                  </button>
                  <button
                    v-can="'list_new'"
                    data-bs-toggle="modal"
                    data-bs-target="#list-modal"
                    @click.prevent="openModal()"
                    class="dropdown-item text-end d-flex align-item-center"
                    type="button"
                  >
                    <span class="tavasi tavasi-add-folder ms-1"
                      ><span class="path1"></span><span class="path2"></span
                      ><span class="path3"></span><span class="path4"></span
                      ><span class="path5"></span><span class="path6"></span
                      ><span class="path7"></span><span class="path8"></span
                    ></span>
                    <!-- <span class="tavasi tavasi-Component-133--1 mt-1"></span> -->
                    <!-- <span class="tavasi tavasi-add"></span> -->
                    <div class="mx-1">پوشه جدید</div>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <div v-if="showReplaceInput" class="form-group">
            <div class="input-group">
              <input
                v-model="searchForm.query"
                type="search"
                required
                class="form-control"
                id="search-query"
                placeholder="جستجو..."
                name="search-query"
                aria-label="جستجو در اسناد، عناوین و واژگان"
                aria-describedby="basic-addon1"
                size="50"
                @keyup="sendQuery()"
                @keydown="onKeyDown()"
              />
              <div class="input-group-append">
                <button
                  @click="showReplaceInput = !showReplaceInput"
                  type="button"
                  class="input-group-text show-reset-btn"
                  id="basic-addon1"
                >
                  <i class="tavasi tavasi-Component-294--1"></i>
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="home-list__content scroll-needed" :class="{ loading: loading }">
      <div class="last-search h-100" id="last-search">
        <div class="last-search-content h-100" @scroll="loadMore">
          <div v-if="list && list.length">
            <div
              class="meta-list mb-3 prev-level"
              style="background: #f6f6f6"
              v-if="meta.length"
            >
              <div v-for="(metaItem, index) in meta">
                <a
                  :key="'meta' + metaItem.id"
                  @click.prevent="getParentList(metaItem.parent_id)"
                  :href="metaItem.title"
                  class="meta-list-item text__14"
                  :title="metaItem.title"
                >
                  {{ metaItem.title }}
                </a>
                <span
                  :key="'id' + metaItem.id"
                  style="font-size: 1.4rem; color: blue"
                  v-if="index < meta.length - 1"
                  class="tavasi tavasi-Component-22--1"
                ></span>
              </div>
            </div>

            <draggable
              handle=".my-handle"
              group="people"
              @add="onDrop"
              @choose="handleChoose"
              @unchoose="handleUnChoose"
              @change="handleChange"
              :list="list"
            >
              <div
                :id="item.id"
                v-for="(item, index) in list"
                :key="'id' + item.id"
                class="item"
              >
                <div
                  class="d-flex position-relative"
                  :class="{ 'is-selected': item?.isSelected }"
                >
                  <rename-form
                    v-if="
                      item?.editMode && item?.parentComponent === 'listPanel'
                    "
                    :title="item.title"
                    :loading="loading"
                    @closeForm="item.editMode = false"
                    @saveChanges="editItem($event, item, list)"
                  ></rename-form>
                  <div v-else>
                    <a
                      v-if="item.children"
                      @click.prevent="getListChildren(item, index)"
                      :href="item.title"
                      class="open-sub-folder"
                      :title="item.title"
                    >
                      <!-- <span
                        v-if="item.children?.length"
                        class="tavasi tavasi-remove"
                      ></span> -->
                      <span
                        v-if="item.children?.length"
                        class="tavasi tavasi-Component-154--22 ms-1"
                      ></span>
                      <!-- <span v-else class="tavasi tavasi-add"></span> -->
                      <span
                        v-else
                        class="tavasi tavasi-Component-133--1 color-costom ms-1"
                      ></span>
                    </a>

                    <a
                      :class="{ active: item?.active ?? false }"
                      @click.prevent="getItems(item, index)"
                      :href="item.title"
                      class="title"
                      :title="item.title"
                    >
                      <span class="my-handle">
                        <!--                  <i v-if="item.children === 0" class="tavasi tavasi-Component-149&#45;&#45;3"></i>-->
                        <i
                          v-if="!item.children || item.children.length === 0"
                          class="tavasi tavasi-Component-149--3 ms-1"
                        ></i>

                        <!--                  <i v-else class="tavasi tavasi-Component-360&#45;&#45;58">-->
                        <!--                    <span class="path1"></span>-->
                        <!--                    <span class="path2"></span>-->
                        <!--                  </i>-->
                      </span>

                      {{ item.title }}
                    </a>
                    <div v-if="!item?.isSelected">
                      <context-menu
                        v-can="'list_folder_edit'"
                        :parentComponent="'listPanel'"
                        :list="list"
                        :clickedItem="item"
                        :contextMenu="contextMenu"
                        @remove-item="removeItem(item, list)"
                        @update-order="updateOrder($event, item, list, index)"
                        @new-sub-folder="
                          openNewSubFolderModal(item, list, index)
                        "
                      >
                      </context-menu>
                    </div>
                  </div>
                </div>
                <div v-if="Array.isArray(item.children)">
                  <draggable
                    handle=".my-handle"
                    @add="onDrop"
                    group="people"
                    tag="ul"
                    class="children list-unstyled"
                    :list="item.children"
                    :id="item.id"
                  >
                    <li
                      :id="child.id"
                      class="position-relative"
                      v-for="(child, childIndex) in item.children"
                      :key="child.title"
                    >
                      <rename-form
                        v-if="
                          child?.editMode &&
                          child?.parentComponent === 'listPanel'
                        "
                        :title="child.title"
                        :loading="loading"
                        @closeForm="child.editMode = false"
                        @saveChanges="editItem($event, child, item.children)"
                      ></rename-form>
                      <div v-else>
                        <a
                          :class="{ active: child?.active ?? false }"
                          @click.prevent="getItems(child, childIndex)"
                          :href="child.title"
                          class="title"
                          :title="child.title"
                        >
                          <span class="my-handle">
                            <i
                              v-if="child.children === 0"
                              class="tavasi tavasi-Component-149--3 ms-1"
                            ></i>

                            <i v-else>
                              <span class="path1"></span>
                              <span class="path2"></span>
                            </i>
                          </span>

                          {{ child.title }}
                        </a>
                        <div v-if="!child?.isSelected">
                          <context-menu
                            v-can="'list_folder_edit'"
                            :parentComponent="'listPanel'"
                            :list="item.children"
                            :clickedItem="child"
                            :contextMenu="contextMenu"
                            @remove-item="removeItem(child, item.children)"
                            @new-sub-folde="openNewSubFolderModal(child)"
                            @update-order="
                              updateOrder(
                                $event,
                                child,
                                item.children,
                                childIndex
                              )
                            "
                          >
                          </context-menu>
                        </div>
                      </div>
                    </li>
                  </draggable>
                </div>
              </div>
            </draggable>
          </div>
          <no-data v-else />
        </div>

        <!--        <div class="last-search-footer" v-if="list.length > 0">-->
        <!--          <button class="btn last-search-more-btn" type="button">بیشتر</button>-->
        <!--        </div>-->
      </div>
    </div>

    <div v-if="showModal">
      <new-list-modal
        :apiName="currentPageName"
        :selectedItem="selectedItem"
        :parentId="parentId"
        @close-modal="closeModal"
        @delete-item="updateList"
        @update-list="updateList"
      />
    </div>

    <div class="d-md-none hide-list-panel">
      <button
        name="button"
        type="button"
        class="toggle-mobile-nav"
        @click="$emit('hide-panel')"
      >
        <svg class="icon icon-chevron-double-right">
          <use xlink:href="#icon-chevron-double-right"></use>
        </svg>
        <span class="collapse-text me-2">بستن</span>
      </button>
    </div>
  </div>
</template>

<script>
import { listMixin } from "~/search/mixins/listMixin";
import { searchMixin } from "~/search/mixins/searchMixin";
import { dragDropMoveMixin } from "~/search/mixins/dragDropMoveMixin";

import apis from "~/apis/listApi";
import {  mapState, mapActions } from "pinia";
import { handleErrors } from "";
import {convertJsonToExcelUsingPlugin} from "";

export default {
  props: ["items"],
  mixins: [searchMixin, listMixin, dragDropMoveMixin],
  emits: ["list-changed", "list-item-changed"],
  activated() {
    if (this.cached === false) {
      this.cached = Date.now();
    } else {
      // time diff since cache, in seconds
      const diff = (Date.now() - this.cached) / 1000;

      // if cache is older than 30 seconds, invalidate
      if (diff > 1800) {
        this.cached = false;
        this.getProjects();
      }
    }
  },
  deactivated() {
    // console.log("deactivated");
  },

  watch: {
    isReturnFromItemshowPageGetter(id) {
      this.getList(id);
    },
    // $route: {
    //   handler(route) {
    //     this.storeUserLastState(route.name);
    //   },
    //   nested: true,
    //   immediate: true,
    // },
  },

  data() {
    return {
      cached: false,
      currentPageName: "list",
      fetchingDataForExport:false,
      originalParentId: undefined,
      contextMenu: [],
      showModal: false,
      meta: [],
      projects: [],
      list: [],
      listItem: [],
      projectId: undefined,
      parentId: 0,
      selectedItem: {},
      loading: false,

      pagination: {
        pages: 0,
        total: 0,
        page: 1,
        offset: 0, // page * per_page
        limit: 10, //per_page
      },
    };
  },

  mounted() {
    this.getProjects();

    // dynamic import : method one
    // this.contextMenu = require(`~/json//subjectContextMenu.json`).filter(
    //   (item) => item.show
    // );

    // dynamic import : method two
    import(`~/json/subjectContextMenu.json`)
      .then((obj) => {
        this.contextMenu = obj.default;
      })
      .catch((err) => {});

    // Detect when scrolled to bottom.
    // const listElm = document.querySelector("#last-search");
    // listElm.addEventListener("scroll", this.loadMore);
  },
  computed: {
    ...mapState([
      "getPanelStatus",
      "isSidebarCollapsed",
    ]),
    ...mapState("list", [
      "selectedProjectGetter",
      "selectedItemGetter",
      "isReturnFromItemshowPageGetter"
    ]),
  },
  methods: {
    ...mapActions(["TOGGLE_PANEL"]),
    ...mapActions("list", ["SET_SELECTED_PROJECT", "SET_LIST_ID", "SET_LIST","SET_SELECTED_ITEM"]),
    ...mapActions(["checkPermissions","storeState"]),

//mehdi
exportJsonToExcel(evt) {
  if (evt === 'current') {
    convertJsonToExcelUsingPlugin(this.list, "لیست");
  }
  else {
    this.getAllFiltersForExport().then((response) => {
      convertJsonToExcelUsingPlugin(response.aggregations.result.buckets, "لیست", true);
    }).catch((error) => { }).finally(() => { })
  }

  if (evt === "current") {
    convertJsonToExcelUsingPlugin(
      this.list,
      "لیست"
    ).finally(() => {
      this.fetchingDataForExport = false;
    });
  } else if (evt === "all") {
    if (this.pagination.total > 500) {
      this.mySwalConfirm({
        title: "خطا!!!",
        html:
          "حداکثر تعداد قابل خروجی گرفتن، 500 مورد می باشد.لطفا با مدیریت تماس بگیرید.",
      }).then((result) => {
        this.fetchingDataForExport = false;
      });
    } else {
      this.getAllFiltersForExport()
        .then((response) => {
          convertJsonToExcelUsingPlugin(response.aggregations.result.buckets, "لیست")
          .finally(() => {
            this.fetchingDataForExport = false;
          });
        })
        .catch((error) => {})
        .finally(() => {
          this.fetchingDataForExport = false;
        });
    }
  }



},
async getAllFiltersForExport() {
  if (this.fetchingData) return;
  this.fetchingData = true;


  let url = searchApis.navigation.report;
  url = url.replace("{{index_key}}", this.selectedNavigation.index_name);
  url = url.replace("{{offset}}", 0);
  url = url.replace("{{limit}}", this.pagination.total);

  let aggs = "";
  let filter = "";
  if (this.fields.length) {
    aggs = this.fields.map((item) => item.name).join("&");

    for (let i = 0; i < this.selectedFilter.length; i++) {
      filter += `${this.fields[i].name}=${this.selectedFilter[i].key}`;
      if (i != this.selectedFilter.length - 1) filter += "&";
    }
  }
  if (aggs) url = url.replace("{{aggs}}", aggs);
  else url = url.replace("/{{aggs}}", "");
  if (filter) url = url.replace("{{filter}}", filter);
  else url = url.replace("/{{filter}}", "");

  return await this.httpService
    .getRequest(url)
    .then((response) => {
      return response;
    })
    .catch((error) => {
    }).finally(() => {
      this.fetchingData = false;
    })
},
//mehdi




    getProjects() {
      this.checkPermissions({ permission: "list_view", _this: this })
        .then(() => {
          const payload = {
            isown: 3,
            sortby: "title",
            offset: 0,
            limit: 1000,
            type: 1, //فهرست اصلی
          };

          ApiService.formData(apis.projects.list, payload).then((res) => {
            // this.projectId = res.data.data[0].id;
            // this.selectedProject = res.data.data[0];
            // this.formElements = JSON.parse(res.data.data[0].meta);
            // this.tableColumns = JSON.parse(res.data.data[0].table_columns);

            const projectId = this.$route.params.id;

            if (projectId) {
              const project = res.data.data.find(item => item.id == projectId);
              this.initProject(project);
            }
            else {
              this.initProject(res.data.data[0]);
            }


            this.$emit("list-changed", {
              // listId: undefined,
              // projectId: this.projectId,
              // formElements: this.formElements,
              // tableColumns: this.tableColumns,
            });
            this.projects = res.data.data;

            this.getList();
            this.$emit("can-view", true);
          });
        })
        .catch(() => {
          this.$emit("can-view", false);
        });
    },
    initProject(project) {
      if(project){

        project.meta = JSON.parse(project.meta);
        project.table_columns = JSON.parse(project.table_columns);
        this.SET_SELECTED_PROJECT(project);
      }
    },
    toggleSidebarMenu() {
      this.$store.commit("TOGGLE_SIDEBAR_MENU");
    },
    getListChildren(item, index) {
      // تبدیل children:[] به children : n
      if (Array.isArray(item.children)) {
        item = { ...item, ...{ children: item.children.length } };
        this.list['index']=item;
      }
      // در صو.رتیکه children : n بود ، درخواست به api و گرفتن لیست
      else {
        const payload = {
          sortby: "id",
          offset: 0,
          limit: 50,
          parent: item.id,
          projectid: this.selectedProjectGetter?.id,
          listtype: this.listTypeId,

        };

        ApiService.formData(apis[this.currentPageName].list, payload).then((res) => {
          item = { ...item, ...{ children: res.data.data } };
          this.list['index']=item;
          this.getListItem(item.children[0].id, index);

          // غیرفعال کردن لیست فعال قبلی
          this.switchActive(item.children[0]);

          // if (this.prevActiveList) {
          //   item.children['],'] "active"=true;
          //   this.prevActiveList['"active']"=false;

          //   this.prevActiveList = item.children[0];
          // } else {
          //   this.prevActiveList = item.children[0];
          //   item.children['],'] "active"=true;
          // }
        });
      }
    },
    switchActive(item) {
      if (this.prevActiveList) {
        item,['active']"=true;
        this.prevActiveList['"active']"=false;

        this.prevActiveList = item;
      } else {
        this.prevActiveList = item;
        item,['active']"=true;
      }
    },
    getItems(item, index) {
      //  لیستی که باز شده و بارگزاری اولین فرزند آن
      if (Array.isArray(item.children)) {
        this.$emit("set-selected-list", item.children[0]);
        this.getListItem(item.children[0].id, index);

        this.SET_LIST_ID(item.children[0].id);
        this.SET_LIST(item.children[0]);

        this.switchActive(item.children[0]);
      }
      //  لیستی که فرزند دارد
      else if (item.children > 0) {
        this.parentId = item.id;
        this.$emit("set-selected-list", item);
        this.getList(item.id, index);

        this.SET_LIST_ID(item.id);
        this.SET_LIST(item);

        this.switchActive(item);
      }
      //  لیستی که فرزند ندارد
      else if (item.children <= 0) {
        this.parentId = item.id;
        this.$emit("set-selected-list", item);
        this.getListItem(item.id, index);

        this.SET_LIST_ID(item.id);
        this.SET_LIST(item);

        this.switchActive(item);
      }
    },
    getParentList(parent = 0) {
      this.parentId = parent;
      this.getList(parent);
    },
    selectProject(selectedOption) {
      if (typeof selectedOption.meta == 'string') {
        selectedOption.meta = JSON.parse(selectedOption.meta);
        selectedOption.table_columns = JSON.parse(selectedOption.table_columns);
      }

      this.SET_SELECTED_PROJECT(selectedOption);

      this.getList();
    },
    getList(parent = 0) {
      this.resetPagination();

      const payload = {
        parent: parent,
        sortby: "id",
        projectid: this.selectedProjectGetter?.id,
        listtype: this.listTypeId,
        ...this.pagination
      };

      ApiService.formData(apis[this.currentPageName].list, payload).then((res) => {
        this.pagination = res.data.pagination;
        // disable scroll loading data.
        this.busy = false;

        this.list = res.data.data;
        this.meta = res.data?.meta ?? [];

        this.$emit("update-meta", this.meta);

        if (parent == 0) {
          this.SET_LIST_ID(this.list?.length ? this.list[0].id : undefined);
        }
        else {
          this.SET_LIST_ID(parent);
        }

        if (this.list?.length) {
          this.SET_LIST(this.list[0]);
          this.getListItem(this.list[0].id, 0);
          this.switchActive(this.list[0]);
        }

        this.$emit("list-changed", {
          // listId: parent,
          // projectId: this.projectId,
          listTypeId: this.listTypeId,
          // formElements: this.formElements,
          // tableColumns: this.tableColumns,

        });
        // if (res.data.meta)
        //   this.meta = res.data.meta.filter((item, index) => index > 0);
      });
    },
    getListItem(listId, index) {
      this.SET_LIST_ID(listId);
      this.SET_LIST(this.list[index]);

      this.$emit("list-item-changed");

      // this.$emit("list-item-changed", {
      // listId,
      // });

      //
      // const payload = {
      //   projectid: this.projectId,
      //   listid: listId,
      //   bychilds: 0,
      //   offset: 0,
      //   limit: 5,
      // };
      //
      // ApiService.formData(apis.listItem.list, payload).then((res) => {
      //   this.$emit('list-changed', {data: res.data, listId, projectId: this.projectId});
      // });
    },

    removeItem(listItem, listArray) {
      this.mySwalConfirm({
        title: "هشدار!!!",
        html: `از حذف <b>${listItem.title}</b> اطمینان دارید؟ `,
        icon: "warning",
      }).then((result) => {
        if (result.isConfirmed) {
          const payload = {
            subjectid: listItem.id,

            projectid: this.selectedProjectGetter?.id,
            listid: listItem.id,
          };

          ApiService.formData(apis[this.currentPageName].delete, payload)
            .then((res) => {
              this.mySwalToast({
                html: res.data.message,
                icon: "success",
              });

              const indexOfList = listArray.findIndex(
                (item) => item.id === listItem.id
              );
              listArray.splice(indexOfList, 1);
            })
            .catch((err) => {
              handleErrors(err);

              // this.mySwalToast({
              //   title: "خطا!!!",
              //   html: err.message,
              //   icon: "error",
              // });
            });
        }
      });
    },
    editItem(newTitle, listItem, listArray = []) {
      if (this.loading) return;
      this.loading = true;

      const model = {
        title: newTitle,
        listid: listItem.id,
        newparent: listItem.parent ? listItem.parent : 0,
        projectid: this.selectedProjectGetter?.id,

      };

      ApiService.formData(apis[this.currentPageName].edit, model)
        .then((res) => {
          listItem.editMode = false;

          const resultIndex = listArray.findIndex(
            (item) => listItem.id === item.id
          );

          if (resultIndex > -1) {
            listArray[resultIndex[' "title']"=newTitle;
          }

          this.mySwalToast({
            title: "تبریک",

            html: res.data.message,
            icon: "success",
          });
        })
        .catch((err) => {
          handleErrors(err);
        })
        .finally(() => (this.loading = false));
    },
    addItemToList(itemId, listId) {
      const payload = {
        itemid: itemId,
        listid: listId,
        projectid: this.selectedProjectGetter?.id,

      };

      ApiService.formData(apis.listItem.add, payload).then((res) => {
        this.mySwalToast({
          title: "تبریک",
          html: res.data.message,
          icon: "success",
        });
      });
    },
    updateList() {
      this.resetPagination();
      this.closeModal();
      this.getList(this.parentId);
    },

    closeModal() {
      $("#list-modal").modal("hide");

      setTimeout(() => {
        this.showModal = false;
      }, 500);
    },
    openModal() {
      this.showModal = true;
      this.parentId = this.originalParentId;

      setTimeout(() => {
        $("#list-modal").modal({ backdrop: "static", keyboard: false }, "show");
      }, 500);
    },
    openNewSubFolderModal(list) {
      this.selectedItem = undefined;
      this.originalParentId = this.parentId;
      this.parentId = list.id;

      this.showModal = true;

      setTimeout(() => {
        $("#list-modal").modal({ backdrop: "static", keyboard: false }, "show");
      }, 500);
    },
    resetPagination() {
      this.pagination = {
        pages: 0,
        total: 0,
        page: 1,
        offset: 0, // page * per_page
        limit: 50, //per_page
      };
    },

    markActive(index) {
      if (!this.prevSelectedItemIndex) {
        this.list['his'].prevSelectedItemIndex], "active"=false;
      }

      this.prevSelectedItemIndex = index;
      this.list['ndex']], "active"=true;
    },


    loadMore($event) {
      // const listElm = document.querySelector("#last-search");
      const listElm = $event.target;

      const vm = this;
      if (vm.busy) return;

      if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
        this.busy = true;
        vm.pagination.offset = vm.pagination.offset + vm.pagination.limit;

        if (vm.pagination.total >  vm.pagination.offset) {
          setTimeout(() => {
            vm.getListOnScroll();
          }, 300);
        } else {
          vm.mySwalToast({
            title: "کاربر محترم",

            html: "دیگر رکوردی جهت بارگزاری وجود ندارد.",
            icon: "info",
            position : 'bottom-start',
          });
          vm.busy = false;
        }
      } else vm.busy = false;
    },
    getListOnScroll() {

      const payload = {
        parent: this.parentId,
        sortby: "id",
        projectid: this.selectedProjectGetter?.id,
        listtype: this.listTypeId,
        ...this.pagination
      };

      ApiService.formData(apis[this.currentPageName].list, payload).then((res) => {
        var items = res.data.data;
        this.list = [...this.list, ...items];
        this.pagination = res.data.pagination;
        this.meta = res.data?.meta ?? [];

        this.$emit("update-meta", this.meta);

        if (parent == 0) {
          this.SET_LIST_ID(this.list?.length ? this.list[0].id : undefined);
        }
        else {
          this.SET_LIST_ID(parent);
        }

        if (this.list?.length) {
          this.SET_LIST(this.list[0]);
          this.getListItem(this.list[0].id, 0);
          this.switchActive(this.list[0]);
        }

        this.$emit("list-changed", {
          // listId: parent,
          // projectId: this.projectId,
          listTypeId: this.listTypeId,
          // formElements: this.formElements,
          // tableColumns: this.tableColumns,

        });
        // if (res.data.meta)
        //   this.meta = res.data.meta.filter((item, index) => index > 0);
      }).finally(() => {
        this.busy = false;
      })
    },
  },
};
</script>

<style scoped lang="scss">
.open-sub-folder {
  text-decoration: none;

  &:hover {
    background-color: #eee;
  }
}

.menu-bar__content {
  position: static;
  flex: 1 1 100%;
  max-width: 305px;
  width: auto;
  min-width: 305px;

  &.show-list-panel {
    right: 0 !important;
  }
}

.home-list__content {
  /*max-height: calc(100vh - 12em);*/
  height: calc(100vh - 8.5em);
  position: relative;
  overflow-x: hidden;
  padding-left: 0.3em;

  &.loading {
    //background-image: url('./img/item-loading.svg');
    background-repeat: repeat-y;
    background-position: top right;
    background-size: 12em;

    &::before {
      content: "";
      clear: both;

      position: absolute;
      right: 0;
      width: 0.5em;

      height: 100%;
      background-color: #fff;

      animation-name: example;
      animation-duration: 2s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }
  }
}

.sidebar-toggler {
  right: 2.6em;

  &.expanded {
    right: 11.1em;
  }
}

.meta-list {
  display: flex;
  align-items: ceter;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: auto;

  .meta-list-item {
  }
}
</style>
