<template>
    <Table url="/api/v1/roles" rowKey="roleId" addBtn ref="table" noPage :buttons="buttons">
        <template #drawer="drawer">
            <Form v-bind="drawer" />
        </template>
        <a-table-column :title="$t('role.roleName')" data-index="roleName" />
        <a-table-column :title="$t('role.roleCode')" data-index="roleCode" />
        <a-table-column :title="$t('role.roleRemark')" 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.edit'),
                    click: this.edit,
                },
                { type: 'confirm', url: (row) => `/api/v1/roles/${row.roleId}`, after: this.refreshTable },
            ],
        };
    },
    methods: {
        refreshTable() {
            this.$refs['table']?.getData();
        },
        edit(row) {
            this.$refs.table.show({ row, title: this.$t('table.edit'), type: 'edit' });
        },
    },
};
</script>
