<template>
  <div
    class="relative h-full bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r shadow dark:shadow-gray-700"
    :class="isCollapse ? '' : '  px-2'"
    :style="{
      width: layoutSideWidth + 'px',
    }"
  >
    <el-scrollbar>
      <el-menu
        :collapse="isCollapse"
        :collapse-transition="false"
        :default-active="active"
        class="border-r-0 w-full"
        unique-opened
        @select="selectMenuItem"
      >
        <template v-for="item in routerStore.asyncRouters[0].children">
          <aside-component
            v-if="!item.hidden"
            :key="item.name"
            :router-info="item"
          />
        </template>
      </el-menu>
    </el-scrollbar>
    <div
      class="absolute bottom-8 right-2 w-8 h-8 bg-gray-50 dark:bg-slate-800 flex items-center justify-center rounded cursor-pointer"
      :class="isCollapse ? 'right-0 left-0 mx-auto' : 'right-2'"
      @click="toggleCollapse"
    >
      <el-icon v-if="!isCollapse">
        <DArrowLeft />
      </el-icon>
      <el-icon v-else>
        <DArrowRight />
      </el-icon>
    </div>
  </div>
</template>

  <script setup>
import AsideComponent from "@/view/layout/aside/asideComponent/index.vue";
import { ref, provide, watchEffect, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useRouterStore } from "@/pinia/modules/router";
import { useAppStore } from "@/pinia";
import { storeToRefs } from "pinia";
const appStore = useAppStore();
const { device, config } = storeToRefs(appStore);

defineOptions({
  name: "GvaAside",
});
const route = useRoute();
const router = useRouter();
const routerStore = useRouterStore();
const isCollapse = ref(false);
const active = ref("");
const layoutSideWidth = computed(() => {
  if (!isCollapse.value) {
    return config.value.layout_side_width;
  } else {
    return config.value.layout_side_collapsed_width;
  }
});
watchEffect(() => {
  active.value = route.meta.activeName || route.name;
});

watchEffect(() => {
  if (device.value === "mobile") {
    isCollapse.value = true;
  } else {
    isCollapse.value = false;
  }
});

provide("isCollapse", isCollapse);

const selectMenuItem = (index, _, ele, aaa) => {
  const query = {};
  const params = {};
  routerStore.routeMap[index]?.parameters &&
    routerStore.routeMap[index]?.parameters.forEach((item) => {
      if (item.type === "query") {
        query[item.key] = item.value;
      } else {
        params[item.key] = item.value;
      }
    });
  if (index === route.name) return;
  if (index.indexOf("http://") > -1 || index.indexOf("https://") > -1) {
    window.open(index);
  } else {
    router.push({ name: index, query, params });
  }
};

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};
</script>

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