<template>
	<!-- 自定义表格 -->
	<div class="tableBody">
		<div class="tr" v-for="(item,index) in data" :key="index">
			<div class="td tdTitle" @click="openFile(item)">
				<div class="file" v-if="item.children || (item.user_info && item.user_info.length)"><el-icon-FolderOpened></el-icon-FolderOpened></div>
				<div class="file" v-else><el-icon-Folder></el-icon-Folder></div>
				<div class="name">{{item.name}}</div>
			</div>
			<template v-if="item.isOpen">
				<div class="td tdUser" v-if="item.user_info && item.user_info.length>0">
					<div :class="userChecked(userIds,em)?'userList':'userList userChecked'" v-for="(em,ind) in item.user_info" :key="ind" @click="roleChecked(em)">
						<div class="userName">
							<div class="avatar">{{ userAvatar(em) }}</div>
							<div class="name">{{em.name}}</div>
						</div>
						<div class="userBtn" v-if="!userChecked(userIds,em)"><el-icon-Check></el-icon-Check></div>
					</div>
				</div>
			</template>
			<template v-if="item.children && item.isOpen">
				<treeDept class="td tdCom" :data="item.children" :userIds="userIds" @roleChecked="roleChecked" />
			</template>
		</div>
	</div>
</template>

<script>
export default {
	name:'treeDept',
	data() {
		return {
			size: "small",
			isShow:true,
		};
	},
	props:{
		data:{
			type:Array,
			required: true
		},
		userIds:{
			type:Array
		}
	},
	watch:{

	},
	computed:{

	},
	methods:{
		userAvatar(row) {
			return row.name.substring(0, 1)
		},
		userChecked(arr,em){
			return arr.indexOf(em.id)!=-1?false:true
		},
		roleChecked(em){
			this.$emit('roleChecked',em);
		},
		openFile(item){
			this.$nextTick(()=>{
				item.isOpen = !item.isOpen;
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.tableBody .tr{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	.td{
		padding: 3px 0 3px 12px;
	}
	.td:first-child{
		border-left: 0;
	}
	.tdTitle{
		display: flex;
		justify-content: flex-start;
		cursor: pointer;
		.file{
			width: 14px;
			margin-right: 5px;
		}
	}
	.tdUser{
		.userList{
			padding:4px 0 4px 12px;
			display: flex;
			justify-content: space-between;
			.userName{
				flex: 1;
				display: flex;
				align-items: center;
				cursor: pointer;
				.avatar{
					background: var(--el-text-color-disabled);
					color: var(--el-color-white);
					border-radius: 50%;
					display: inline-block;
					height: 21px;
					width: 21px;
					text-align: center;
					line-height: 21px;
				}
				.name{
					margin-left: 10px;
				}
			}
			.userBtn{
				flex-basis: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.userChecked{
			color: var(--el-color-primary);
			.userName{
				.avatar{
					background:var(--el-color-primary);
				}
			}
		}
	}
}
.tableBody .tr:last-child{
	border-bottom: 0;
}
</style>
