<template>
	<view class="content">
		<u-overlay :show="show" class="overlay">
			<view class="slot-content">
				<view class="title"><text>登陆账号</text></view>
				<u--form labelPosition="left" :model="form" ref="uForm">
					<u-form-item prop="phone" border="none">
						<u-input placeholder="请输入手机号" class="login-input" font-size="28rpx" color="#71C8E8"
							inputAlign="left" border="none" shape="circle" v-model="form.phone">
							<template slot="prefix">
								<div class="prespace"></div>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="form.code" border="none">
						<u-input placeholder="请输入验证码" class="login-input" font-size="28rpx" color="#71C8E8"
							inputAlign="left" border="none" shape="circle" v-model="form.code">
							<template slot="prefix">
								<div class="prespace"></div>
							</template>
				 			<template slot="suffix">
								<view class="login-code" @click="getcode">
									<text>{{codemsg}}</text>
								</view>
							</template>
						</u-input>
					</u-form-item>
				</u--form>
				<u-button class="login-btn" type="primary" shape="circle" size="middle" color="#0BAFEA" text="登陆"
					@click="login"></u-button>
			</view>
		</u-overlay>
		<view class="bottomcontent">
<!-- 			<u-button type="primary" shape="circle" size="large" color="#F95E6E" text="去兑换立减金"
				@click="navigateToCoupon"></u-button> -->
		</view>
	</view>
</template>

<script>
import api from '@/api/api.js'
import {authState} from '@/util/auth.js'
import code from '@/uni_modules/uview-ui/libs/config/props/code.js'
import form from '@/uni_modules/uview-ui/libs/config/props/form.js'
import {store} from '@/store/coupon.js'
import {acstore} from '@/store/activities.js'
	export default {
		data() {
			return {
				show: false,
				iscode: false,
				codemsg: "获取验证码",
				form: {
					phone: "",
					code: "",
					activity_id: undefined
				},
				activityId:undefined,
			}
		},
		methods: {
			navigateToCoupon() {
				uni.navigateTo({
					url: '/pages/coupons/coupon/index'
				})
			},
			// navigateToShop:()=>{
			// 	uni.switchTab({
			// 		url:'/pages/simpleshop/index/index'
			// 	})
			// },
			navigateToHinge:()=>{
				uni.navigateTo({
					url:'/pages/coupons/hinge/index'
				})
			},
			login() {
				const validate = this.checkSubmit()
				if(validate =='success'){
					api.login(this.form).then((res)=>{
						if(res.data.code == 200){
							authState.login({
								userId:res.data.data.id,
								token:res.data.data.front_token
							})
							uni.showToast({
								title: "登录成功",
								icon: "none",
							})
							store.dispatch('getanswer').then((ares)=>{
								if(ares.answer.length>0){
									api.answerFinished({
										id:this.activityId,
										answer:ares.answer
									}).then((res)=>{
										if(res.data.code == 200){
											store.commit('setanswer',[])
										}else{
											// uni.showToast({
											// 	title: res.data.message,
											// 	icon: "none"
											// })
										}
									})	
								}
							})
							this.navigateToHinge()
							this.show = false
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none"
							})
						}
					})
				}else{
					uni.showToast({
						title: validate,
						icon: "none"
					})
				}
			},

			getcode() {
				const validate = this.checkPhoneNum(this.form.phone)
				if(validate == 'success'){
					if (this.iscode) {
						return
					}
					this.iscode = true
					this.getphonecode()
				}else{
					uni.showToast({
						title: validate,
						icon: "none"
					})
				}
			},
			
			getphonecode() {
				let that = this
				uni.showLoading({
					title: "发送中..."
				})

				api.getcodes({
					phone: that.form.phone
				}).then((res) => {
					if (res.data.code == '200') {
						uni.showToast({
							title: "发送成功",
							icon: "success",
							duration: 800,
						})

						that.codemsg = 60;
						that.interval = setInterval(() => {
							that.codemsg -= 1;
							if (that.codemsg == 0) {
								clearInterval(that.interval);
								that.iscode = false
								that.codemsg = "重新发送";
							}
						}, 1000);

					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			
			checkPhoneNum(value) {
				if (value == undefined || value == '' ) {
					return '手机号不能为空'
				}
				var reg = /^1[3456789]\d{9}$/;
				if (reg.test(value)) {
					return 'success'
				} else {
					return '手机号码格式不正确'
				}
			},
			
			checkCode(value) {
				if (value == undefined || value == '') {
					return '验证码不能为空'
				}
				var reg = /^\d{6}$/;
				if (reg.test(value)) {
					return 'success'
				} else {
					return '验证码格式不正确'
				}
			},
			
			checkSubmit(){
				const cphone = this.checkPhoneNum(this.form.phone)
				if(cphone!='success')return cphone
				const ccode = this.checkCode(this.form.code)
				if(ccode != 'success')return ccode
				return 'success'
			}
		},
		onShow(){
			acstore.dispatch('getactivitId').then((res)=>{
				this.activityId =  parseInt(res.activitId)
				this.form.activity_id = parseInt(res.activitId)
			})
			if(!authState.isLogin()){
				this.show = true
			}else{
				this.show = false
				this.navigateToHinge()
			}
		}
		
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: end;
		height: 100%;
		background-image: url('@/static/images/couponindex.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		width: 100%;
	}

	.overlay {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.slot-content {
		margin: 0;
		width: 412rpx;
		background-image: url('@/static/images/loginwindow.png');
		background-repeat: no-repeat;
		background-size: contain;
		padding: 68rpx;
	}

	.title {
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: 400;
		font-size: 32rpx;
		color: #0BAFEA;
		line-height: 48rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-top: 100rpx;
	}

	.bottomcontent {
		width: 540rpx;
		padding-bottom: 114rpx;
	}

	.login-input {
		background-color: #EEFAFF;
		height: 72rpx;
	}


	.login-btn {
		margin-top: 18rpx;
	}

	.login-code {
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: 400;
		font-size: 24rpx;
		color: #0BAFEA;
		line-height: 48rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-right: 28rpx;
	}

	.prespace {
		width: 20rpx;
	}
</style>