<template>
    <app-view class="system-role">
        <app-table :data="dataList" v-model:columns="columns">
            <template #header>
                <app-auth-operation :menus="['system_role_add', 'system_role_delete']" />
            </template>
            <template #operate="{ row }">
                <app-auth-operation :menus="['system_role_auth', 'system_role_edit', 'system_role_delete']"
                    :options="{ selectedRow: row }" linkButton />
            </template>
        </app-table>
    </app-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useDataTable } from '@/hooks/datatable'
import { queryAccountRole } from '@/services/api/account'
import AppAuthOperation from '@pc/components/modules/auth-operation/index.vue'
import AppTable from '@pc/components/base/table/index.vue'

const { dataList } = useDataTable<Model.UserRole>()

const columns = ref([
    {
        prop: 'id',
        label: '序号',
        width: 100,
        show: true,
    },
    {
        prop: 'roleName',
        label: '角色名称',
        show: true,
    },
    {
        prop: 'createdAt',
        label: '创建时间',
        show: true,
    },
    {
        prop: 'updatedAt',
        label: '更新时间',
        show: true,
    },
    {
        prop: 'operate',
        label: '操作',
        show: true,
    }
])

queryAccountRole({
    success: (res) => {
        dataList.value = res.data
    }
})
</script>