<script setup>
import { ref, computed } from 'vue';
import ZoneFilterPanel from 'components/InvoiceOutNegativeFilter.vue';
import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const arrayData = ref(null);
const rows = computed(() => arrayData.value.store.data);

const columns = computed(() => [
    {
        label: t('Province'),
        //field: '',
        //name: '',
        align: 'left',
    },
    {
        label: t('Closing'),
        //field: '',
        //name: '',
        align: 'left',
    },
    {
        label: t('Id'),
        //field: '',
        //name: '',
        align: 'left',
    },
]);

function getWeekDay(jsonDate) {
    const weekDay = new Date(jsonDate).getDay();

    return this.days[weekDay].locale;
}
</script>

<template>
    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
        <QScrollArea class="fit text-grey-8">
            <ZoneFilterPanel data-key="ZoneUpcoming" />
        </QScrollArea>
    </QDrawer>
    <VnSubToolbar />
    <QPage class="column items-center q-pa-md">
        <span>
            {{ t(`${getWeekDay(/*detail.shipped*/)}`) }} -
            {{ t /*'detail.shipped'*/() }}
        </span>
        <QTable :columns="columns" :rows="rows" class="full-width q-mt-md"> </QTable>
    </QPage>
</template>
