<template>
  <el-container class="layout-container">
    <el-header>
      <div class="toolbar">
        <div class="title">
          <div class="img"></div>
          <div class="text">智能电梯图纸生成系统后台</div>
        </div>
        <el-dropdown>
          <div class="userInfo">
            <div class="avatar"></div>
            <div class="username">
              {{ userStore.userInfo?.nickname || userStore.userInfo?.username }}
            </div>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <el-container>
      <el-aside width="200px">
        <Aside></Aside>
      </el-aside>
      <el-main>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(item, index) in breadcrumbList">{{
            item.meta.title
          }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="container">
          <el-scrollbar>
            <router-view></router-view>
          </el-scrollbar>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import Aside from './components/aside.vue'
import { routes } from '@/router/index'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

const breadcrumbList = ref([])
const route = useRoute()
const router = useRouter()

const getBreadcrumbList = () => {
  const arr = []
  const obj = routes[0].children.find((item) => item.path === route.path.split('/')[1])
  arr.push(obj)
  if (route.path.split('/').length > 2) {
    arr.push(obj.children.find((item) => item.path === route.path.split('/')[2]))
  }
  breadcrumbList.value = arr
}
watch(route, () => {
  getBreadcrumbList()
})
getBreadcrumbList()

const logout = () => {
  userStore.logout()
  router.push('/login')
}
</script>

<style scoped lang="scss">
.layout-container {
  height: 100vh;
  min-width: 1200px;
  background-color: #f2f2f2;
  overflow: hidden;

  .el-header {
    padding: 0;
    height: 60px;

    .toolbar {
      height: 60px;
      background-color: #000;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 24px;
      color: #fff;

      .title {
        display: flex;
        align-items: center;
        height: 60px;

        .img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          margin-left: 24px;
          margin-right: 10px;
          background-color: skyblue;
        }

        .text {
          color: #fff;
          font-weight: 700;
        }
      }

      .userInfo {
        display: flex;
        align-items: center;

        .avatar {
          width: 26px;
          height: 26px;
          border-radius: 50%;
          background-color: skyblue;
          margin-right: 10px;
        }

        .username {
          color: #fff;
        }
      }
    }
  }

  .el-main {
    padding-top: 0;
    overflow-y: hidden;

    :deep(.el-breadcrumb__inner.is-link) {
      color: #006eff;
    }

    .el-breadcrumb {
      height: 56px;
      display: flex;
      align-items: center;
    }

    .container {
      height: calc(98vh - 110px);
      background-color: #fff;
      border-radius: 10px;
      padding: 15px;
      box-sizing: border-box;
    }
  }
}
</style>
