<script setup lang="ts">
import { RouterView, RouterLink, useRouter } from 'vue-router';

const router = useRouter();
function logout() {
  localStorage.removeItem('agent_token');
  router.push('/login');
}
</script>

<template>
  <el-container style="min-height: 100vh">
    <el-aside width="180px" style="background: #1a2332">
      <div style="padding: 16px">
        <img src="/logo.png" alt="TheBet365" style="height: 48px; width: auto; display: block" />
        <div style="margin-top: 8px; font-size: 12px; color: #888">代理后台</div>
      </div>
      <el-menu background-color="#1a2332" text-color="#ccc" active-text-color="#00a826">
        <el-menu-item index="/"><RouterLink to="/" style="color: inherit">概览</RouterLink></el-menu-item>
        <el-menu-item index="/players"><RouterLink to="/players" style="color: inherit">直属玩家</RouterLink></el-menu-item>
        <el-menu-item index="/agents"><RouterLink to="/agents" style="color: inherit">下级代理</RouterLink></el-menu-item>
        <el-menu-item index="/bets"><RouterLink to="/bets" style="color: inherit">注单查询</RouterLink></el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="text-align: right; line-height: 60px">
        <el-button @click="logout">退出</el-button>
      </el-header>
      <el-main><RouterView /></el-main>
    </el-container>
  </el-container>
</template>
