<template>
    <SearchRow :title="t('buffer.title')" :del="false" @query="query" :add="false" :query="false">
        <template #left>
            <NoobButton type="success" :icon="delete" @click="clean().then(query)">
                {{ t('buffer.clean') }}
            </NoobButton>
        </template>
    </SearchRow>
    <ListTable @query="query" :props="props" :data="result">
        <template #value="{ row }">
            <Descriptions :data="row.value" />
        </template>
        <template #action="{ row }">
            <TableAction @modify="delay(row)" @del="delate(row)" />
        </template>
    </ListTable>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { Api, ListTable, SearchRow, NoobButton, TableAction, Element, Descriptions } from "noob-mengyxu";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();
const { prompt } = Element;
const { list, clean, set, del } = Api.buffer;
const result = ref([]);

const props = [
    { code: 'value', type: "expand", slot: true },
    { i18n: 'buffer.prop.1', code: 'key', width: 200 },
    { i18n: 'buffer.prop.2', code: 'effective', width: 100 },
    { i18n: 'buffer.prop.3', code: '失效时间', width: 180 },
    { i18n: 'buffer.prop.4', code: 'action', width: 130, slot: true },
]

const query = () => {
    list().then((rsp: any) => result.value = rsp)
}

const delate = (row) => {
    Element.confirm(t('buffer.delete.0'), t('buffer.delete.1')).then(() => {
        del(row).then(query);
    })
}

const delay = row => {
    prompt(t(''), t(''), /^((\d{2}(([02468][048])|([13579][26]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|([1-2][0-9])))))|(\d{2}(([02468][1235679])|([13579][01345789]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|(1[0-9])|(2[0-8]))))))(\s((([0-1][0-9])|(2?[0-3]))\:([0-5]?[0-9])((\s)|(\:([0-5]?[0-9])))))?$/, '时间格式不正确').then(value => {
        set({ key: row.key, loseTime: value }).then(query)
    })
}

onMounted(() => {
    query();
});
</script>
<style lang="scss" scoped></style>