<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']">
      <span class="logo">{{ t('app.name') }}</span>
    </div>
    <div class="app-sidebar__menu">
      <app-sidemenu :collapse="globalStore.isMobile ? false : collapse" @select="routerTo" />
    </div>
    <!-- <div :class="['app-sidebar__copyright', globalStore.isMobile ? 'is-show' : collapse && 'is-hide']">
      <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 { useRouter } from 'vue-router'
import { useGlobalStore, i18n } from '@/stores'
import AppSidemenu from '../sidemenu/index.vue'

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

const emit = defineEmits(['update:collapse'])
const t = i18n.global.t
const globalStore = useGlobalStore()
const router = useRouter()
const year = new Date().getFullYear()

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

// 菜单跳转
const routerTo = (active: string) => {
  hideSidebar();
  router.push({ name: active })
}

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

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