<template>
	<view class="cascde">
		<view v-for="(item,index) in dataList">
			<view class="cascde-item">
				<text>{{item.Name}}</text>
				<u-icon name="arrow-down" color="#000" size="28rpx" v-if="item.ChildrenList" ></u-icon>
			</view>
			<view v-for="(_item1) in item.ChildrenList"  v-if="item.ChildrenList">
				<view class="cascde-item">
					<text>{{_item1.Name}}</text>
					<u-icon name="arrow-down" color="#000" size="28rpx" v-if="_item1.ChildrenList"></u-icon>
				</view>
				<view v-for="(_item2) in _item1.ChildrenList" v-if="_item1.ChildrenList">
					<view class="cascde-item">	
						<text>{{_item2.Name}}</text>
						<u-icon name="arrow-down" color="#000" size="28rpx" v-if="_item2.ChildrenList"></u-icon>
					</view>
					<view v-for="(_item3) in _item2.ChildrenList" v-if="_item2.ChildrenList">
						<view class="cascde-item">	
						   <text>{{_item3.Name}}</text>
						   <u-icon name="arrow-down" color="#000" size="28rpx" v-if="_item3.ChildrenList"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			dataList:{
				type:Array,
				default:[]
			}
		},
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cascde{
		width: 750rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-top: 1rpx solid #DDDDDD;
		.cascde-item{
			font-size: 28rpx;
			padding: 20rpx 32rpx;
			border-bottom: 1rpx solid #DDDDDD;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>
