<template>
	<view>
		<z-nav-bar :title="pageName"></z-nav-bar>
		<view class="">
			<!-- <uni-section title="左侧滑出" type="line"> -->
						<view class="example-body">
							<view class="haveNoSelected">							
								<view class="flex_box" style="text-align: center;  align-items: center; justify-content: center; width: 100%; background-color: #eee; padding: 40rpx 0;">
									<button type="primary" @click="showDrawer('showLeft')" size="mini"><text class="word-btn-white">选择任务</text>
									</button>
								</view>
								<text style="display: inline-block; margin-top: 40rpx;">
									操作步骤：<br/>
									1、点击上面的选择按钮，在弹出的面板中选择要评分的内容<br/>
									2、点击要评分的内容，会列出学员提交的内容，评分员可点击对应的提交内容进行评分
								</text>
							</view>	
												
							<uni-drawer ref="showLeft" mode="left" :width="300" @change="change($event,'showLeft')">								
								<view class="scroll-view">
														<scroll-view class="scroll-view-box" scroll-y="true">
															<view class="info">
																<text class="info-text">右侧遮罩只能通过按钮关闭，不能通过点击遮罩关闭</text>
															</view>
															<view class="close">
																<button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
															</view>
															<view class="info-content" v-for="item in 100" :key="item">
																<text>可滚动内容 {{item}}</text>
															</view>
															<!-- <view class="close">
																<button  @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
															</view> -->
														</scroll-view>
													</view>
							</uni-drawer>
						</view>
					<!-- </uni-section> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classId:undefined,
				pageType:undefined,
				showRight: false,
								showLeft: false,
								pageName:''
			}
		},
		onLoad(e) {
				this.classId = e.classId
				this.pageType = e.type
				if(e.type == '0'){
					this.pageName = '任务评分'
				}else if(this.pageName = '医案评分'){
					
				}else{
					this.pageName = '心得评分'
				}
		},
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		},
		methods: {
			// 打开窗口
						showDrawer(e) {
							this.$refs[e].open()
						},
						// 关闭窗口
						closeDrawer(e) {
							this.$refs[e].close()
						},
						// 抽屉状态发生变化触发
						change(e, type) {
							console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
							this[type] = e
						}
		}
	}
</script>

<style lang="scss" scoped>
	.example-body {
		padding: 10px;
	}
	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex:1
	}
	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.info {
		padding: 15px;
		color: #666;
	}
	
	.info-text {
		font-size: 14px;
		color: #666;
	}
	.info-content {
		padding: 5px 15px;
	}
	.close {
		padding: 10px;
	}
</style>
