<template>
	<view style="min-height: calc(100vh - 120rpx); background-color: #ebf2f5;">
		<z-nav-bar :title="pageName"></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="clickTask(item)">
							<view class="leve1 flex_box">
								<text>{{item.title}}</text>
							</view>
							<view class="leve2" v-html="item.content">
								<!-- {{item.content}} -->
							</view>
							<view class="leve3">
								<view class="score" v-if="item.scoreSuccess >= 1">
									分数：{{item.score}}
								</view>
								<view class="score noscore" v-else>未评分</view>
								<view class="date">
									{{item.createTime}}
								</view>
							</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>
		</view>
		<u-popup key="1" :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="fileList1.length > 0">
								<view class="item" v-for="(item, index) in fileList1" :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;">
						学员信息：{{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 && (classState == '1' || classState == '3')">
						<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" v-if="classState != '2' && classState != '0'"><button @click="onSubmit">提 交</button></view>
					</template>
				</view>
			</view>
		</u-popup>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	// const taskLIst1 = require('@/data/taskList.json')
	export default {
		data() {
			return {
				classId: undefined,
				pageType: undefined,
				pPage: 0,
				status: 88,
				loadFlag: false,
				pageName: '',
				taskList: [],
				fileList1: [],
				scoreList: [
					0, 0.5, 1, 1.5, 2, 2.5
				],
				rules: {
					score: {
						rules: [{
								required: true,
								errorMessage: '请输入分数',
							}

						]
					},

				},
				roleCode: '',
				showEditBlank: false,
				curReplay: {},
				form: {
					score: undefined, //分数					
					id: undefined,
				},
				classState : undefined
				// ispreviewImage :false,
			}
		},
		onLoad(e) {
			console.log('e', e);
			this.classId = e.classId
			this.pageType = e.type
			this.roleCode = e.roleCode
			this.pageName = '心得列表'
			this.classState = e.classState
			this.getList()
		},
		onPullDownRefresh() {
			this.pPage = 0
			this.taskList = []
			this.getList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.status != 2 && this.status != 3) {
				this.getList()
			}
		},
		onShow() {
			// this.getList()
			// if(this.ispreviewImage){
			// 	this.showEditBlank = true
			// 	this.ispreviewImage = false
			// }
		},
		// onBackPress() {			
		// },
		methods: {
			setScore(val) {
				// if(this.form.score == val) return 
				this.form.score = val
			},
			onSubmit() {
				// this.$refs.form.validate().then(res => {	
				if (!this.form.score && this.form.score != 0) {
					uni.showToast({
						title: '请选择分值',
						icon: 'none'
					})
					return
				}
				var _url = "common/class/editTaskScore"
				var data = {
					"score": this.form.score,
					"taskId": 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'
						})
						setTimeout(() => {
							this.pPage = 0
							this.taskList = []
							this.getList()
							this.closePup()
						}, 1000)

					}).catch(e => {
						uni.showToast({
							title: e.errMsg,
							icon: 'error',
							duration:3000
						})
					});
				// }).catch(err => {
				// 	console.log('表单错误信息：', err);
				// 	uni.showToast({
				// 		title: '页面有未填写的内容哦',
				// 		icon: 'none'
				// 	})
				// })
			},
			previewImage(url) {
				console.log(url);
				// this.ispreviewImage = true
				// this.showEditBlank = false
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ["很抱歉，暂不支持保存图片到本地"],
						success: function(res) {
							// console.log(res,'+++++')
						},
					},
				});
			},
			closePup() {
				this.showEditBlank = false
				this.form = {
					score: undefined,
					id: undefined,
				}
				this.curReplay = {}
				this.fileList1 = []
				console.log('this.fileList1', this.fileList1);
				// setTimeout(()=>{
				// 	this.pPage = 0
				// 	this.taskList = []
				// 	this.getList()
				// },1000)
			},
			clickTask(item) {
				// console.log('item',item);				
				this.curReplay = item
				this.form = {
					...item
				}
				if (this.form.scoreSuccess == 0) {
					this.form.score = undefined
				}
				if (item.img != '') {
					var _list = item.img.split(',')
					_list.forEach(item => {
						this.fileList1.push({
							url: 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/getClassTaskList",
						method: "POST",
						data: {
							"limit": 10,
							"page": this.pPage,
							"classId": this.classId,
							"type": this.pageType + '', //类型 0班内任务1医案2心得							    
							"title": ""
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						console.log();
						if (res.code == 0) {
							if (res.page.records.length > 0) {
								console.log('数据获取成功', res.page.records);
								var lis = res.page.records
								this.taskList = this.taskList.concat(lis)
								// this.taskList = taskLIst1.page.records // 测试数据
								if (res.page.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";

	.example-body {
		padding: 10px;
	}

	.pad20 {
		padding: 20rpx;
	}

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

	.anserBox {
		border: 4rpx dotted #2bb447;
		margin-top: 30rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		padding-top: 0;

		.imgBox {
			flex-wrap: wrap;

			.item {
				width: 20%;
				margin-right: 10rpx;
				border: 1px solid #eee;
				padding: 0 !important;

				image {
					width: 100%;
				}
			}
		}

		.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;
		}
	}

	.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;
		}
	}

	.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;
		}
	}

	::v-deep .uni-forms-item {
		margin-bottom: 0 !important;
	}

	.date {
		font-size: 26rpx;
		color: #999;
	}

	.score {
		color: #55aaff;
		font-size: 30rpx !important;
		font-weight: bold;
		;
	}

	.noscore {
		color: #ffaa7f;
	}

	.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;
					// .userName{}
				}

				.leve2 {
					justify-content: space-between;
					color: #666;
					font-size: 28rpx;
					line-height: 50rpx;
					@include bov(3);

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

				.leve3 {
					overflow: hidden;
					color: #999;
					text-align: center;
					padding-top: 10rpx;

					.score {
						float: left;
					}

					.date {
						float: right;
					}

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



					.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>