<template>
  <aside class="layout-aside">
    <side v-if="showSidebar && !isMobile" />
    <el-drawer v-model="isCollapsed" direction="ltr" :size="sidebarWidth" :with-header="false" body-class="p-0" v-else>
      <side />
    </el-drawer>
  </aside>
</template>

<script setup lang="ts">
import { useConfigStore } from '@/stores/modules/config'
import { useSettingStore } from '@/stores/modules/setting'
import Side from './Side.vue'

const settingStore = useSettingStore()
const configStore = useConfigStore()

const sidebarWidth = computed(() => settingStore.sidebarWidth)
const showSidebar = computed(() => settingStore.showSidebar)
const isMobile = computed(() => configStore.windowSizeLevel === 1)
const isCollapsed = computed({
  get() {
    if (settingStore.showSidebar && !isMobile.value) {
      return configStore.sideCollapsed
    } else {
      return configStore.sideDrawerShow
    }
  },
  set(value) {
    if (settingStore.showSidebar && !isMobile.value) {
      configStore.toggleCollapsed(value)
    } else {
      configStore.toggleDrawerShow(value)
    }
  }
})
</script>
