<template>
	<view>
		<public-module></public-module>
		<z-nav-bar title="详情"></z-nav-bar>
		<!-- <view class="" style="background-color: #f4f7ff; min-height: calc(100vh - 200rpx);">		 -->
		<view class="mainContent" v-if="thisTask.id">
			<view class="" style="height:40rpx;">

			</view>
			<view class="taskBox">
				<h3>题目内容</h3>
				<view class="taskTitle">
					{{thisTask.title}}
				</view>
				<view class="imgBox flex_box" v-if="FileList11.length > 0">
					<view class="item" v-for="(item, index) in FileList11" :key="index">
						<image @click="previewImage(item.url)" :src="item.url" mode="widthFix"></image>
					</view>
				</view>
				<view class="taskContent" v-html="thisTask.content">

				</view>				
			</view>		
				<!-- 还没提交提示 -->
				<view class="noanser" v-show="!thisTask.reply">
					<view class="">
						<text>还没有提交你的答案呢，现在开始作答吧！</text>
					</view>
					<view class="btn">
						<text @click="editOrAdd(undefined)">写答案</text>
					</view>
				</view>
			<!-- 提交记录 -->
			<view v-show="thisTask.reply">
			<uni-section class="mb-10 nobg" title="提交记录" type="line"></uni-section>
			<view class="">
				<radio-group  @change="radioChange1" class="flex_box">
					<view class="" style="margin-right:20rpx ;">
						<radio value="0"  />全部同学的提交</label>
					</view>
					<view class="">
						<radio  value="1"  checked="true" />只看我自己提交的</label>
					</view>						
				</radio-group>
			</view>
			<view class="zuoyeListBox" v-if="zuoyeList.length > 0">
				<view class="newBox" >
					<view class="item " v-for="(item, index) in zuoyeList" >
						<view class="leve1 flex_box" style="justify-content: space-between;">
							<view class="flex_box" style="justify-items: center;">
								<view class="classmateImg">
									 <image v-if="item.createUser.avatar != null && item.createUser.avatar != ''" :src="item.createUser.avatar" mode="aspectFit"></image> 
									<image v-else src="/static/icon/morenAvavter.png" mode="aspectFit"></image>
								</view> 
								 <view class="userName flex_box">
									 <text v-if="item.createUser.nickname != '' && item.createUser.nickname != null">匿名用户</text>
									<text v-else>匿名用户</text>
								</view>
							</view>								
								<view class="editBtn" v-if="listDisplay == '1' && item.scoreSuccess == 0">
									<text @click="editOrAdd(item)">修改</text>	
								</view>
						</view>
						<view class="leve2">
							<view class="imgBox flex_box" v-if="item.fileList.length > 0">
								<view class="item" v-for="(item, index) in item.fileList" :key="index">
									<image @click="previewImage(item.url)" :src="item.url" mode="widthFix"></image>
								</view>
							</view>
							<view class="">
								{{item.content}}
							</view>	
							<view class="">
								<view class="score" v-show="listDisplay == '1' && item.scoreSuccess == 1">
									分数：{{item.score}}
								</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>
		</view>		
		<u-popup key="1"  :show="showEditBlank" :round="10" @close="closePup" ref="">
			<view class="" style="padding: 40rpx; max-height: 80vh; overflow-y:scroll">
				<view class="anserBox" >
					<h3>我的答案</h3>
					<uni-forms :modelValue="form" :rules="rules" ref="form">
						<view class="input_box">
							<uni-forms-item label="" name="content" label-width="0">
								<text class="input_tit"><i>*</i>内容:<span
										style="font-weight: normal; color: #999; font-size: 26rpx;">(600字以内)</span></text>
								<view class="in">
									<view class="uni-textarea">
										<textarea placeholder-style="font-size:26rpx" v-model="form.content" maxlength="600"
											auto-height placeholder="请输入内容" />
				
									</view>
								</view>
							</uni-forms-item>
						</view>
						<view class="input_box">
							<text class="input_tit">上传图片:</text>
							<view class="in" style="border: none;" @click="checkPermision">
								<u-upload :fileList="fileList1" @afterRead="addPic" @delete="deletePic" multiple
									:maxCount="4" width="40" height="40" :previewFullImage="true">
								</u-upload>
								<!-- <text style="font-size: 24rpx; color: #999;">可上传4张问题截图</text> -->
							</view>
							<!-- <input type="password" maxlength="8" v-model="confirmPassword" placeholder="请确认密码" /> -->
						</view>
				
						<view class="input_box">
							<radio-group @change="radioChange" class="flex_box">
								<view class="" style="margin-right:20rpx ;">
									<radio value="0" :checked="0 == form.display" />他人不可见</label>
								</view>
								<view class="">
									<radio value="1" :checked="1 == form.display" />他人可见</label>
								</view>
							</radio-group>
							<span
								style="color: #999; font-size: 28rpx; margin-top: 20rpx; display: block;">（不勾选时，班级管理员以外的人看不见提交的内容）</span>
				
						</view>
					</uni-forms>
					<view class="btn_box"><button @click="onSubmit">提 交</button></view>
				</view>
			</view>
		</u-popup>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				showEditBlank:false, 
				zuoyeList:[],
				loadFlag:false,
				thisTask: {},
				status: 88,
				TaskId: undefined,
				userMes: undefined,
				FileList11: [],				
				fileList1: [],
				pPage: 0,
				form: {
					taskId: undefined,
					id: undefined,
					display: "1", //0不展示1展示
					content: "",
					img: ""
				},
				rules: {
					content: {
						rules: [{
								required: true,
								errorMessage: '请输入回答内容',
							}

						]
					},

				},
				listDisplay: '1', // 提交记录展示类型 0 全部 1 自己的
				
			}
		},
		onLoad(e) {
			uni.hideTabBar();
			// this.thisTask = JSON.parse(e.options)
			console.log('e',e)
		if(e.id){
			this.thisTask.id = e.id
			this.getTaskInfo()
			this.getZuoyeList()
		}
			
			// console.log('this.FileList', this.FileList)
			// this.TaskId = e.id
			this.getUserInfo()
			
		},
		onReachBottom() {
			if (this.status != 2 && this.status != 3) {
				this.getZuoyeList()
			}
		},
		onPullDownRefresh() {
			// this.getTaskInfo()
			uni.stopPullDownRefresh()
		},
		onShow() {
			this.form.taskId = this.thisTask.id		
	
		},
		computed: {
			...mapState(["userInfo"]),
		},
		methods: {
			// 获取医案任务详情
			getTaskInfo(){
				$http.request({
						url: "common/class/getClassTaskInfoStudent",
						method: "POST",
						data: {
							"taskId": this.thisTask.id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							// that.isHave = true
							console.log(res)
							this.thisTask = res.classTask
							this.fileList11 = []
							if (this.thisTask.img != '') {
								var imgs = this.thisTask.img.split(',')
								imgs = imgs.forEach((item, index) => {
									this.FileList11.push({
										url: item
									})
								})
							} 
							console.log('this.fileList11',this.fileList11);
						}
					}).catch(e => {
						console.log(e, '数据报错')
						// this.status = 3
						uni.showToast({
							title: e.msg,
							icon: 'error'
						})
					});
			},
			closePup(){
				this.showEditBlank = false
				this.form = {
					taskId: undefined,
					id: undefined,
					display: "1", //0不展示1展示
					content: "",
					img: ""
				}
				this.fileList1 = []
			},
			deletePic(event) {
				this.fileList1.splice(event.index, 1)
			},
			editOrAdd(item){
				console.log('item', item);
				if(item){
					this.form = item
					 this.fileList1 = [...item.fileList]
					console.log('fileList4545',item.fileList);
				}
				else{
					console.log('form', this.form);
				}
				
				this.showEditBlank = true
			},
			radioChange1(e){
				
				this.listDisplay = e.detail.value
				console.log('点了',e);
				this.pPage = 0
				this.zuoyeList = []
				this.getZuoyeList()
			},
			previewImage(url) {
				console.log(url);
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ["很抱歉，暂不支持保存图片到本地"],
						success: function(res) {
							// console.log(res,'+++++')
						},
					},
				});
			},
			getZuoyeList() {
				this.status = 1;
				if (this.loadFlag) {
					console.log("有未完成的进程");
					return;
				}
				uni.showLoading({
					title:'加载中'
				})
				this.loadFlag = true;
				this.pPage++;
				$http.request({
						url: 'common/class/getReplyListByTaskIdStudent',
						method: "POST",
						data: {
							"limit": 10,
							"page": this.pPage,
							"taskId": this.thisTask.id,
							"myReply": this.listDisplay //0全部作业1我的作业
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if(res.page.records.length > 0){
							var list = res.page.records
							list.forEach(item => {
								item.fileList = []
								if(item.img != ''){
									var _urs = item.img.split(',')
									_urs.forEach(item1 => {
										item.fileList.push({url:item1})
									})
								}
							})
							this.zuoyeList = this.zuoyeList.concat(list)
							console.log('chulihoude ',this.zuoyeList);
							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 => {
						uni.hideLoading()
						this.loadFlag = false;
						// console.log('表单错误信息：', err);
						uni.showToast({
							title: '获取作业列表失败',
							icon:'none'
						})
					})

			},
			getUserInfo() {
				// 获取个人信息
				if (this.userInfo.id != undefined) {
					this.$http.post("common/user/getUserInfo").then((res) => {
						this.userMes = res.result
					}).catch(e => {
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						})
					});
				}
			},
			// 跳转
			onPageJump(url, id, modeType) {
				uni.navigateTo({
					url: `${url}?id=${id}&type=${modeType}`
				});
			},
			onSubmit() {
				this.$refs.form.validate().then(res => {
					if (this.fileList1.length > 0) {
						let _list = this.fileList1
						_list = _list.map(item => item.url)
						// console.log('this.fileList1',_list);
						this.form.img = _list.join(',')
					}
					var _url = ""
					this.form.id ?  _url =
						'common/class/editClassTaskReply'  : _url = 'common/class/addClassTaskReply'
					var data = {
						"taskId": this.form.id ? undefined : this.form.taskId,
						"id": this.form.id,
						"display": this.form.display, //0不展示1展示
						"content": this.form.content,
						"img": this.form.img
					}
					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 = []
							this.closePup()								
							setTimeout(()=>{
								this.pPage = 0
								this.zuoyeList = []
								this.getTaskInfo()
								this.getZuoyeList()
							},200)
						}).catch(e => {							
							uni.showToast({
								title: '操作失败',
								icon: 'error'
							})
						});
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						title: '页面有未填写的内容哦',
						icon: 'none'
					})
				})
			},
			 addPic(e) {				
				let that = this;
				 console.log("添加图片", that.fileList1);
				for (var i = 0; i < e.file.length; i++) {
					console.log(i,e.file[i].url)
					uni.uploadFile({
						url: this.$baseUrl + "oss/fileoss",
						filePath: e.file[i].url,
						//files:e.file,
						name: "file",
						formData: {},
						success: (res) => {
							// console.log("添加图片", this.fileList1);
							that.fileList1.push({
								url: JSON.parse(res.data).url,
							});
							console.log(that.fileList1, "that.uploadPicLIst");
						},
						fail: (error) => {
							console.log("上传失败", error);
						},
					});
				}
			},
			async checkPermision() {
				var result = await permission.premissionCheck("CAMERA_EXTERNAL_STORAGE")
				if (result != 1) {
					return false
				}
			},
			radioChange(e) {
				this.form.display = e.detail.value
				console.log('点了', this.form.display, e);

			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/style/mixin.scss";

	.flexbox {
		display: flex;
	}

	i {
		color: red;
		padding-right: 20rpx;
	}
	.noanser{ padding: 20rpx;
		text-align: center; 
		// border-bottom: 1px solid #eee;
		.btn{display: inline-block; border-radius: 20rpx ; margin-top: 20rpx; padding: 10rpx 20rpx; background-color: $themeColor; color: #fff;}
	}
	.in {
		border: 1rpx solid #eeeeee;
		border-radius: 8rpx;
		padding: 8rpx;
		margin-top: 10rpx;
	}
	.zuoyeListBox{margin-top: 40rpx;}
	.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;
		}
	}

	.fabBox {}

	.taskBox {
		border: 4rpx dotted #bad7f0;
		padding: 20rpx;
		padding-top: 0;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		h3 {
			line-height: 80rpx;
			width: 50%;
			margin: 0 auto;
			text-align: center;
			color: #fff;
			border-radius: 0 0 20rpx 20rpx;
			background-color: $themeColor;
		}
	}

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

		h3 {
			line-height: 80rpx;
			width: 50%;
			margin: 0 auto;
			text-align: center;
			color: #fff;
			background-color: #2bb447;
			border-radius: 0 0 20rpx 20rpx;
		}
	}
	.nobg{background: transparent;}
	.taskTitle {
		font-size: 30rpx;
		margin: 20rpx 0;
	}
.newBox {
			.classmateImg {
				width: 60rpx !important;
				height: 60rpx !important;
                margin-right: 20rpx; 
				image {
					width: 60rpx !important;
					height: 60rpx;
				}
			}
			.editBtn{padding-left: 40rpx; color: $themeColor;  text-align: right;}
			.item {
				background-color: #fff;
				border-radius: 20rpx;
				box-shadow: none !important;
				padding: 20rpx;
				margin-bottom: 30rpx;
				// border-bottom: 1px solid #eee;
				// border-radius: 0 !important;

				.leve1 {
					align-items: center;
					border-bottom: 1px dashed #eee;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					// .userName{}
				}
				.leve2{ overflow: hidden;
					.score{
						float: left;
					}
					.date{color: #999; float: right; text-align: right; font-size: 26rpx;}
				}
			}
		}
		.score{color: #55aaff; font-size: 30rpx !important; font-weight: bold;}
	.taskContent {
		font-size: 30rpx; line-height: 50rpx;
		margin-top: 20rpx;
	}

	.imgBox {
		flex-wrap: wrap;

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


	.manBtnBox {
		justify-content: center;

		text {
			width: 30%;
			font-size: 28rpx;
			padding: 20rpx 0;
			border-radius: 10rpx;
			display: block;
			margin: 0 20rpx;
			color: #fff;
		}

		.edit {
			background-color: $themeColor;
		}

		.del {
			background-color: #ffa4a6;
		}

		.set {
			background-color: #ffca7e;
		}

	}


	.mainContent {
		display: block;
		color: #333;
		padding: 0 20rpx;
		padding-bottom: 120rpx;
		background-image: linear-gradient(30deg, #d4eaf0 0%, #d4eaf0 50%, #fdf0ed 100%);
		min-height: 100vh;
	}
</style>