<template>
    <Table url="/api/v1/schedules" rowKey="taskId" addBtn ref="table" :buttons="buttons">
        <template #drawer="drawer">
            <Form ref="form" v-bind="drawer" />
        </template>
        <a-table-column :title="$t('system.jobName')" data-index="taskName" />
        <a-table-column :title="$t('task.schedulingRules')" data-index="taskRule" />
        <a-table-column :title="$t('task.implementClass')" data-index="implementClass" />
        <a-table-column :title="$t('table.remark')" data-index="remark" />
    </Table>
</template>

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

export default {
    components: { Form, Table },
    data() {
        return {
            buttons: [
                {
                    label: this.$t('table.view'),
                    click: (row) => {
                        this.$refs.table.show({ type: 'view', row, title: this.$t('table.view') });
                    },
                },
                {
                    label: this.$t('table.edit'),
                    click: (row) => {
                        this.$refs.table.show({ type: 'edit', row, title: this.$t('table.edit') });
                    },
                },
                {
                    type: 'confirm',
                    label: this.$t('task.invalid'),
                    title: this.$t('task.invalidTip'),
                    url: (row) => ({ url: `/api/v1/schedules/${row.taskId}/pause`, method: 'del' }),
                    after: () => this.refreshTable(),
                    isHidden: (row) => row.isPaused === 1,
                },
                {
                    type: 'confirm',
                    url: (row) => `/api/v1/schedules/${row.taskId}`,
                    after: this.refreshTable,
                },
            ],
        };
    },
    methods: {
        refreshTable() {
            this.$refs.table.getData();
        },
    },
};
</script>
