<script setup lang="ts">
import { ref } from "vue";
import Devices from "./components/Devices.vue";
import Experts from "./components/Experts.vue";

const active = ref<Number>(1);

const activeTab = (index: number) => {
  active.value = index;
};
</script>

<template>
  <div class="container mx-auto py-10">
    <div role="tablist" class="tabs tabs-boxed">
      <a
        role="tab"
        class="tab"
        :class="{ 'tab-active': active == 0 }"
        @click="activeTab(0)"
        >专家管理</a
      >
      <a
        role="tab"
        class="tab"
        :class="{ 'tab-active': active == 1 }"
        @click="activeTab(1)"
        >设备管理</a
      >
    </div>

    <div class="tab-data mt-10">
      <div v-show="active == 0">
        <Experts />
      </div>
      <div v-show="active == 1">
        <Devices />
      </div>
    </div>
  </div>
</template>
