<template>
  <div :class="{ 'dark text-white-dark': store.state.semidark }">
    <nav class="sidebar fixed min-h-screen h-full top-0 bottom-0 w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] z-50 transition-all duration-300 "><!-- mt-5 -->
      <div class="bg-white dark:bg-[#0e1726] h-full">
        <div class="flex justify-between items-center px-2 py-1">
          <router-link to="/dashboard" class="main-logo flex items-center shrink-0">
            <img class="w-full h-12 ml-[5px] flex-none" src="https://www.raycos.com.cn/theme/m049/images/logo.png" alt="" />
            <!-- <span class="text-2xl ltr:ml-1.5 rtl:mr-1.5 font-semibold align-middle lg:inline dark:text-white-light">V3Studio</span> -->
          </router-link>
          <a
            href="javascript:;"
            class="collapse-icon w-8 h-8 rounded-full flex items-center hover:bg-gray-500/10 dark:hover:bg-dark-light/10 dark:text-white-light transition duration-300 rtl:rotate-180 hover:text-primary"
            @click="toggleSidebars"
          >
            <icon-carets-down class="m-auto rotate-90" />
          </a>
        </div>
        <!-- <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-menu mode="vertical" :default-active="$route.path" :collapse="isCollapse">
            <sidebar-item v-for="route in permissionRouters" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
          </el-menu>
        </el-scrollbar> -->
        <perfect-scrollbar
          v-if="superMenu == 'super'"
          :options="{
            swipeEasing: true,
            wheelPropagation: false,
          }"
          class="h-[calc(100vh-80px)] relative"
        >
          <ul class="relative font-semibold space-y-0.5 p-4 py-0">
            <!-- <li class="menu nav-item">
              <button
                type="button"
                class="nav-link group w-full"
                :class="{ active: activeDropdown === 'dashboard' }"
                @click="activeDropdown === 'dashboard' ? (activeDropdown = null) : (activeDropdown = 'dashboard')"
              >
                <div class="flex items-center">
                  <icon-menu-dashboard class="group-hover:!text-primary shrink-0" />
                  <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">
                    {{ $t('warehouse') }}
                  </span>
                </div>
                <div :class="{ 'rtl:rotate-90 -rotate-90': activeDropdown == 'dashboard' }">
                  <icon-caret-down />
                </div>
              </button>
              <vue-collapsible :isOpen="activeDropdown === 'dashboard'">
                <ul class="sub-menu text-gray-500">
                  <li>
                    <router-link to="/stock/warehouseList" @click="toggleMobileMenu">{{ $t('warehouseList') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/stock/goodsLend" @click="toggleMobileMenu">{{ $t('goodsLend') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/stock/goodsTransfer" @click="toggleMobileMenu">{{ $t('goodsTransfer') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/stock/goodsExchange" @click="toggleMobileMenu">{{ $t('goodsExchange') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/stock/goodsOutBound" @click="toggleMobileMenu">{{ $t('goodsOutBound') }}</router-link>
                  </li>
                </ul>
              </vue-collapsible>
            </li> -->
            <li class="menu nav-item">
              <button
                type="button"
                class="nav-link group w-full"
                :class="{ active: activeDropdown === 'package' }"
                @click="activeDropdown === 'package' ? (activeDropdown = null) : (activeDropdown = 'package')"
              >
                <div class="flex items-center">
                  <icon-menu-users class="group-hover:!text-primary shrink-0" />

                  <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">{{ $t('package') }}</span>
                </div>
                <div :class="{ 'rtl:rotate-90 -rotate-90': activeDropdown == 'package' }">
                  <icon-caret-down />
                </div>
              </button>
              <vue-collapsible :isOpen="activeDropdown === 'package'">
                <ul class="sub-menu text-gray-500">
                  <li>
                    <router-link to="/package/packageList" @click="toggleMobileMenu">{{ $t('packageList') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/package/packagePermissions" @click="toggleMobileMenu">{{ $t('packagePermissions') }}</router-link>
                  </li>
                </ul>
              </vue-collapsible>
              <vue-collapsible :isOpen="activeDropdown === 'package'">
                <ul class="sub-menu text-gray-500"></ul>
              </vue-collapsible>
            </li>
            <li class="menu nav-item">
              <button
                type="button"
                class="nav-link group w-full"
                :class="{ active: activeDropdown === 'templateManage' }"
                @click="activeDropdown === 'templateManage' ? (activeDropdown = null) : (activeDropdown = 'templateManage')"
              >
                <div class="flex items-center">
                  <icon-menu-users class="group-hover:!text-primary shrink-0" />

                  <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">{{ $t('templateManage') }}</span>
                </div>
                <div :class="{ 'rtl:rotate-90 -rotate-90': activeDropdown == 'templateManage' }">
                  <icon-caret-down />
                </div>
              </button>
              <vue-collapsible :isOpen="activeDropdown === 'templateManage'">
                <ul class="sub-menu text-gray-500">
                  <li>
                    <router-link to="/templateManage/smsTemplate" @click="toggleMobileMenu">{{ $t('smsTemplate') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/templateManage/emailtemplate" @click="toggleMobileMenu">{{ $t('emailtemplate') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/templateManage/accountTemplate" @click="toggleMobileMenu">{{ $t('accountTemplate') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/templateManage/systemMessage" @click="toggleMobileMenu">{{ $t('systemMessage') }}</router-link>
                  </li>
                </ul>
              </vue-collapsible>
              <vue-collapsible :isOpen="activeDropdown === 'package'">
                <ul class="sub-menu text-gray-500"></ul>
              </vue-collapsible>
            </li>
            <li class="menu nav-item">
              <button
                type="button"
                class="nav-link group w-full"
                :class="{ active: activeDropdown === 'users' }"
                @click="activeDropdown === 'users' ? (activeDropdown = null) : (activeDropdown = 'users')"
              >
                <div class="flex items-center">
                  <icon-menu-users class="group-hover:!text-primary shrink-0" />

                  <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">{{ $t('setting') }}</span>
                </div>
                <div :class="{ 'rtl:rotate-90 -rotate-90': activeDropdown == 'users' }">
                  <icon-caret-down />
                </div>
              </button>
              <vue-collapsible :isOpen="activeDropdown === 'users'">
                <ul class="sub-menu text-gray-500">
                  <li>
                    <router-link to="/setting/companyList" @click="toggleMobileMenu">{{ $t('companyList') }}</router-link>
                  </li>
                  <!-- <li>
                    <router-link to="/setting/roleManage" @click="toggleMobileMenu">{{ $t('roleManage') }}</router-link>
                  </li> -->
                  <li>
                    <router-link to="/setting/dicData" @click="toggleMobileMenu">{{ $t('dicData') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/setting/menuManage" @click="toggleMobileMenu">{{ $t('menuManage') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/setting/express" @click="toggleMobileMenu">{{ $t('express') }}</router-link>
                  </li>
                  <!-- express -->
                </ul>
              </vue-collapsible>
              <vue-collapsible :isOpen="activeDropdown === 'users'">
                <ul class="sub-menu text-gray-500"></ul>
              </vue-collapsible>
            </li>
          </ul>
        </perfect-scrollbar>
        <perfect-scrollbar
          v-if="superMenu == 'compan'"
          :options="{
            swipeEasing: true,
            wheelPropagation: false,
          }"
          class="h-[calc(100vh-80px)] relative"
        >
          <ul class="relative font-semibold space-y-0.5 p-4 py-0">
            <li class="menu nav-item">
              <button
                type="button"
                class="nav-link group w-full"
                :class="{ active: activeDropdown === 'dashboard' }"
                @click="activeDropdown === 'dashboard' ? (activeDropdown = null) : (activeDropdown = 'dashboard')"
              >
                <div class="flex items-center">
                  <icon-menu-dashboard class="group-hover:!text-primary shrink-0" />
                  <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">
                    {{ $t('warehouse') }}
                  </span>
                </div>
                <div :class="{ 'rtl:rotate-90 -rotate-90': activeDropdown == 'dashboard' }">
                  <icon-caret-down />
                </div>
              </button>
              <vue-collapsible :isOpen="activeDropdown === 'dashboard'">
                <ul class="sub-menu text-gray-500">
                  <li>
                    <router-link to="/stock/warehouseList" @click="toggleMobileMenu">{{ $t('warehouseList') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/stock/warehouseLocation" @click="toggleMobileMenu">{{ $t('warehouseLocation') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/stock/goodsLend" @click="toggleMobileMenu">{{ $t('goodsLend') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/stock/goodsTransfer" @click="toggleMobileMenu">{{ $t('goodsTransfer') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/stock/goodsExchange" @click="toggleMobileMenu">{{ $t('goodsExchange') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/stock/goodsOutBound" @click="toggleMobileMenu">{{ $t('goodsOutBound') }}</router-link>
                  </li>
                  <!-- goodsUnderstock -->
                  <li>
                    <router-link to="/stock/goodsInventory" @click="toggleMobileMenu">{{ $t('goodsInventory') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/stock/goodsInventoryLoss" @click="toggleMobileMenu">{{ $t('goodsInventoryLoss') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/stock/goodsUnderstock" @click="toggleMobileMenu">{{ $t('goodsUnderstock') }}</router-link>
                  </li>
                </ul>
              </vue-collapsible>
            </li>
            <li class="menu nav-item">
              <button
                type="button"
                class="nav-link group w-full"
                :class="{ active: activeDropdown === 'goods' }"
                @click="activeDropdown === 'goods' ? (activeDropdown = null) : (activeDropdown = 'goods')"
              >
                <div class="flex items-center">
                  <icon-menu-users class="group-hover:!text-primary shrink-0" />

                  <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">{{ $t('goods') }}</span>
                </div>
                <div :class="{ 'rtl:rotate-90 -rotate-90': activeDropdown == 'goods' }">
                  <icon-caret-down />
                </div>
              </button>
              <vue-collapsible :isOpen="activeDropdown === 'goods'">
                <ul class="sub-menu text-gray-500">
                  <li>
                    <router-link to="/goods/SKUlist" @click="toggleMobileMenu">{{ $t('SKUList') }}</router-link>
                  </li>
                  <!--   <li>
                    <router-link to="/goods/emailtemplate" @click="toggleMobileMenu">{{ $t('emailtemplate') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/goods/accountTemplate" @click="toggleMobileMenu">{{ $t('accountTemplate') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/goods/systemMessage" @click="toggleMobileMenu">{{ $t('systemMessage') }}</router-link>
                  </li> -->
                </ul>
              </vue-collapsible>
              <vue-collapsible :isOpen="activeDropdown === 'goods'">
                <ul class="sub-menu text-gray-500"></ul>
              </vue-collapsible>
            </li>
            <li class="menu nav-item">
              <button
                type="button"
                class="nav-link group w-full"
                :class="{ active: activeDropdown === 'companyMent' }"
                @click="activeDropdown === 'companyMent' ? (activeDropdown = null) : (activeDropdown = 'companyMent')"
              >
                <div class="flex items-center">
                  <icon-menu-users class="group-hover:!text-primary shrink-0" />

                  <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">{{ $t('companyMent') }}</span>
                </div>
                <div :class="{ 'rtl:rotate-90 -rotate-90': activeDropdown == 'companyMent' }">
                  <icon-caret-down />
                </div>
              </button>
              <vue-collapsible :isOpen="activeDropdown === 'companyMent'">
                <ul class="sub-menu text-gray-500">
                  <li>
                    <router-link to="/companyMent/administratorManage" @click="toggleMobileMenu">{{ $t('administratorManage') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/setting/roleManage" @click="toggleMobileMenu">{{ $t('roleManage') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/companyMent/branch" @click="toggleMobileMenu">{{ $t('branch') }}</router-link>
                  </li>
                  <!-- <li>
                    <router-link to="/companyMent/companyInfo" @click="toggleMobileMenu">{{ $t('companyInfo') }}</router-link>
                  </li> -->
                  <li>
                    <router-link to="/companyMent/configMsg" @click="toggleMobileMenu">{{ $t('configMsg') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/setting/systemLog" @click="toggleMobileMenu">{{ $t('systemLog') }}</router-link>
                  </li>
                </ul>
                <!-- configMsg -->
              </vue-collapsible>
              <vue-collapsible :isOpen="activeDropdown === 'companyMent'">
                <ul class="sub-menu text-gray-500"></ul>
              </vue-collapsible>
            </li>
            <!-- <li class="menu nav-item">
              <button
                type="button"
                class="nav-link group w-full"
                :class="{ active: activeDropdown === 'templateManage' }"
                @click="activeDropdown === 'templateManage' ? (activeDropdown = null) : (activeDropdown = 'templateManage')"
              >
                <div class="flex items-center">
                  <icon-menu-users class="group-hover:!text-primary shrink-0" />

                  <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">{{ $t('templateManage') }}</span>
                </div>
                <div :class="{ 'rtl:rotate-90 -rotate-90': activeDropdown == 'templateManage' }">
                  <icon-caret-down />
                </div>
              </button>
              <vue-collapsible :isOpen="activeDropdown === 'templateManage'">
                <ul class="sub-menu text-gray-500">
                  <li>
                    <router-link to="/templateManage/smsTemplate" @click="toggleMobileMenu">{{ $t('smsTemplate') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/templateManage/emailtemplate" @click="toggleMobileMenu">{{ $t('emailtemplate') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/templateManage/accountTemplate" @click="toggleMobileMenu">{{ $t('accountTemplate') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/templateManage/systemMessage" @click="toggleMobileMenu">{{ $t('systemMessage') }}</router-link>
                  </li>
                </ul>
              </vue-collapsible>
              <vue-collapsible :isOpen="activeDropdown === 'package'">
                <ul class="sub-menu text-gray-500"></ul>
              </vue-collapsible>
            </li>
            <li class="menu nav-item">
              <button
                type="button"
                class="nav-link group w-full"
                :class="{ active: activeDropdown === 'users' }"
                @click="activeDropdown === 'users' ? (activeDropdown = null) : (activeDropdown = 'users')"
              >
                <div class="flex items-center">
                  <icon-menu-users class="group-hover:!text-primary shrink-0" />

                  <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">{{ $t('setting') }}</span>
                </div>
                <div :class="{ 'rtl:rotate-90 -rotate-90': activeDropdown == 'users' }">
                  <icon-caret-down />
                </div>
              </button>
              <vue-collapsible :isOpen="activeDropdown === 'users'">
                <ul class="sub-menu text-gray-500">
                  <li>
                    <router-link to="/setting/companyList" @click="toggleMobileMenu">{{ $t('companyList') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/setting/roleManage" @click="toggleMobileMenu">{{ $t('roleManage') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/setting/dicData" @click="toggleMobileMenu">{{ $t('dicData') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/setting/menuManage" @click="toggleMobileMenu">{{ $t('menuManage') }}</router-link>
                  </li>
                  <li>
                    <router-link to="/setting/systemLog" @click="toggleMobileMenu">{{ $t('systemLog') }}</router-link>
                  </li>
                </ul>
              </vue-collapsible>
              <vue-collapsible :isOpen="activeDropdown === 'users'">
                <ul class="sub-menu text-gray-500"></ul>
              </vue-collapsible>
            </li> -->
          </ul>
        </perfect-scrollbar>
      </div>
    </nav>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, defineComponent } from 'vue';
import { useStore } from 'vuex';
import VueCollapsible from 'vue-height-collapsible/vue3';

import IconCaretsDown from '@/components/icon/icon-carets-down.vue';
import IconMenuDashboard from '@/components/icon/menu/icon-menu-dashboard.vue';
import IconMinus from '@/components/icon/icon-minus.vue';
import IconMenuChat from '@/components/icon/menu/icon-menu-chat.vue';
import IconMenuMailbox from '@/components/icon/menu/icon-menu-mailbox.vue';
import IconMenuTodo from '@/components/icon/menu/icon-menu-todo.vue';
import IconMenuNotes from '@/components/icon/menu/icon-menu-notes.vue';
import IconMenuScrumboard from '@/components/icon/menu/icon-menu-scrumboard.vue';
import IconMenuContacts from '@/components/icon/menu/icon-menu-contacts.vue';
import IconMenuInvoice from '@/components/icon/menu/icon-menu-invoice.vue';
import IconCaretDown from '@/components/icon/icon-caret-down.vue';
import IconMenuCalendar from '@/components/icon/menu/icon-menu-calendar.vue';
import IconMenuComponents from '@/components/icon/menu/icon-menu-components.vue';
import IconMenuElements from '@/components/icon/menu/icon-menu-elements.vue';
import IconMenuCharts from '@/components/icon/menu/icon-menu-charts.vue';
import IconMenuWidgets from '@/components/icon/menu/icon-menu-widgets.vue';
import IconMenuFontIcons from '@/components/icon/menu/icon-menu-font-icons.vue';
import IconMenuDragAndDrop from '@/components/icon/menu/icon-menu-drag-and-drop.vue';
import IconMenuTables from '@/components/icon/menu/icon-menu-tables.vue';
import IconMenuDatatables from '@/components/icon/menu/icon-menu-datatables.vue';
import IconMenuForms from '@/components/icon/menu/icon-menu-forms.vue';
import IconMenuUsers from '@/components/icon/menu/icon-menu-users.vue';
import IconMenuPages from '@/components/icon/menu/icon-menu-pages.vue';
import IconMenuAuthentication from '@/components/icon/menu/icon-menu-authentication.vue';
import IconMenuDocumentation from '@/components/icon/menu/icon-menu-documentation.vue';
import SidebarItem from '../sidebar/SidebarItem.vue';

const store = useStore();
const activeDropdown: any = ref('');
const subActive: any = ref('');
const permissionRouters = computed(() => store.getters.permission_routers);
const sidebar = computed(() => store.getters.sidebar);
const siteInfo = computed(() => store.getters.siteInfo);
const superMenu = computed(() => store.state.superMenu);
const isCollapse = computed(() => !sidebar.value.opened);
onMounted(() => {
  const selector = document.querySelector('.sidebar ul a[href="' + window.location.pathname + '"]');
  if (selector) {
    selector.classList.add('active');
    const ul: any = selector.closest('ul.sub-menu');
    if (ul) {
      let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link') || [];
      if (ele.length) {
        ele = ele[0];
        setTimeout(() => {
          ele.click();
        });
      }
    }
  }
});

const toggleMobileMenu = () => {
  if (window.innerWidth < 1024) {
    store.dispatch('toggleSidebar');
  }
};
const toggleSidebars = () => {
  store.dispatch('toggleSidebar');
};
</script>
