<template>
	<div>
		<template v-for="(item, index) in permissionList">
			<a-row class="a-row" align="middle">
				<a-col span="6" class="a-col">
					<a-checkbox v-model:checked="item.checked" @change="one($event, index, item)"
						:label="item.name">{{item.name}}</a-checkbox>
				</a-col>
				<a-col span="18" class="a-col">
					<template v-if="item.childs">
						<a-row align="middle">
							<template v-for="(childItem, childIndex) in item.childs">
								<a-col span="6" class="a-col"><a-checkbox v-model:checked="childItem.checked"
										@change="one($event, index, childItem)"
										:label="childItem.name">{{childItem.name}}</a-checkbox></a-col>
								<a-col span="18" class="a-col">
									<template v-if="childItem.childs">
										<a-row align="middle">
											<template v-for="(thirdItem, thirdIndex) in childItem.childs">
												<a-col span="6"><a-checkbox v-model:checked="thirdItem.checked"
														@change="one($event, index, thirdItem)"
														:label="thirdItem.name">{{thirdItem.name}}</a-checkbox></a-col>
											</template>
										</a-row>
									</template>
								</a-col>
							</template>
						</a-row>
					</template>
				</a-col>
			</a-row>
		</template>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, defineProps, watch } from 'vue';
	import { getPermissionListWithchilds, getRoleGetpermissions, PostRoleAddpermission } from '@/apis/models';
	import { message } from 'ant-design-vue';
	const emit = defineEmits();
	let permissionList = ref<object[]>([])
	let props = defineProps(['roleId', 'roleName']);

	onMounted(async () => {
		let res = await getPermissionListWithchilds({ page: 1, pagesize: 10, sort: 'id', sortby: "asc", keyword: "" });
		permissionList.value = res.data.permissions;
		let res1 = await getRoleGetpermissions({ ids: props.roleId.toString() });
		emit('detailTitle', { title: props.roleName, length: res1.data.permissions.length });
		permissionList.value = markChecked(permissionList.value, res1.data.permissions);
	})


	const one = (e, index, item) => {
		PostRoleAddpermission({ role_id: props.roleId, permission_id: item.id }).then(res => {
			message.success('为角色新增菜单/权限成功');
			getOneRole();
		})
	}

	// 获取角色的权限
	const getOneRole = () => {
		getRoleGetpermissions({ ids: props.roleId.toString() }).then(res => {
			permissionList.value = markChecked(permissionList.value, res.data.permissions);
		});
	}

	const markChecked = (arr1, arr2) => {
		arr1.forEach((itemA : Object) => {
			const matchingItem = arr2.find(itemB => itemB.id === itemA.id);
			if (matchingItem) {
				itemA.checked = true;
			}
			if (itemA.childs && itemA.childs.length) {
				debugger
				markChecked(itemA.childs, arr2);
			}
		});
		return arr1;
	}
</script>

<style lang="less" scoped>
	.a-row:first-child {
		border-bottom: none;
		border-radius: 10px 10px 0 0;
	}

	.a-row:last-child {
		border-radius: 0 0 10px 10px;
	}

	.a-row {
		padding: 6px;
		border: 1px #f0f0f0 solid;

		.a-col:first-child {}
	}

	.a-col {
		padding: 6px;
		// padding-top: 6px;
	}
</style>