<template>
  <div class="containner">
    <div class="common-layout">
      <el-container>
        <el-aside>
          <el-row class="tac">
            <el-col :span="24">
              <LeftMenu></LeftMenu>
            </el-col>
          </el-row>
        </el-aside>
        <el-container>
          <el-header class="userHeader">
            <div>
              <div class="userInfo">
                <el-avatar :src="avatarimg" />
                <label>{{ user.name }}</label>
              </div>
            </div>
            <div style="height: 100%; padding-left: 20px">
              <el-icon class="logout"
                ><el-tooltip content="退出登录" placement="bottom" effect="dark">
                  <img @click="exit" style="cursor: pointer" src="/img/exit.png" />
                </el-tooltip>
              </el-icon>
            </div>
          </el-header>
          <el-main>
            <RouterView></RouterView>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import LeftMenu from '@/components/home/LeftMenu.vue'
import { ElMessage } from 'element-plus'
import { onBeforeMount, ref } from 'vue'
import { useUserStore } from '@/stores/user'

const user = ref()
const avatarimg = '/avatar/1.jpg'

const exit = () => {
  ElMessage({
    message: '退出成功',
    type: 'success',
    duration: 1000
  })
  router.replace({
    name: 'loginView'
  })
}
onBeforeMount(() => {
  const userStore = useUserStore()
  user.value = userStore.userInfo
})
</script>

<style scoped lang="scss">
* {
  overflow: hidden;
}
.common-layout {
  height: 100vh;
  width: 100vw;
}
span {
  font-size: large;
}
.el-aside {
  width: var(--el-menu--collapse-width);
  background-color: #545c64;
}
.el-header {
  background-color: #6a737d;
  border-bottom: solid;
  border-bottom-width: 1px;
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0px;
}
label {
  max-width: 100px; /* 最大宽度为100px */
  overflow: hidden;
  white-space: nowrap; /* 确保文本不换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  color: #f5f5f5;
}
.userHeader {
  display: flex;
  justify-content: flex-end;
}
.userInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.logout {
  height: 100%;
  width: 50px;
}
.el-main {
  --el-main-padding: 0;
}
.el-container {
  height: 100%;
}
</style>
