<template>
  <div class="console-layout">
    <nav class="top-nav">
      <button
        :class="['nav-btn', { active: currentView === 'dashboard' }]"
        @click="currentView = 'dashboard'">
        <i class="el-icon-data-analysis"></i> 实时大屏
      </button>
      <button
        :class="['nav-btn', { active: currentView === 'console' }]"
        @click="currentView = 'console'">
        <i class="el-icon-s-operation"></i> 中控台
      </button>
    </nav>
    <component :is="currentView" :liveId="liveId" />
  </div>
</template>

<script>
import LiveDashboard from './LiveDashboard.vue';
import LiveConsole from './LiveConsole.vue';

export default {
  name: 'LiveConsoleIndex',
  components: {
    dashboard: LiveDashboard,
    console: LiveConsole
  },
  data() {
    return {
      liveId: this.$route.params.liveId,
      currentView: 'dashboard'
    };
  }
};
</script>

<style>
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
</style>

<style scoped>
.console-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top-nav {
  display: flex;
  background: #fff;
  padding: 0 16px;
  flex-shrink: 0;
  border-bottom: 1px solid #e8eef5;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border: none;
  background: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.nav-btn:hover {
  color: #475569;
  background: #f8fafc;
}

.nav-btn.active {
  color: #4f46e5;
  border-bottom-color: #4f46e5;
  background: #eef2ff;
}

.nav-btn i {
  font-size: 16px;
}
</style>
