<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 }" />
            </template>
        </app-table>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { useDataTable } from '@/hooks/datatable'
import { getTableColumns } from '@/business/table'
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<Ermcp.UserRole>()
const columns = shallowRef(getTableColumns('system_role'))

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