<template>
  <el-container class="main-layout">
    <!-- 侧边菜单 -->
    <el-aside :width="sidebarWidth" class="sidebar">
      <div class="logo">
        <el-icon :size="32" color="#ffffff"><Box /></el-icon>
        <span v-show="!appStore.sidebarCollapsed">资产管理系统</span>
      </div>

      <el-menu
        :default-active="activeMenu"
        :collapse="appStore.sidebarCollapsed"
        :unique-opened="true"
        router
        class="sidebar-menu"
      >
        <template v-for="route in menuRoutes" :key="route.path">
          <el-sub-menu v-if="route.children && route.children.length > 0" :index="route.path">
            <template #title>
              <el-icon v-if="route.meta?.icon"><component :is="route.meta.icon" /></el-icon>
              <span>{{ route.meta?.title }}</span>
            </template>
            <el-menu-item
              v-for="child in route.children"
              :key="child.path"
              :index="route.path + '/' + child.path"
            >
              <el-icon v-if="child.meta?.icon"><component :is="child.meta.icon" /></el-icon>
              <span>{{ child.meta?.title }}</span>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item v-else :index="route.path">
            <el-icon v-if="route.meta?.icon"><component :is="route.meta.icon" /></el-icon>
            <span>{{ route.meta?.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header class="header">
        <div class="header-left">
          <el-icon
            :size="20"
            class="collapse-icon"
            @click="appStore.toggleSidebar"
          >
            <Fold v-if="!appStore.sidebarCollapsed" />
            <Expand v-else />
          </el-icon>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="item in breadcrumbs"
              :key="item.path"
              :to="{ path: item.path }"
            >
              {{ item.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="header-right">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索资产..."
            prefix-icon="Search"
            style="width: 300px; margin-right: 20px"
            clearable
            @keyup.enter="handleSearch"
          />
          <el-badge :value="appStore.unreadCount" :hidden="appStore.unreadCount === 0">
            <el-button :icon="Bell" circle @click="showNotifications" />
          </el-badge>
          <el-dropdown @command="handleUserCommand">
            <span class="user-info">
              <el-avatar :size="32" :src="userStore.userAvatar" />
              <span class="username">{{ userStore.userName }}</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  <el-icon><User /></el-icon>
                  个人中心
                </el-dropdown-item>
                <el-dropdown-item command="password">
                  <el-icon><Lock /></el-icon>
                  修改密码
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  <el-icon><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主要内容 -->
      <el-main class="main-content">
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore, useAppStore } from '@/stores'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const appStore = useAppStore()

const searchKeyword = ref('')

// 侧边栏宽度
const sidebarWidth = computed(() => {
  return appStore.sidebarCollapsed ? '64px' : '200px'
})

// 当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})

// 菜单路由
const menuRoutes = computed(() => {
  const routes = router.getRoutes()
  return routes.filter(
    route => route.path !== '/' && route.path !== '/login' && !route.meta?.hidden
  )
})

// 面包屑
const breadcrumbs = computed(() => {
  const matched = route.matched.filter(item => item.meta?.title)
  return matched.map(item => ({
    path: item.path,
    title: item.meta?.title as string
  }))
})

// 搜索
const handleSearch = () => {
  if (searchKeyword.value) {
    router.push({
      path: '/assets/list',
      query: { keyword: searchKeyword.value }
    })
  }
}

// 显示通知
const showNotifications = () => {
  ElMessage.info('暂无新消息')
}

// 用户操作
const handleUserCommand = async (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'password':
      // 打开修改密码对话框
      ElMessage.info('修改密码功能开发中')
      break
    case 'logout':
      await userStore.logout()
      router.push('/login')
      ElMessage.success('退出成功')
      break
  }
}
</script>

<style scoped lang="scss">
.main-layout {
  height: 100vh;
}

.sidebar {
  background: $sidebar-bg;
  transition: width 0.3s;
  overflow: hidden;

  .logo {
    height: $header-height;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #334155;
    transition: all 0.3s;
  }

  .sidebar-menu {
    border-right: none;
    background: $sidebar-bg;
    height: calc(100vh - #{$header-height});
    overflow-y: auto;
    overflow-x: hidden;

    &:not(.el-menu--collapse) {
      width: $sidebar-width;
    }

    .el-menu-item,
    .el-sub-menu__title {
      color: $sidebar-text-color;

      &:hover {
        background-color: rgba(255, 255, 255, 0.05);
      }
    }

    .el-menu-item.is-active {
      background-color: $sidebar-active-bg;
      color: $sidebar-active-text;
    }

    .el-sub-menu.is-active > .el-sub-menu__title {
      color: $sidebar-active-text;
    }
  }
}

.header {
  background: $header-bg;
  border-bottom: 1px solid $header-border;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  .header-left {
    display: flex;
    align-items: center;
    gap: 20px;

    .collapse-icon {
      cursor: pointer;
      color: $text-secondary;
      transition: $transition-base;

      &:hover {
        color: $text-primary;
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;

    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      margin-left: 20px;
      padding: 5px 10px;
      border-radius: $border-radius-base;
      transition: $transition-base;

      &:hover {
        background-color: $bg-color-page;
      }

      .username {
        font-size: 14px;
        color: $text-regular;
      }
    }
  }
}

.main-content {
  background: $bg-color;
  padding: 20px;
  overflow-y: auto;
}

// 路由切换动画
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}
</style>
