<template>
  <el-scrollbar :class="['app-sidebar', collapse && 'is-hide']" view-class="app-sidebar__view">
    <div :class="['app-sidebar__header', isMobile ? 'is-show' : collapse && 'is-hide']">
      <span class="logo">推广查询系统</span>
    </div>
    <div class="app-sidebar__menu">
      <app-sidemenu :collapse="isMobile ? false : collapse" @select="routerTo" />
    </div>
    <div :class="['app-sidebar__copyright', isMobile ? 'is-show' : collapse && 'is-hide']">
      <span>&copy;{{ year }} Muchinfo</span>
    </div>
    <div :class="['app-sidebar__mask', collapse && 'is-hide']" @click="hideSidebar()" v-if="isMobile"></div>
  </el-scrollbar>
</template>

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

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

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

const { isMobile } = themeStore.$mapState()
const router = useRouter()
const year = new Date().getFullYear()

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

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

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

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