<template>
	<view>
		<uni-drawer ref="showRight" mode="right" :width="320" @change="changeD($event,'showRight')">
			
			<view class="close">
				<view class="zhan" style="width: 100%;"></view>
				<u-icon name="close" @click="closeDrawer('showRight')" color="#2979ff" size="28"></u-icon>
			</view>
			<view class="proTitle">
				<text>请选择课程分类</text>
			</view>
			<scroll-view class="warp" scroll-y="true" style="max-height: 80vh;">
			<uni-collapse accordion  v-if="treeList.length > 0" @change="collapseChange">
				<uni-collapse-item v-for="(item, index) in treeList" :key="index" :title="item.title"
					:show-animation="true">
					<view class="content" >
						<!-- <text class="text">{{item.title}}</text> -->
						<view class="sub1List">
							<view class="item leve2" @click.stop="clickCourseInfo(item)" v-if="item.isLast == 1">
								<text class="textss"> 本目录下全部课程</text>
							</view>
							<view :class="['item', 'leve2']"
								v-for="(item1, index1) in item.children" :key="index1"
								@click.stop="clickCourseInfo(item1)">
								<text class="textss"> {{item1.title}}</text>
								<view class="sub2List" v-if="item1.children">
									<view :class="['item', 'leve3']"
										v-for="(item2, index2) in item1.children" :key="index2"
										@click.stop="clickCourseInfo(item2)">
										<text class="textss">{{item2.title}}</text>
										<view class="sub3List" v-if="item2.children">
											<view :class="['item', 'leve4']"
												v-for="(item3, index3) in item2.children" :key="index3"
												@click.stop="clickCourseInfo(item3)">
												<text class="textss">{{item3.title}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
			 </scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	export default {
		name:"tagTree",
		// props:['treeList'],
		data() {
			return {
				treeList:[]
			};
		},methods:{
			showDrawer(e) {
				this.$refs[e].open()
				// this.videoContext.pause()
				// this.showTemp = true
				console.log('打开抽屉')
			},
			getData() {
				this.$http
					.post('medical/home/getCourseMedicalTree')
					.then(res => {
						if (res.code == 0 && res.labels.length > 0) {
							this.treeList = res.labels
						} else {
							this.treeList = []
						}
						this.showDrawer('showRight')
					}).catch(e => {
						console.log(e, '报错')
						uni.showToast({
							title:"获取课程分类失败",
							icon:"none"
						})
					});
			},
			clickCourseInfo(val){
				this.$emit('clickCourseInfo',val)
				this.closeDrawer('showRight')
			},
			closeDrawer(e) {
				this.$refs[e].close()
			},
			changeD(e, type) {
				// console.log((type === 'showRight' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
				if (!e) {					
					console.log('关闭弹窗')					
				}
			
			},
			collapseChange(e) {
				// console.log(e, '折叠面板点击');
				// if (e) {
				// 	this.tagId = this.treeList[e].id					
				// }
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	// ::v-deep uni-drawer{ height: 50vh !important;
	// 	.uni-drawer__content{
	// 		overflow-y: scroll !important;
	// 	}
	// }
	.sub1List {
		background-color: #f7f7f7;
		// padding-left: 20rpx;
	}
	
	.content {
		
		.item {
			background-color: #fff;
			line-height: 80rpx;
			font-size: 26rpx;
			color: #497387;
			// border-bottom: 1px solid #dae8f0;
	
			text {
				padding-left: 20rpx;
			}
	
			.item:last-child {
				border-bottom: 0;
			}
		}
	
		.item.active {
			// background-color: #aed1ec; 
			color: #fff;
			background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%) !important;
		}
	
		.textss {
			display: inline-block;
			width: 100%;
			border-bottom: 1px solid #ebeef5;
		}
	
		.leve2 {
			.textss {
				padding-left: 20rpx;
			}
		}
	
		.leve2 {
			.textss {
				padding-left: 40rpx;
			}
		}
	
		.leve3 {
			.textss {
				padding-left: 60rpx;
			}
		}
	
		.leve4 {
			.textss {
				padding-left: 80rpx;
			}
		}
	}
	.proTitle {
		text-align: center;
		padding: 20rpx 0;
		margin-top: 60rpx;
		// margin-bottom: 20rpx;
		color: #666;
		font-size: 26rpx;
	}
.close {
		display: flex;
		justify-content: right;
		padding-top: 60rpx;
		padding-right: 20px;
	}

</style>