<template>
	<view class="wrap">
		<view class="stabar"></view>
		<view class="marsk" v-if="showLayer"></view>
		<view class="popup-layer" v-if="showMedal">
			<image class="animg" src="/static/images/joy.png"></image>
		</view>

		<view class="mainwrap">
		<view class="title">恭喜完成本次演练！</view>
		<view class="question-wrap">
		<view class="question-list">
		  <view class="question-item" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
				<span class="question-num">{{i+1}}</span>
		  </view>
		  <!-- <view class="question-item erritem" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
			<span class="question-num">{{i+1}}</span>
		  </view>  -->
			  
		</view>
		<view class="answer-content">
			<view class="qucont">{{ask}}</view>
			<view class="youans"><label>您的答案：</label>{{answer}}</view>
			<view class="corans"><label>正确答案：</label>{{answer}}</view>
			<view class="analys"><label>解析：</label>
			<view>解析内容解析内容……</view>
			</view>
		</view>
		</view>
	    <view class="question-record">
			<label>演练记录：</label>
	    	<view class="list">
	    	  <view class="item" v-for="(item, i) in recordList" :key="i">
	    	    <span>{{item.createTime}}</span>
	    	  </view>
	    	</view>
	    </view>
		<view class="backIndex">
			<button @click="backIndex()">返回首页</button>
		</view>
		<view class="perinfo">
		  <view class="myitem"> 
			<!-- <label><button open-type="share"></button>炫耀一下</label> -->
			<view @click="shareUser()"><label><image src="/static/images/btn-xy.png"></image></label>炫耀一下</view>
		  </view>
		  <view class="myitem"> 
			<view @click="review()"><label><image src="/static/images/btn-hg.png"></image></label>演练回顾</view>
		  </view>
		  <view class="myitem"> 
			<view @click="reChallenge()"><label><image src="/static/images/btn-cx.png"></image></label>重新挑战</view>
		  </view>
		</view>
	</view>
	<view class="popup-share" v-if="showShare">
		<view @click="closeShare()" style="margin-left: 250px;">关闭</view>
		<label class="medimg"><image src="/static/images/medal_1.png"></image></label>
		<view class="congrat">恭喜你获得1枚成就勋章！</view>
		<view class="perinfo">
		  <view class="myitem"> 
			<view @click=""><label><button open-type="share"></button><image src="/static/images/btn-wx.png"></image></label>分享给微信好友</view>
		  </view>
		  <view class="myitem"> 
			<view @click=""><label><button @tap="share"></button><image src="/static/images/btn-pyq.png"></image></label>分享到朋友圈</view>
		  </view>
		  <view class="myitem"> 
			<view @click=""><label><image src="/static/images/btn-ma.png"></image></label>二维码邀请</view>
		  </view>
		</view>
	</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
			   "questionFreId":"59088ceb55644b03b8d0c7d48d2f7d39",
			   "roleId":"5f96b1baae1a47fbb17215a5dc46f5ce",
			   questionList: [],
			   recordList: [],
			   "ask":"",
			   "answer":"",
			   "showLayer":true,
			   "showAnlysisc":false,
			   "showMedal":true,
			   "showShare":false,
			};
		},
		//分享到好友
		 onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '自定义分享标题',
		      path: '/pages/home/home'
		    }
		},
		//分享到朋友圈
		 onShareTimeline(res) {
		    return {
		      title: "快来和我一起答题吧",
		      type: 0,
		      summary: "",
		    };
		},
		onLoad(options) {
			this.timer = setTimeout(() => {
			  this.showMedal = false
			  this.showLayer = false
			  clearTimeout(this.timer)
			}, 5000)
			this.roleId = options.roleId
			this.questionFreId = options.questionFreId
			this.getQuestionList()
			this.getRecordList()
		},
		methods: {
			async share(){
				await uni.share({
					title: "快来和我一起答题吧",
					type: 0,
					summary: "",
					success() {
						console.log('分享成功')
					}
				})
			}, 
			async getQuestionList() {
				const {
					data: res
				} = await uni.$http.post('/small/questionAnswer/listAll',{questionFreId:this.questionFreId})
				if (!res.success) return uni.$showMsg()
		        this.questionList = res.data
				if (this.questionList.length !=0) {
					this.ask = this.questionList[0].ask;
					this.answer = this.questionList[0].answer;
				}
				
				//uni.$showMsg('数据请求成功！')
			},
			async getRecordList() {
				const {
					data: res
				} = await uni.$http.post('/small/questionFre/listAll',{roleId:this.roleId})
				if (!res.success) return uni.$showMsg()
			    this.recordList = res.data
				
				//uni.$showMsg('数据请求成功！')
			},
			backIndex(){
				uni.switchTab({
				  url:'/pages/index/index'
				})
			},
			shareUser(){
				this.showShare = true
				this.showLayer = true
			},
			reChallenge(){
				uni.navigateTo({
				 url: '/subpkg/rechallenge/rechallenge?questionFreId='+this.questionFreId
				})
			},
			review(){
				uni.navigateTo({
				 url: '/subpkg/review/review?questionFreId='+this.questionFreId
				})
			},
			closeShare(){
				this.showShare = false
				this.showLayer = false
			},
			itemClickHandler(item) {
				if(item !== ""){
					this.ask= item.ask
					this.answer= item.answer
					this.showAnlysisc = true
				}
			},
		}
	}
</script>

<style lang="scss">
	@import url("@/static/base_css.css");
	
	/* 设置弹出层 */
	.marsk {
		// display: none;
		position: absolute;
		z-index: 999;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
	}
	.popup-layer, .popup-share {
		//display: none;
		position: absolute;
		top: 45%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 600rpx;
		height: 400rpx;
		padding: 30rpx;
		z-index: 9999;
	}
	
	.popup-layer .animg {
		width: 100%;
		height: 100%;
	}
	
	.popup-share {
		height: 500rpx;
		background-color: #e4eafe;
		border-radius: 30rpx;
		.medimg {
			position: absolute;
			top: -15%;
			left: 50%;
			transform: translate(-50%, -10%);
			width: 300rpx;
			height: 230rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.congrat {
			margin: 25% auto 10%;
			color: #ff6b08;
			font-size: 40rpx;
			text-align: center;
		}
		.myitem {
		    margin: 0;
		    width: 33%;
		}
	}
	
	.title {
		margin: 50rpx 0;
		color: #333;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}
	
	.question-wrap {
		position: relative;
		width: 100%;
	}
	.question-list {
	  /*display: flex;
	  justify-content: space-around;*/
	  margin: 0 2%;
	  
	  .question-item {
			display: inline-block;
			margin: 2% 1.5%;
			padding: 1% 3%;
			/* width: 60rpx; */
			/* height: 60rpx; */
			align-items: center;
			background-color: #18c569;
			border-radius: 20rpx;
			color: #fff;
			font-size: 40rpx;
			font-weight: bold;
			text-align: center;	
		}
	    .erritem {
			background-color: #fb3737;
		}	
	}
   .answer-content {
	   //display: none;
	   position: absolute;
	   z-index: 100; 
	   margin: 2% 3%;
	   padding: 2%;
	   width: 90%;
	   height: 400rpx;
	   background: #fff;
	   border: 1px solid #18c569;
	   border-radius: 10px;
   }
   
   .qucont {
	   margin: 1% 0 3% 0;
	   color: #000;
	   font-family: 30rpx;
	   font-weight: bold;
   }
   
   .corans {
	   color: #18c569;
	   font-weight: bold;
	   label {
		  font-size: 36rpx;  
	   }
   }
   
   .youans {
	   margin: 2% 0;
	   color: #999;
   }
   
   .analys {
       margin: 3% 0;
	   
	   label {
		  font-size: 36rpx; 
		  font-weight: bold;
	   }
	   view {
		   color: #666;
		   line-height: 1.75;
	   }
   }
   
   .question-record {
		margin: 6% 3% 10%;
		width: 94%;
		height: 45%;
		overflow: hidden;
		label {
		  font-size: 32rpx; 
		  font-weight: bold;
		  line-height: 2;  
		}
		.list {
			width: 100%;
			height: calc(100% - 80rpx);
			line-height: 1.75;
			overflow-y: auto;
			.item {
				margin: 2% 0;
				border-bottom: 1px dotted #ddd;
			}
		}
   }
   .backIndex {
       margin: 2% auto;
       width: 86%;
	   button {
		   background-color: #1367fe !important;
		   border-radius: 50rpx !important;
		   color: #fff !important;
	   }
   }
   
   .perinfo {
		display: flex;
		margin: 5% 0;
		width: 100%;
		justify-content: center;
	}
   
   .myitem {
		margin: 3% 8%;
		width: 15%;
		text-align: center;
		font-size: 0.8rem;
		color: #666;
	}
   
   .myitem > view > label {
		display: block;
		position: relative;
		margin: 20rpx auto;
		width: 100rpx;
		height: 100rpx;
		image {
			width: 100%;
			height: 100%;
		}
   }
   

</style>
