<template>
	<!-- 自定义表格 -->
    <el-scrollbar height="100%">
        <div class="customTable">
            <div class="tableBody" v-for="(item,index) in list" :key="index">
                    <div class="trTitle">
                        <div class="name">
							{{item.category_name}}
                        </div>
                    </div>
				<div class="childView">
					<div class="tr" v-for="(em,ind) in item.set_info" :key="ind">
						<div class="td module">
							<div class="textName">敏感数据权限</div>
							<div class="viewBox">
                                <el-checkbox v-model="em.is_view" :size="size">{{em.resource_name}}</el-checkbox>
							</div>
						</div>
						<div class="td module">
							<div class="textName">操作权限</div>
							<div class="viewBox viewBtn">
								<el-checkbox v-model="em.action.view" :size="size"><span class="checkName">查看</span></el-checkbox>
								<el-checkbox v-model="em.action.edit" :size="size"><span class="checkName">编辑</span></el-checkbox>
							</div>
						</div>
					</div>
				</div>
            </div>
        </div>
    </el-scrollbar>
</template>

<script>
export default {
    data() {
        return {
            size: "default",
            list:[]
        };
    },
    props:{
        data:{
            type:Array
        }
    },
    watch:{
        data(val){
            if(val && val.length>0){
                this.list = JSON.parse(JSON.stringify(val));
            }
        }
    },
    computed:{

    },
    methods:{

    }
};
</script>

<style lang="scss" scoped>
.module {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.check {
	flex-basis: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu {
	flex: 1;
}

.authority {
	flex-basis: 80px;
	text-align: center;
}

.customTable {
	border: 1px solid var(--el-border-color-light);
	border-bottom: 0;
}

.tableBodyNull {
	border-top: 1px solid var(--el-border-color-light);
}

.tableBody {
	display: flex;
}
.childView{
	display: flex;
	flex-direction: column;
	flex: 1;
}
.tableBody .trTitle {
	background: #f5f7fa;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
	border-bottom: 1px solid var(--el-border-color-light);
	border-right: 1px solid var(--el-border-color-light);
	flex-basis: 140px;
	.name {
		flex: 1;
	}

	.coseBtn {
		flex-basis: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;

		.coseBtnIcon {
			width: 14px;
			color: var(--el-color-primary);
		}
	}
}

.tableBody .tr {
	border-bottom: 1px solid var(--el-border-color-light);

	.td {
		padding: 0 10px;
		border-bottom: 1px solid var(--el-border-color-light);
		display: flex;
		align-items: stretch;
		.textName{
			flex-basis: 110px;
			display: flex;
			align-items: center;
			border-right: 1px solid var(--el-border-color-light);
		}
		.viewBox{
			padding: 0 0 0 10px;
		}
		.viewBtn{
			.checkName{
				width: 60px;
				display: inline-block;
			}
		}
		.nextTd {
			border-bottom: 1px solid var(--el-border-color-light);
			flex: 1;
		}
		.nextTd:last-child {
			border-bottom: 0;
		}
	}

	.td:first-child {
		border-left: 0;
	}
	.td:last-child{
		border-bottom: 0;
	}

	.tdChild {
		flex: 1;
		padding: 0;
		border-left: 1px solid var(--el-border-color-light);

		.tdName:first-child {
			border-left: 0;
		}

		.tdName {
			border-left: 1px solid var(--el-border-color-light);
			padding: 0 10px;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.boxName {
				display: flex;
				align-items: center;
				margin-right: 20px;
				width: 120px;

				.name {
					width: 100px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: block;
					text-align: left;
				}
			}
		}
	}
}
</style>
