<template>
  <el-scrollbar :class="['app-sidebar', collapse && 'is-hide']" view-class="app-sidebar__view">
    <div :class="['app-sidebar__header', state.isMobile ? 'is-show' : collapse && 'is-hide']">
      <span class="logo">{{ $t('app.name') }}</span>
    </div>
    <div class="app-sidebar__menu">
      <app-sidemenu :collapse="state.isMobile ? false : collapse" @select="routerTo" />
    </div>
    <div :class="['app-sidebar__copyright', state.isMobile ? 'is-show' : collapse && 'is-hide']">
      <a href="https://github.com/oringecat/vcat-admin" target="_blank">VCat Admin - GitHub</a>
      <span>&copy;2007-{{ year }} teamwei.com</span>
    </div>
    <div :class="['app-sidebar__mask', collapse && 'is-hide']" @click="hideSidebar()" v-if="state.isMobile"></div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { watch } from 'vue'
import { useRouter } from 'vue-router'
import client from '@/utils/client'
import AppSidemenu from '../sidemenu/index.vue'

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

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

const { state } = client
const router = useRouter()
const year = new Date().getFullYear()

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

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

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

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