<template>
    <app-view class="system-role">
        <app-table :data="dataList" v-model:columns="columns">
            <template #header>
                <app-action-menu :menus="getActionMenus('system_role_add', 'system_role_delete')" @click="openComponent" />
            </template>
            <template #operate="{ row }">
                <app-action-menu :menus="getActionMenus('system_role_auth', 'system_role_edit', 'system_role_delete')"
                    :record="row" @click="openComponent" linkButton />
            </template>
        </app-table>
        <component ref="componentRef" :is="asyncComponent" v-bind="{ selectedRow: activeMenu.record }"
            @closed="closeComponent" v-if="asyncComponent" />
    </app-view>
</template>

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

const { activeMenu, asyncComponent, getActionMenus, openComponent, closeComponent } = useActionMenu<Model.UserRole>()
const { dataList } = useDataTable<Model.UserRole>()

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

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