<script setup lang="ts">
import { ref } from 'vue'
import WebSocketDemo from './components/WebSocketDemo.vue'
import Zlm from './components/Zlm.vue'
import Wvp from './components/Wvp.vue'
import GB2818Live from './components/GB2818Live.vue'

type TabType = 'websocket' | 'zlm' | 'wvp' | 'gb28181'

const activeTab = ref<TabType>('websocket')

const switchTab = (tab: TabType) => {
  activeTab.value = tab
}
</script>

<template>
  <div id="app">
    <div class="tabs">
      <button
        :class="{ active: activeTab === 'websocket' }"
        @click="switchTab('websocket')"
      >
        WebSocket Demo
      </button>
      <button
        :class="{ active: activeTab === 'zlm' }"
        @click="switchTab('zlm')"
      >
        ZLM
      </button>
      <button
        :class="{ active: activeTab === 'wvp' }"
        @click="switchTab('wvp')"
      >
        WVP
      </button>
      <button
        :class="{ active: activeTab === 'gb28181' }"
        @click="switchTab('gb28181')"
      >
        GB28181 Live
      </button>
    </div>

    <div class="tab-content">
      <WebSocketDemo v-if="activeTab === 'websocket'" />
      <Zlm v-if="activeTab === 'zlm'" />
      <Wvp v-if="activeTab === 'wvp'" />
      <GB2818Live v-if="activeTab === 'gb28181'" />
    </div>
  </div>
</template>

<style>
* {
  box-sizing: border-box;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 20px;
  width: 100%;
}

.tabs {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 10px;
  width: 100%;
}

.tabs button {
  padding: 10px 20px;
  background-color: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.tabs button:hover {
  background-color: #e0e0e0;
}

.tabs button.active {
  background-color: #2196f3;
  color: white;
}

.tab-content {
  animation: fadeIn 0.3s ease;
  width: 100%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
