<script lang="ts" setup>
import {ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'

const router = useRouter()
const route = useRoute()

const activeMenu = ref('home')

const menuItems = [
  {index: 'home', path: '/home', title: '主页'},
  {index: 'settings', path: '/settings', title: '设置'},
  {index: 'swagger', path: '/swagger', title: 'Swagger'},
  {index: 'mysql-model', path: '/mysql-model', title: 'MySQL Model'},
  {index: 'update-common', path: '/update-common', title: '更新 Common'}
]

function handleMenuSelect(index: string) {
  activeMenu.value = index
  const menuItem = menuItems.find(item => item.index === index)
  if (menuItem) {
    router.push(menuItem.path)
  }
}

router.afterEach((to) => {
  const menuItem = menuItems.find(item => item.path === to.path)
  if (menuItem) {
    activeMenu.value = menuItem.index
  }
})
</script>

<template>
  <el-container class="app-container">
    <el-aside width="200px" class="app-aside">
      <div class="logo-container">
        <img src="./assets/images/logo-universal.png" alt="logo" class="logo"/>
        <span class="app-title">Quickly</span>
      </div>
      <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical"
          @select="handleMenuSelect"
      >
        <el-menu-item index="home">
          <el-icon>
            <House/>
          </el-icon>
          <span>主页</span>
        </el-menu-item>
        <el-menu-item index="settings">
          <el-icon>
            <Setting/>
          </el-icon>
          <span>设置</span>
        </el-menu-item>
        <el-menu-item index="swagger">
          <el-icon>
            <Document/>
          </el-icon>
          <span>Swagger</span>
        </el-menu-item>
        <el-menu-item index="mysql-model">
          <el-icon>
            <DataLine/>
          </el-icon>
          <span>MySQL Model</span>
        </el-menu-item>
        <el-menu-item index="update-common">
          <el-icon>
            <Refresh/>
          </el-icon>
          <span>更新 Common</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container class="main-container">
      <el-header class="app-header">
        <div class="header-title">{{ route.meta.title || 'Quickly 金牌助手' }}</div>
      </el-header>
      <el-main class="app-main">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
.app-container {
  height: 100vh;
}

.app-aside {
  background-color: #1b2636;
  display: flex;
  flex-direction: column;
}

.logo-container {
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  width: 32px;
  height: 32px;
}

.app-title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.el-menu-vertical {
  border: none;
  background-color: transparent;
  flex: 1;
}

.el-menu-vertical .el-menu-item {
  color: rgba(255, 255, 255, 0.7);
}

.el-menu-vertical .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.el-menu-vertical .el-menu-item.is-active {
  background-color: #409eff;
  color: #fff;
}

.main-container {
  display: flex;
  flex-direction: column;
}

.app-header {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px;
}

.header-title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.app-main {
  background-color: #f5f7fa;
  padding: 0;
  overflow: auto;
}
</style>
