<script setup lang="ts">
import { ref } from "vue";

/**
 * import type
 */
import type { ItemsTeb } from "@/modules/04_system/interface/index/Main";

/**
 * import components
 */
import Card from "@/modules/04_system/components/cardBackupRestore.vue";

/**
 * ตัวแปร
 */
const tab = ref<string>("backup");
const tabItems = ref<ItemsTeb[]>([
  { name: "backup", label: "Backup & Restore", icon: "mdi-database" },
]);
</script>

<template>
  <div class="row items-center">
    <div class="toptitle text-dark row items-center q-py-xs">ตั้งค่าระบบ</div>
  </div>
  <q-card flast bordered>
    <q-tabs
      v-model="tab"
      dense
      align="left"
      inline-label
      class="bg-white text-grey"
      active-color="primary"
      indicator-color="primary"
    >
      <div v-for="item in tabItems">
        <q-tab :name="item.name" :label="item.label" :icon="item.icon" />
      </div>
    </q-tabs>
    <q-separator />
    <q-tab-panels v-model="tab" animated class="shadow-2 rounded-borders">
      <q-tab-panel name="backup">
        <q-card-section class="q-pa-none">
          <div class="text-h6">ข้อมูลสำรอง</div>
        </q-card-section>

        <Card :tab="tab" />
      </q-tab-panel>

      <q-tab-panel name="restore">
        <q-card-section class="q-pa-none">
          <div class="text-h6">คืนค่า</div>
        </q-card-section>
        <Card :tab="tab" />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<style scoped></style>
