<template>
  <el-scrollbar :class="['app-sidebar', collapse && 'is-hide']" view-class="app-sidebar__view">
    <div :class="['app-sidebar__header', globalStore.isMobile ? 'is-show' : collapse && 'is-hide']">
      <img src="@pc/assets/images/sidebar-logo.png" title="logo" />
    </div>
    <div class="app-sidebar__menu">
      <app-sidemenu :collapse="globalStore.isMobile ? false : collapse" @click="routerTo" />
    </div>
    <div :class="['app-sidebar__copyright', globalStore.isMobile ? 'is-show' : collapse && 'is-hide']" v-if="false">
      <span>&copy;{{ year }} Muchinfo</span>
    </div>
    <div :class="['app-sidebar__mask', collapse && 'is-hide']" @click="hideSidebar()" v-if="globalStore.isMobile"></div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { watch } from 'vue'
import { useMenu } from '@/hooks/menu'
import { useGlobalStore } from '@/stores'
import AppSidemenu from '../sidemenu/index.vue'

const emit = defineEmits(['update:collapse'])

defineProps({
  // 折叠收起菜单栏
  collapse: Boolean,
})

const { router, getChildrenMenus } = useMenu()
const globalStore = useGlobalStore()
const year = new Date().getFullYear()

const hideSidebar = () => {
  if (globalStore.isMobile) {
    emit('update:collapse', true)
  }
}

// 路由跳转
const routerTo = (active: string) => {
  hideSidebar()
  const submenus = getChildrenMenus(active)
  // 判断是否存在子菜单
  if (submenus.length) {
    router.push({ name: submenus[0].code })
  } else {
    router.push({ name: active })
  }
}

// 监听设备变化
watch(() => globalStore.isMobile, () => hideSidebar())
</script>

<style lang="less">
@import './index.less';
</style>
