<template>
	<view class="background" :style="backgroundStyle">
		<view class="paper">
			<view v-if="curQuIndex < questions.length ">
				<view class="question">
					<text class="question-label">问题{{curQuIndex+1}}</text>
					<view class="question-panel">
						<text class="question-content">{{questions[curQuIndex].question}}</text>
					</view>
				</view>
				<view v-if="questions[curQuIndex].answers.length > 0">
					<view class="select-list">
						<view  size="12" activeColor="#00A8EA" labelSize="24rpx"
							v-for="(aitem,aindex) in questions[curQuIndex].answers"   :key="aitem.answer" :name="aitem.answer"
							@click="selectChange(aitem.answer)" :class="(curQuIndex < form.length && aitem.answer== form[curQuIndex].value)?'select-item-active':'select-item'"
							>
							<view class="item-answer">{{aitem.answer}}</view>
							<view class="item-content">{{aitem.item}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<view class="bottom">
			<!-- <u-button class="button" type="primary" shape="circle" color="#00A8EA" text="提交问券" @click="submit"></u-button> -->
			<view v-if="curQuIndex<questions.length-1" @click="nextQuestion" class="button">
				<view>下一题</view>
			</view>
			<view v-else  @click="submit" class="button">
				<view>提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import form from '@/uni_modules/uview-ui/libs/config/props/form'
	import api from '@/api/api.js'
	import {store} from '@/store/coupon.js'
	import {acstore} from '@/store/activities.js'
	import {
		authState,
		checkPage
	} from '@/util/auth'
	export default {
		data() {
			return {
				form: [],
				curQuIndex:0,
				rules: {},
				img: require('@/static/images/couponback.png'),
				backgroundStyle: {},
				questions: [],
				activityId:undefined
			}
		},
		methods: {
			getQuestionList(){
				api.getquestionlist(this.activityId).then((res)=>{
					if(res.data.code == 200){
						const data = res.data.data
						this.questions = data.data.map((item,index)=>{
							return {
								id: item.id,
								question: item.name,
								type: 'select',
								answers: item.items.map((val)=>{
									return {
										answer: val.answer,
										item: val.item.substring(2)
									}
								}),
							}
						})
						// console.log(this.questions)
					}else{
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				})
			},
			submit() {
				if (this.form.length < this.questions.length) {
					this.showToast({
						type: 'default',
						message: "请回答所有问题"
					})
				} else {
					//提交问券
					store.commit('setanswer',this.form)
					uni.navigateTo({
						url: '/pages/coupons/finish/index'
					})
				}
			},
			nextQuestion(){
				if(this.curQuIndex < this.form.length){
					this.curQuIndex = this.curQuIndex+1
				}else{
					this.showToast({
						type: 'default',
						message: "完成题目后才能查看下一道哦",
						duration:1000,
					})
				}
			},
			selectChange(anwser) {
				if (this.curQuIndex == this.form.length) {
					this.form.push({
						id: this.questions[this.curQuIndex].id,
						value: anwser
					})
				} else {
					this.$set(this.form[this.curQuIndex],"value",anwser)
				}
				// console.log(this.form)
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
		},
		onShow(){
			const acid = this.$route.query['acid']
			
			acstore.dispatch('getactivitId').then((res)=>{
				console.log(acid,this.activityId)
				if(acid){
					this.activityId = acid
					if(res.activitId != acid){
						acstore.commit('setactivitId',acid)
						authState.logout()
					}
				}else{
					this.activityId =  parseInt(res.activitId)
				}
				this.getQuestionList()
			}).catch(error => {
				if(acid){
					this.activityId = acid
					acstore.commit('setactivitId',acid)
				}
				this.getQuestionList()
			});
			
			if(authState.isLogin()){
				uni.navigateTo({
					url:'/pages/coupons/hinge/index'
				})
			}			
		},
		mounted() {
			checkPage()
			store.commit('setanswer',[])
			this.backgroundStyle = {
				backgroundImage: `url('${this.img}') `,
			}
		}

	}
</script>

<style>
	.background {
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #F5F5F5;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.paper {
		/* background-color: #fff; */
		padding: 18rpx;
		margin-top: 300rpx;
	}

	.coupon-block {
		margin-bottom: 86rpx;
	}

	.question {
		font-weight: 400;
		font-size: 24rpx;
		color: #00A8EA;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		background-image: url('@/static/images/questionblock.png');
		height: 260rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
		padding-top: 46rpx;
	}
	
	.question-label{
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #00A8EA;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left: 62rpx;
	}
	
	.question-panel{
		height: 190rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: rebeccapurple; */
	}
	
	.question-content{
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: 400;
		font-size: 32rpx;
		color: #00A8EA;
		line-height: 44rpx;
		text-align: justify;
		font-style: normal;
		text-transform: none;
		padding: 64rpx;
		/* margin-left: 64rpx; */
	}

	.select-list {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.select-item {
		margin-top: 16rpx;
		width: 100%;
		height: 115rpx;
		background: linear-gradient( 180deg, #F7FBFE 0%, #CFEFFB 100%);
		/* border-radius: 51rpx 51rpx 51rpx 51rpx; */
		/* border: 2rpx solid #DBFFFF; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-image: url("@/static/images/selectitem.png");
		background-size: cover;
	}
	
	.select-item-active {
		margin-top: 16rpx;
		width: 100%;
		height: 115rpx;
		background: linear-gradient( 180deg, #F7FBFE 0%, #CFEFFB 100%);
		/* border-radius: 51rpx 51rpx 51rpx 51rpx; */
		/* border: 2rpx solid #DBFFFF; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-image: url("@/static/images/selectitem2.png");
		background-size: cover;
	}
	
	.item-answer{
		font-weight: 400;
		font-size: 40rpx;
		color: #FFFFFF;
		line-height: 28rpx;
		text-align: justify;
		font-style: normal;
		text-transform: none;
		margin-left: 38rpx;
		margin-bottom: 12rpx;
	}
	
	.item-content{
		width: 100%;
		margin-left: 50rpx;
		margin-right: 30rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		display:flex;
		justify-content: center;
	}
	
	.bottom{
		height: 180rpx;
		background: #F7FBFE;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 140rpx;
		padding-right: 140rpx;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
	}
	
	.button{
		background-image: url('@/static/images/couponbutton.png');
		background-repeat: no-repeat;
		background-size: cover;
		width: 470rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
	}
	
</style>