<template>
	<view class='investigation'>
		
		<view class="investiga-box" v-if='loading==true'>
			<!-- 活动还没开始  -->
			<template v-if="surveyData.isEnd==0">
				<view class="fulfil">
					<image
					mode='widthFix'
					style="width: 100px;margin: 50px 0;height: auto;"
					 src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/huodongweikaishi.png"></image>
				</view>
				<view class="fulfil-text">
					亲您来早了 活动还未开始
				</view>
				<view class="fulfil-text-f" >活动时间</view>
				<view class="fulfil-text-f" >
					{{surveyData.StartDate.split(' ')[0].replace(/-/g,"/")}} - {{surveyData.EndDate.split(' ')[0].replace(/-/g,"/")}}
				</view>
				
				<view class="btn" >
					<view class="btntext" :style="{'background':mainColor}" @click="goindex()">
						返回首页
					</view>
				</view>
			</template>
				<!-- 活动结束 -->
			<template v-if="surveyData.isEnd==2">
				<view class="fulfil">
					<image
					mode='widthFix'
					style="width: 100px;margin: 50px 0;height: auto"
					 src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/huodongjieshu.png"></image>
				</view>
				<view class="fulfil-text">
					活动已结束,期待您下次的参与
				</view>
				<view class="btn" >
					<view class="btntext" :style="{'background':mainColor}" @click="goindex()">
						返回首页
					</view>
				</view>
			</template>
			<!-- 进行中 填过 -->
			<template v-if="surveyData.isEnd==1&& surveyData.FillInNum==1">
				<view class="fulfil">
					<image
					mode='widthFix'
					style="width: 100px;margin: 50px 0;height: auto"
					 src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/chenggong.png"></image>
				</view>
				<view class="fulfil-text">
					感谢您的参与问卷调查<text v-if="surveyData.Surplus!=0">,我们为您准备了奖品，快去领取吧。</text>
				</view>
				<view class="btn" v-if="surveyData.Surplus!=0">
					<view class="btntext" :style="{'background':mainColor}" @click="receive()">
						快去领取
					</view>
				</view>
				<view class="btn" v-if="surveyData.Surplus==0">
					<view class="btntext" :style="{'background':mainColor}" @click="goindex()">
						返回首页
					</view>
				</view>
				
			</template>
			<!-- 进行中 没填 -->
			<template v-if="surveyData.isEnd==1 && surveyData.FillInNum==0">
				<div class='title' >{{surveyData.Title}}</div>
				<view class="investiga-info">
					<div>活动说明：{{surveyData.Description}}</div>
					<div>活动时间：{{surveyData.StartDate.split(' ')[0].replace(/-/g,"/")}} - {{surveyData.EndDate.split(' ')[0].replace(/-/g,"/")}}</div>
				</view>
				<!-- 用户模块 -->
				<view v-if="surveyData.isEnd==1&& usershow==true" >
					<div class='title' >您的信息</div>
					<view class="cont" v-for="(item,index) in surveyData.BaseList" :key='index'>
						<view class="row" v-if='item.SurveyType==4'>
							<view>{{index+1}}、{{item.Title}}<text class='starsx' v-if="item.IsRequired==1">*</text></view>
							<view class="rowright" >
								<input type="text" v-model="item.TextContent">
							</view>
						</view>
						<view v-if='item.SurveyType==1 || item.SurveyType==2|| item.SurveyType==3'>
							<view>{{index+1}}、{{item.Title}} 
								<text v-if="item.SurveyType==2|| item.SurveyType==3">({{item.SurveyTypeStr}})</text> 
								<text class='starsx' v-if="item.IsRequired==1">*</text>
							</view>
							<view class="rowpfright" v-if='item.SurveyType==1'>
								<text class="ratestyle" style="margin-right: 10px;margin-left: 0;">评分</text>
								<u-rate :current="item.ScoreNum" :active-color="mainColor" inactive-color="#b2b2b2" active-icon="star"
								 inactive-icon="star-o" size="40" @change='score(item.FormType,index,$event)'></u-rate>	
								 <text class="ratestyle" v-if="item.ScoreNum==5">非常满意</text>
								 <text class="ratestyle" v-if="item.ScoreNum==4">满意</text>
								 <text class="ratestyle" v-if="item.ScoreNum==3">感觉一般</text>
								 <text class="ratestyle" v-if="item.ScoreNum==2">不满意</text>
								 <text class="ratestyle" v-if="item.ScoreNum==1">非常不满意</text>
							</view>
							<view style="margin: 12px 0;" v-if='item.SurveyType==2|| item.SurveyType==3'>
								<u-checkbox-group size='30' :active-color='mainColor'>
									<u-checkbox 
										style='width: 100%;'
										shape="circle"
										@change="checkboxChange(item.FormType,item.SurveyType,index,y,$event)" 
										v-model="x.IsCheck==0?false:true" 
										v-for="(x, y) in item.SurveyOptionsList" :key="y" 
										:name="x.OptionsName"
									>{{x.OptionsName}}
									</u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
					</view>
				</view>
				<!-- 问卷模块 -->
				<view v-if="surveyData.isEnd==1&& usershow==false" >
					<div class='title' >问卷信息</div>
					<view class="cont" v-for="(item,index) in surveyData.SurveyList" :key='index'>
						<view >
							<view>{{index+1}}、{{item.Title}}
								<text v-if="item.SurveyType==2|| item.SurveyType==3">({{item.SurveyTypeStr}})</text>
								<text class='starsx' v-if="item.IsRequired==1">*</text>
							</view>
							<view class="wjright" v-if='item.SurveyType==4'>
								 <textarea v-model="item.TextContent" placeholder="请输入" style="width: 100%;height: 100%;"/>
							</view>
							<view class="rowpfright" v-if='item.SurveyType==1'>
								<text class="ratestyle" style="margin-right: 10px;margin-left: 0;">评分</text>
								<u-rate :current="item.ScoreNum" :active-color="mainColor" inactive-color="#b2b2b2" active-icon="star"
								 inactive-icon="star-o" size="40" @change='score(item.FormType,index,$event)'></u-rate>	
								 <text class="ratestyle" v-if="item.ScoreNum==5">非常满意</text>
								 <text class="ratestyle" v-if="item.ScoreNum==4">满意</text>
								 <text class="ratestyle" v-if="item.ScoreNum==3">感觉一般</text>
								 <text class="ratestyle" v-if="item.ScoreNum==2">不满意</text>
								 <text class="ratestyle" v-if="item.ScoreNum==1">非常不满意</text>
							</view>
							<view style="margin: 12px 0;" v-if='item.SurveyType==2|| item.SurveyType==3'>
								<u-checkbox-group size='30' :active-color='mainColor'>
									<u-checkbox 
										shape="circle"
										style='width: 100%;'
										@change="checkboxChange(item.FormType,item.SurveyType,index,y,$event)" 
										v-model="x.IsCheck==0?false:true" 
										v-for="(x, y) in item.SurveyOptionsList" :key="y" 
										:name="x.OptionsName"
									>{{x.OptionsName}}
									</u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
					</view>
				</view>
				<view class="btn" v-if="usershow==true">
					<view class="btntext" :style="{'background':mainColor}" @click="tiinfo(1)">
						开始填写问卷调查
					</view>
				</view>
				<view class="btn" v-if="usershow==false" style="justify-content: space-around;">
					<view class="btntext2"  @click="tiinfo2()">
						返回
					</view>
					<view class="btntext" :style="{'background':mainColor}" @click="tiinfo(2)">
						提交
					</view>
				</view>
			</template>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<template v-if="loading==false && oneshow==true" >
			<view class="fulfil">
				<image
				mode='widthFix'
				style="width: 100px;margin: 50px 0;height: auto"
				 src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/huodongweikaishi.png"></image>
			</view>
			<view class="fulfil-text">
				亲您来早了 活动还未开始
			</view>
			<view class="btn" >
				<view class="btntext" :style="{'background':mainColor}" @click="goindex()">
					返回首页
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import auth from '../../components/auth/index.vue';
	export default{
		components: {
			
			auth
		},
		data(){
			return{
				loading:false,
				ID:0,
				surveyData:{},
				mainColor: "",
				usershow:true,
				showAuth: false,
				oneshow:false,
				mall_UserInfo:{}
			}
		},
		onLoad(options){
			this.mainColor = this.$uiConfig.mainColor;
			uni.setNavigationBarTitle({
			  title: '意见调查表',
			});
			this.mall_UserInfo = uni.getStorageSync("mall_UserInfo");
			if (!this.mall_UserInfo) {
				this.showAuth = true;
			}else if(options && options.ID){
				this.ID = options.ID;
				this.init()
			}
		},
		methods:{
			init(){
				setTimeout(()=>{
					this.oneshow=true;//判断留一下
				},2000)
				
				this.request2({
						url: '/api/AppletEducation/GetSurveyShowList',
						data: {ActivitySurveyId:this.ID}
					},
					res => {
						this.loading = true;
						if (res.resultCode == 1) {
							this.surveyData = res.data;
							if(this.surveyData.BaseList.length==0){//如果有用户 先填写用户
								this.usershow=false;
							}
						}
						uni.hideNavigationBarLoading();
					}
				);
			},
			checkboxChange(FormType,SurveyType,index,y,val){
				
				if(FormType==1){//是用户信息的时候
					let bigBox = this.surveyData.BaseList[index].SurveyOptionsList
					if(val.value==false){//选择的时候
						bigBox[y].IsCheck=1;
						if(SurveyType==2){
							bigBox.forEach(x=>{
								if(x.OptionsName!=val.name){
									x.IsCheck=0
								}
							})
						}
					}else{//取消的时候
						bigBox[y].IsCheck=0;
					}
					
				}else{
					let bigBox = this.surveyData.SurveyList[index].SurveyOptionsList
					if(val.value==false){//选择的时候
						bigBox[y].IsCheck=1;
						if(SurveyType==2){
							bigBox.forEach(x=>{
								if(x.OptionsName!=val.name){
									x.IsCheck=0
								}
							})
						}
					}else{//取消的时候
						bigBox[y].IsCheck=0;
					}
				}
			},
			score(FormType,index,val){
				if(FormType==1){
					
					this.surveyData.BaseList[index].ScoreNum = val
				}else{
					this.surveyData.SurveyList[index].ScoreNum = val
				}
			},
			tiinfo2(){
				this.usershow=true;
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300
				});
			},
			tiinfo(type){//切换到问卷调查并且判读填写内容
			let data = []
			if(type==1){
				data = this.surveyData.BaseList
			}else{
				data = this.surveyData.SurveyList
			}
			
				for(let i=0;i<data.length;i++){
					let item = data[i]
					
					if(item.SurveyType==4 && item.IsRequired==1 && item.TextContent==''){//文本验证
						uni.showToast({
							title:'请填写'+item.Title,
							icon: "none"
						});
						return
					}
					if(item.SurveyType==1 && item.IsRequired==1 && item.ScoreNum==0){//打分
						uni.showToast({
							title:'请对'+item.Title+'打分',
							icon: "none"
						});
						return
					}
					if((item.SurveyType==2|| item.SurveyType==3) && item.IsRequired==1 ){//单选和多选
						let show=true;
						item.SurveyOptionsList.forEach(x=>{
							if(x.IsCheck==1){
								show=false
							}
						})
						if(show==true){
							uni.showToast({
								title:'请选择'+item.Title,
								icon: "none"
							});
							return
						}
					}
				};
				// 用户验证过了打开问卷调查
				this.usershow=false;
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300
				});
				if(type==2){//提交问卷
					let msg = []
					msg = this.surveyData.BaseList.concat(this.surveyData.SurveyList)
				
					this.request2({
							url: '/api/AppletEducation/SetGuestSurvey',
							data: msg
						},
						res => {
							if (res.resultCode == 1) {
								uni.showToast({
									title:'提交成功',
									icon: "none"
								});
								this.init()
							}
							
						}
					);
				}
				
			},
			receive(){//领取
				let that = this;
				if(that.surveyData.PrizeType==2){//站外
					let mall = uni.getStorageSync("basedata")?uni.getStorageSync("basedata").mall:{};
					uni.navigateToMiniProgram({
					  appId: mall.setting.small_app_id,//要跳转小程序appid
					  path: that.surveyData.PrizeAddress,
					  extraData: {
					    'data1': 'test'
					  },
					  success(res) {
					    // 打开成功
					  }
					})
				}else{
					uni.navigateTo({
						url: that.surveyData.PrizeAddress 
					})
				}
			},
			goindex(){
				uni.redirectTo({ url: "/pages/index/index" });
			},
			reloadUserinfo() {
				this.init()
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack();
			},
		}
	}
</script>

<style>
	.investigation{
		height: 100%;
		background: #FFF;
		font-family: aa;
	}
	.investigation .investiga-box{
		margin: 15px;
	}
	.investigation .investiga-info{
		border-radius: 6px;
		background: #FAF8F9;
		padding: 10px;
		margin-top: 15px;
		font-size: 13px;
		line-height: 22px;
	}
	.investigation .title{
		font-size: 18px;
		font-weight: bold;
		margin: 15px 0;
	}
	.investigation .cont{
		width: 100%;
		
	}
	.investigation .cont .row{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 50px;
	}
	.investigation .cont .wjright{
		width: 100%;
		background: #FAF8F9;
		padding: 10px;
		height: 90px;
		margin: 12px 0;
		overflow-y: auto;
		font-size: 13px;
		line-height: 20px;
	}
	.investigation .rowright{
		width: 1;
		flex: 1;
		margin-left: 15px;
		height: 25px;
		border-bottom: 1px solid #E2E2E2;
	}
	.investigation .rowpfright{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 13px 0;
		
		
	}
	.investigation .ratestyle{
		font-size: 12px;
		margin-left: 5px;
	}
	.investigation .btn{
		width: 100%;
		height: 70px;
		margin-top: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.investigation .btntext{
		width: 50%;
		height: 40px;
		font-size: 14px;
		color: #FFF;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.investigation .btntext2{
		width: 30%;
		height: 40px;
		font-size: 14px;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		border:1px solid #888888
	}
	.investigation .starsx{
		color: #ff4544;
		margin-left: 2px;
	}
	.investigation .u-checkbox{
		margin-bottom: 5px;
	}
	.investigation .fulfil{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.investigation .fulfil-text{
		font-size: 16px;
		text-align: center;
		line-height: 30px;
		padding: 0 20px;
	}
	.investigation .fulfil-text-f{
		font-size: 13px;color: #888888;text-align: center;
		margin-top: 10px;
	}
</style>
