<template>
	<view style="min-height: calc(100vh - 120rpx); background-color: #ebf2f5;">
		<z-nav-bar title="思考题提交列表"></z-nav-bar>
		<view class="pad20">

			<view v-if="taskList.length > 0 ">
				<view class="submitRecode">
					<view class="newBox">
						<view class="item " v-for="(item, index) in taskList" @click="clickReply(item)">
							<view class="leve1 flex_box">
								<view class="pp" style="flex: 1;" v-html="item.content"></view>
								<text v-if="item.scoreSuccess == '0'" class="red light"></text>
								<text v-else class="score" style="padding-left: 10rpx;">{{item.score}}分</text>
								<!-- <text v-if="" class="blue light"></text> -->
							</view>
							<view :class="['leve2']">
								<view class="" v-show="item.zhedie" v-html="item.questions"></view>
								<text class="btn" @click.stop="item.zhedie = false" v-show="item.zhedie">收起</text>
								<text class="btn" @click.stop="item.zhedie = true" v-show="!item.zhedie">查看原题</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-divider v-show="status == 2" text="已加载全部"></u-divider>
			<u-divider v-show="status == 3" text="暂无数据"></u-divider>
			<u-divider v-show="status == 1" text="加载中..."></u-divider>
			
			<u-popup key="1" v-if="curReplay.replyId" :show="showEditBlank" :round="10" @close="closePup" ref="" z-index="998" overlay-style="z-index:998">
				<view class="" style="padding: 40rpx; max-height: 80vh; overflow-y:scroll">
					<view class="anserBox">
						<h3>提交的内容</h3>
						<view class="" style="border-bottom: 1px solid #eee; padding-bottom: 20rpx; margin-bottom: 20rpx;">
							<view class="anserContent" v-html="curReplay.content"></view>
							<view class="">								
								<view class="imgBox flex_box" v-if="curReplay.fileList.length > 0">
									<view class="item" v-for="(item, index) in curReplay.fileList" :key="index">
										<image @click="previewImage(item.url)" :src="item.url" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="date">
							日期：{{curReplay.createTime}}
						</view> -->
						<!-- <view class="" v-if="curReplay.createUser" style="color: #999;padding: 10rpx 0; font-size: 26rpx;">
							学员信息：{{curReplay.createUser.nickname != null && curReplay.createUser.nickname != '' ? curReplay.createUser.nickname : '匿名用户'}}
							/ {{curReplay.createUser.tel}}
						</view>	 -->				
						<view class="score" v-show="curReplay.scoreSuccess == 1">
							分数：{{curReplay.score}}
						</view>
						<view class="score noscore" v-show="curReplay.scoreSuccess == 0">
							未生成成绩
						</view>
						<template v-if="roleCode.includes('4') || roleCode.includes('5') && curReplay.scoreSuccess != 1">	
							<view class="" style=" padding: 10rpx 10rpx; margin-top: 20rpx;">
								<view class="scoreBox flex_box">
									<text>分数</text>
									<text v-for="(item, index) in scoreList" @click="setScore(item)" :class="[item == form.score ?'active' : '' ]">
									{{item}} 分
									</text>								
								</view>							
							</view>
							<view class="btn_box ">
								<button class="submit" @click="onSubmit">提 交</button>							
								</view>
						</template>
					</view>
				</view>
			</u-popup>
		</view>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import {
		mapState
	} from "vuex";
	// const taskLIst1 = require('@/data/taskList.json')
	export default {
		data() {
			return {
				classId: undefined,
				pageType: undefined,
				pPage: 0,
				status: 88,
				loadFlag: false,
				pageName: '',
				taskList: [],
				roleCode: '',
				showEditBlank:false,
				curReplay:{},
				scoreList:[
					0,0.5,1,1.5,2,2.5
				],
				form: {
					score: undefined, //分数					
					id: undefined,					
				},
			}
		},
		onLoad(e) {
			console.log('e', e);
			this.classId = e.classId
			this.pageType = e.type
			this.roleCode = e.roleCode
			if (e.type == '0') {
				this.pageName = '作业列表'
			} else if (this.pageName = '医案列表') {

			} else {
				this.pageName = '心得列表'
			}
			// this.getList()
		},
		onPullDownRefresh() {
			this.pPage = 0
			this.taskList = []
			this.getList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.status != 2 && this.status != 3) {
				this.getList()
			}
		},
		onShow() {
			this.pPage = 0
			this.taskList = []
			this.getList()
			// this.getList()
		},
		// onBackPress() {
		// 	if (this.showRight || this.showLeft) {
		// 		this.$refs.showLeft.close()
		// 		this.$refs.showRight.close()
		// 		return true
		// 	}
		// },
		computed: {
			...mapState(["userInfo"]),
		},
		methods: {
			previewImage(url) {
				console.log(url);			
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ["很抱歉，暂不支持保存图片到本地"],
						success: function(res) {
							// console.log(res,'+++++')
						},
					},
				});
			},
			closePup() {
				this.showEditBlank = false
				this.form = {
					score: undefined,
					id: undefined,					
				}
				this.curReplay = {}			
			},
			onSubmit() {				
					if(!this.form.score && this.form.score != 0){
						uni.showToast({
							title:'请选择分值',
							icon:'none'
						})
						return
					}	
					var _url = "common/class/editScore"					
					var data = {
						"score": this.form.score,
						"replyId": this.form.id
						
					}
					console.log('data后台提交数据', data);
					$http.request({
							url: _url,
							method: "POST",
							data,
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						})
						.then(res => {
							uni.showToast({
								title: '操作成功！',
								icon: 'success'
							})
							// this.FileList = []
							setTimeout(()=>{
								this.closePup()		
								this.pPage = 0
								this.taskList = []
								this.getList()
							},1000)
												
						}).catch(e => {
							uni.showToast({
								title: '操作失败',
								icon: 'error'
							})
						});				
			},
			setScore(val){
				// if(this.form.score == val) return 
				this.form.score = val
				console.log('this.form.score',this.form.score);
			},
			// 点击作业或者医案，进入作业提交情况
			clickReply(item) {
				console.log('item',item);				
				this.form.id = item.replyId
				if(item.haveGiveScore){
					var scoreInfo = JSON.parse(item.scoreInfo)
					for (let k in scoreInfo){
					    console.log(k)
						if(k == this.userInfo.id){
							this.form.score = scoreInfo[k]							
								break
						}
					    console.log('this.form.score',this.form.score)
					}
				}
				this.curReplay = item
				this.showEditBlank = true
			},
			getList() {
				this.status = 1;
				if (this.loadFlag) {
					console.log("有未完成的进程");
					return;
				}
				uni.showLoading({
					title: '加载中'
				})
				this.loadFlag = true;
				this.pPage++;
				$http.request({
						url: "common/class/getThinkQuestionList",
						method: "POST",
						data: {
							"limit": 10,
							"page": this.pPage,
							"classId": this.classId
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.thinkQuestionList.records.length > 0) {
								console.log('数据获取成功', res.thinkQuestionList.records);
								var lis = res.thinkQuestionList.records
								lis.forEach(item => {
									item.scoreInfos = 0
									item.haveGiveScore = false
									item.fileList = []
									item.zhedie = false
									if (item.img != '') {
										var _urs = item.img.split(',')
										_urs.forEach(item1 => {
											item.fileList.push({
												url: item1
											})
										})
									}
									if (item.scoreInfo != "") {
										var i = 0
										for (var kk in JSON.parse(item.scoreInfo)) {
											console.log(kk);
											if (kk == this.userInfo.id) {
												item.haveGiveScore = true
											}
											i++
										}
										item.scoreInfos = i
									}
								})
								this.taskList = this.taskList.concat(lis)
								// this.taskList = taskLIst1.page.records // 测试数据
								if (res.thinkQuestionList.pages > this.pPage) {
									this.status = 0;
								} else {
									this.status = 2;
								}
							} else {
								this.status = 3; // 暂无数据
							}
							this.loadFlag = false;
							console.log('res', res);
							uni.hideLoading()
						}
					}).catch(e => {
						console.log(e, '数据报错')
						uni.hideLoading()
						this.loadFlag = false;
						uni.showToast({
							title: e.msg,
							icon: 'error'
						})
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/style/mixin.scss";
	.imgBox {
		flex-wrap: wrap;
	
		.item {
			width: 20%;
			margin-right: 10rpx;
			border: 1px solid #eee;
			padding: 0 !important;
			image {
				width: 100%;
			}
		}
	}
	.scoreBox{
			text{display: inline-block; font-size: 26rpx; width: 100%;  border: 1px solid #ddd;  text-align: center; line-height:60rpx; border-right: none;}
			text:last-child{border-right: 1px solid #ddd;}
			text.active{background-color: #55aaff; color: #fff; border-color: #55aaff;}
		}
		.noscore{color: #ffaa7f;}
		.score{color: #55aaff; font-size: 30rpx !important; font-weight: bold;}
		.btn_box {
			margin-top: 70rpx;
			padding-bottom: 20rpx;
	
			button {
				font-size: 32rpx;
				@include theme('btn_bg') color: #fff;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
			}
		}
		.noanser {
			padding: 20rpx;
			text-align: center;
		
			// border-bottom: 1px solid #eee;
			.btn {
				display: inline-block;
				border-radius: 20rpx;
				padding: 10rpx 20rpx;
				background-color: $themeColor;
				color: #fff;
			}
		}
.anserBox {
		border: 4rpx dotted #2bb447;
		margin-top: 30rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		padding-top: 0;
		.anserContent{line-height: 50rpx; padding: 20rpx 0; display: block;}
		h3 {
			line-height: 80rpx;
			width: 50%;
			margin: 0 auto;
			text-align: center;
			color: #fff;
			background-color: #2bb447;
			border-radius: 0 0 20rpx 20rpx;
		}
	}	

	.pad20 {
		padding: 20rpx;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	.submitRecode {
		// padding: 20rpx;

		.newBox {
			.classmateImg {
				width: 60rpx !important;
				height: 60rpx !important;

				image {
					width: 60rpx !important;
					height: 60rpx;
				}
			}

			.item {
				background-color: #fff;
				border-radius: 20rpx;
				box-shadow: none !important;
				// border-bottom: 1px solid #eee;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;

				.leve1 {
					align-items: center;
					border-bottom: 1px dashed #eee;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					.pp{font-size: 30rpx !important;}
					
					// .userName{}
				}

				.leve2 {
					justify-content: center;
					color: #666;
					font-size: 28rpx;

					.btn {
						display: block;padding: 10rpx;
						text-align: center;
					}

					b {
						font-size: 34rpx;
						padding: 0 4rpx;
						font-weight: normal;
						color: #333;
						color: red;
					}

					.item {
						text-align: center;
						padding-top: 0;
						padding-bottom: 0;
						margin-bottom: 0;
					}
				}

				// .leve2.zhedie{display: none;}
				.leve3 {
					color: $themeColor;
					text-align: center;
					padding-top: 10rpx;

					.tips {
						width: 100%;
						justify-content: space-between;
						font-size: 26rpx;
						color: #999;
					}

					.date {}

					.btn {
						border: 1px solid $themeColor;
						margin-top: 20rpx;
						display: inline-block;
						width: 50%;
						padding: 6rpx 0;
						border-radius: 10rpx;
					}
				}

				.leve3.no {
					color: #ff9277;
					text-align: center;
				}
			}
		}
	}

	// 处理抽屉内容滚动
	.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>