<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useThemeStore } from '@/stores/theme'

const auth = useAuthStore()
const theme = useThemeStore()
const router = useRouter()
const route = useRoute()

const showLayout = computed(() => route.meta.layout !== 'blank' && !!auth.token)

const menuColors = computed(() =>
  theme.isDark
    ? { bg: '#282828', text: '#cfd8e3', active: '#ffffff' }
    : { bg: '#f9fafb', text: '#1f2937', active: '#0f172a' },
)

function logout() {
  auth.logout()
  router.replace('/login')
}
</script>

<template>
  <el-container v-if="showLayout" class="app">
    <el-aside width="220px" class="aside" :class="{ 'aside-light': !theme.isDark }">
      <div class="brand">期货报告</div>
      <el-menu
        :default-active="route.path"
        router
        :background-color="menuColors.bg"
        :text-color="menuColors.text"
        :active-text-color="menuColors.active"
      >
        <el-menu-item index="/scores">打分列表</el-menu-item>
        <el-menu-item index="/chart">K 线 / 持仓</el-menu-item>
        <el-menu-item v-if="auth.isAdmin" index="/admin/users">用户管理</el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header">
        <div class="user">
          <span>{{ auth.user?.username }}</span>
          <el-tag size="small" :type="auth.isAdmin ? 'danger' : 'info'">
            {{ auth.isAdmin ? '管理员' : '普通用户' }}
          </el-tag>
        </div>
        <div class="right">
          <el-switch
            v-model="theme.isDark"
            inline-prompt
            active-text="暗"
            inactive-text="亮"
            style="--el-switch-on-color: #2c3e50"
          />
          <el-button type="primary" link @click="logout">退出登录</el-button>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
  <router-view v-else />
</template>

<style>
html,
body,
#app {
  height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
  background-color: var(--el-bg-color-page);
  color: var(--el-text-color-primary);
}
.app {
  height: 100%;
}
.aside {
  background: #282828;
  color: #cfd8e3;
}
.aside-light {
  background: #f9fafb;
  color: #1f2937;
  border-right: 1px solid var(--el-border-color-light);
}
.brand {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  letter-spacing: 2px;
  border-bottom: 1px solid #3a3a3a;
}
.aside-light .brand {
  border-bottom: 1px solid #e5e7eb;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
}
.user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.el-menu {
  border-right: none !important;
}
</style>
