<script lang="ts" setup>
import { computed, ref, type Component } from "vue";
import SwitchPageBtn from "./components/btn";
import backgroundVideo from "./assets/循环背景动画.mp4";
import AlarmManagementPage from "./pages/AlarmManagementPage.vue";
import DataReportPage from "./pages/DataReportPage.vue";
import EquipmentManagementPage from "./pages/EquipmentManagementPage.vue";
import IntegratedCenterPage from "./pages/IntegratedCenterPage.vue";
import PatrolPlanPage from "./pages/PatrolPlanPage.vue";
import VideoCenterPage from "./pages/VideoCenterPage.vue";

const currentTab = ref<number>(1);

const tabs = {
  left: [
    { id: 1, text: "监管中心" },
    { id: 2, text: "设备管理" },
    { id: 3, text: "视频中心" },
  ],
  right: [
    { id: 4, text: "告警管理" },
    { id: 5, text: "巡检记录" },
    { id: 6, text: "统计分析" },
  ],
};

const pageComponents: Record<number, Component> = {
  1: IntegratedCenterPage,
  2: EquipmentManagementPage,
  3: VideoCenterPage,
  4: AlarmManagementPage,
  5: PatrolPlanPage,
  6: DataReportPage,
};

const currentViewComponent = computed<Component>(
  () => pageComponents[currentTab.value] ?? IntegratedCenterPage,
);

function switchPage(tab: number) {
  currentTab.value = tab;
}
</script>

<template>
  <div class="dashboard">
    <video
      autoplay
      class="background"
      loop
      muted
      preload="auto"
      :src="backgroundVideo"
    ></video>
    <div class="main">
      <div class="btn-group">
        <div class="left">
          <SwitchPageBtn
            v-for="tab in tabs.left"
            :key="tab.id"
            :active="currentTab === tab.id"
            :text="tab.text"
            direction="left"
            @click="switchPage(tab.id)"
          />
        </div>
        <div class="right">
          <SwitchPageBtn
            v-for="tab in tabs.right"
            :key="tab.id"
            :active="currentTab === tab.id"
            :text="tab.text"
            direction="right"
            @click="switchPage(tab.id)"
          />
        </div>
      </div>
      <div class="content-stage">
        <KeepAlive>
          <component :is="currentViewComponent" />
        </KeepAlive>
      </div>
    </div>
  </div>
</template>

<style lang="less">
@import "./index";
</style>
