<!--
 * @Author: xiejiang
 * @Date: 2024-11-11 09:38:40
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 09:14:20
 * @Description: 
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <t-layout class="layout-container">
    <Header class="layout-header" />
    <t-layout class="layout-content">
      <t-aside :class="[isCollapse ? '!w-[52px]' : '!w-[208px]']">
        <MenuSearch />
        <Menu />
        <!-- <MiddleBtn /> -->
      </t-aside>
      <Main class="content-main" :style="tabWidth" />
    </t-layout>
    <UpdateVersion :dialog-visible="dialogVisible" :state="userInfo?.clientLastVersion || null" />
  </t-layout>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/modules/user'
import { useGlobalStore } from '@/stores/modules/global'
import Header from '@/layouts/components/Header/index.vue'
import Main from '@/layouts/components/Main/index.vue'
import MenuSearch from '@/layouts/components/Menu/MenuSearch.vue'
import Menu from '@/layouts/components/Menu/index.vue'
// import MiddleBtn from '@/layouts/components/MiddleBtn/index.vue'

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

const dialogVisible = ref(false)

watch(
  userInfo,
  val => {
    if (!val) return
    if (val?.needUpd) {
      dialogVisible.value = true
    }
  },
  {
    deep: true
  }
)

onMounted(() => {
  // 获取用户信息
  if (userInfo.value?.needUpd) {
    dialogVisible.value = true
  }
})

const globalStore = useGlobalStore()
const isCollapse = computed(() => globalStore.isCollapse)
const tabWidth = isCollapse.value ? 'width: calc(100% - 52px)' : 'width: calc(100% - 208px)'
</script>

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