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

// import { useDataStore } from "@/modules/04_system/stores/main";
// import { storeToRefs } from "pinia";

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

/** import components*/
import Card from "@/modules/04_system/components/01_cardBackupRestore.vue"; // ข้อมูลสำรอง
import CardAutoBackup from "@/modules/04_system/components/02_cardAutoBackup.vue"; // คืนค่า

// const { fetchListBackup, backupRunningList, restoreRunningList } =
//   useDataStore();

/** ตัวแปร*/
// const storeData = useDataStore();
// const { prevBackupRunTotal, prevRestoreRunTotal } = storeToRefs(storeData);

const tab = ref<string>("backup");
const tabItems = ref<ItemsTeb[]>([
  { name: "backup", label: "Backup & Restore", icon: "mdi-database" },
  { name: "autoBackUp", label: "Schedule ", icon: "mdi-clock-outline" },
]);

// onMounted(async () => {
//   prevBackupRunTotal.value = -1;
//   prevRestoreRunTotal.value = -1;
//   await fetchListBackup();
//   await backupRunningList(fetchListBackup);
//   await restoreRunningList(() => {});
// });
</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="autoBackUp">
        <q-card-section class="q-pa-none">
          <div class="text-h6">คืนค่า</div>
        </q-card-section>
        <CardAutoBackup :tab="tab" />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<style scoped></style>
