<template>
    <Table url="/api/v1/jobs" rowKey="jobId" addBtn ref="table" :drawerWidth="600" noPage :buttons="buttons">
        <template #drawer="drawer">
            <Form v-bind="drawer" />
        </template>

        <a-table-column :title="$t('system.jobName')" data-index="jobName" />
        <a-table-column :title="$t('table.describe')" data-index="jobDescription" />
    </Table>
</template>

<script>
import Form from './form.vue';
import { Table } from '@/components/table';

export default {
    components: { Form, Table },

    computed: {
        buttons() {
            return [
                { label: this.$t('table.edit'), click: this.edit },
                {
                    type: 'confirm',
                    url: (row) => `/api/v1/jobs/${row.jobId}`,
                    after: this.refreshTable,
                },
            ];
        },
    },

    methods: {
        refreshTable() {
            this.$refs['table']?.getData();
        },
        edit(row) {
            this.$refs.table.show({ row, title: this.$t('table.edit'), type: 'edit' });
        },
    },
};
</script>