<template>
<!-- 申请解冻/申请领取权限列表 -->
	<div class="authContainer">
		<h3>请选择需要开通试用的品种：</h3>
		<ul class="menu_lists">
			<li v-for="item in autharr" :key="item.ClassifyName" class="menu_item">
				<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" :disabled="setSelectPerDisabled(item)" style="marginRight:30px;fontWeight:bold;minWidth:90px;" @change="handleCheckAll(item)">{{item.ClassifyName+':'}}</el-checkbox>
				<el-checkbox-group v-model="item.CheckList"  @change="handleChecked(item)">
					<el-checkbox v-for="list in item.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item" :disabled="list.IsPublic===1" >{{list.PermissionName}}</el-checkbox>
				</el-checkbox-group>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name:'',
	props: {
		autharr: {
			type: Array
		}
	},
	data () {
		return {

		};
	},
	methods: {
		/* 选择全选或取消全选 */
		handleCheckAll(item) {
			// // 取到所有的子菜单id
			// let ids = item.Items.map(item =>{
			// 	return item.ChartPermissionId
			// })
			// item.CheckList = item.checkAll ? ids : [];
			// item.isIndeterminate = false;
			//获取公有的id合集
			let publicIds=[]

			
			let ids = item.Items.map(item =>{
				if(item.IsPublic==1){
					publicIds.push(item.ChartPermissionId)
				}
				return item.ChartPermissionId
			})
			item.CheckList = item.checkAll ? ids : publicIds;	
        	item.isIndeterminate = publicIds.length>0&&!item.checkAll?true:false;
		},
		/* 复选框組选中时 */
		handleChecked(item) {
			let len = item.CheckList.length;
			item.checkAll = len === item.Items.length;
			item.isIndeterminate = len > 0 && len < item.Items.length;
		},
		//控制权限设置是否禁用编辑
		setSelectPerDisabled(data){
			if(!data) return true
			const arr=data.Items?data.Items.filter(_e=>_e.IsPublic==1):[]
			return arr.length==data.Items.length
		}
	},
	mounted() {},
}
</script>
<style lang='scss' scoped>
.authContainer {
	padding-top: 20px;
	border-top: 1px dashed #DCDCDC;
	.menu_lists {
		padding: 20px 0 0;
		border-radius: 4px;
		.menu_item {
			display: flex;
			// align-items: center;
			margin-bottom: 15px;
			&:last-child {
				margin-bottom: 0;
			}
			.list_item {
				margin-right: 20px;
				margin-bottom: 10px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

}
</style>