<template>
    <div>
        <a-table :columns="columns"
                 :data-source="menuPermissionData"
                 :bordered="true"
        >
            <template #bodyCell="{column, record }">
                <template v-if="column.dataIndex === 'interface' && record.interface">
                    <a-checkbox-group v-model:value="record.checkedActionList" :options="record.interface" />
                </template>
            </template>
        </a-table>
    </div>
</template>
<script setup>
    import PermissionApi from '@/api/system/Permission'
    import { onMounted, ref } from 'vue'
    import { useRoute } from 'vue-router'

    const route = useRoute()
    const roleId = route.query.id

    const systemData = ref([])
    
    const columns = [
        {
            title: '菜单',
            dataIndex: 'menu',
            key: 'menu'
        },
        {
            title: '接口',
            key: 'interface',
            dataIndex: 'interface'
        }
    ]

    const menuPermissionData = ref([])
    
    const getSubSystemList = async () => {
        const params = {
            roleId: roleId
        }
        const { data: result } = await PermissionApi.getSubSystemList(params)
        if (result.status) {
            const subSystemList = result.data.subSystemList
            systemData.value = subSystemList.map(item => {
                return {
                    id: item.id,
                    label: item.menuName
                }
            })
            // 默认显示第一个系统的菜单
            if (subSystemList[0] && subSystemList[0].menuActionList) {
                menuPermissionData.value = subSystemList[0].menuActionList.map(item => {
                    // 注意，在处理 item.sysActionList 时添加一个检查，如果 item.sysActionList 为 null，则将 actionList 设为一个空数组 []。
                    // 可以通过逻辑运算符 || 来简化这一检查和赋值的过程
                    const checkedActionList = []
                    const actionList = (item.sysActionList || []).map(action => {
                        // 封装 checkedActionList
                        if (!action.Checked) {
                            checkedActionList.push(action.label)
                        }

                        return {
                            label: action.label,
                            value: action.label
                        }
                    })

                    return {
                        id: item.id,
                        key: item.id,
                        menu: item.menuName,
                        interface: actionList
                    }
                })
            }
        } else {
            this.$message.error(result.msg)
        }
    }

    /* 监听多选框改变 */
    watch(() => menuPermissionData.value, value => {
        console.log(333, value)
    }, { deep: true }) // 深度监听
</script>