<script setup>
import { q, useAsyncData } from "#imports";
import { ref, watch, onUnmounted } from "vue";
const loading = ref(false);
const { data, refresh } = await useAsyncData(async () => {
  loading.value = true;
  const { system } = await q({
    system: {
      database: {
        processList: true
      }
    }
  });
  loading.value = false;
  return system;
});
const autoRefresh = ref(0);
const interval = ref(null);
watch(autoRefresh, (value) => {
  if (interval.value)
    clearInterval(interval.value);
  if (value) {
    interval.value = setInterval(() => {
      refresh();
    }, value);
  }
}, { immediate: true });
onUnmounted(() => {
  if (interval.value)
    clearInterval(interval.value);
});
</script>

<template>
    <l-page title="System Database Process">
        <q-table :rows="data?.database?.processList || []" v-bind="$light.styles.table" :loading="loading">
            <template #top-left>
                <q-btn label="Reload" outline color="primary" icon="sym_o_refresh" @click="refresh"></q-btn>
            </template>
            <template #top-right>
                <q-select label="Auto Refresh" v-model="autoRefresh" :options="[
                    { label: 'Off', value: 0 },
                    { label: '5s', value: 5000 },
                    { label: '10s', value: 10000 },
                    { label: '30s', value: 30000 },
                    { label: '1m', value: 60000 },
                    { label: '5m', value: 300000 },
                    { label: '10m', value: 600000 },
                    { label: '30m', value: 1800000 },
                    { label: '1h', value: 3600000 }
                ]" @update:model-value="autoRefresh && refresh()" outlined dense style="min-width: 200px" map-options
                    emit-value></q-select>
            </template>
        </q-table>
    </l-page>
</template>
