<template>
	<view class="phone-login">
		<view class="login-content">
			<view class="login-logo">
				<u-image src="/static/logo-s.png" width="380" height="246" class="logo"></u-image>
			</view>
			<u-form ref="uForm">
				<u-form-item>
					<u-input v-model="mobile" placeholder="请输入手机号" type="number" maxlength='11' />
				</u-form-item>
				<u-form-item>
					<u-input placeholder="请输入验证码" maxlength='4' type="number" v-model="code" />
					<u-button slot="right" class="yzmBtn" :custom-style="yzmBtn" shape="circle" :hair-line="false" size="mini"
						@click="checkMobile" :disabled="isDisabled">{{codeText}}</u-button>
				</u-form-item>
				<u-form-item class="form-btn" :border-bottom="false">
					<u-button :custom-style="submitBtn" type="warring" form-type="submit" shape="circle" :hair-line="false"
						@click="bindLogin">登录</u-button>
				</u-form-item>
			</u-form>
		</view>
 
		<view class="xieyi" @click="gotoXieyi()">
			登录即代表同意 <text>《用户协议》和《隐私政策》</text>
		</view>
		<!-- 图文验证码 -->
		<uni-popup @change="changeModal" ref="imageTxtPopup" type="center">
			<popup-con title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaVerify"></popup-con>
		</uni-popup>
	</view>
</template>

<script>
	import {
		code2Session,
		login,
		sendLoginVerifyCode
	} from '../../api/login.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import popupCon from '@/components/uni-popup/popup-con.vue'
	import {
		isvalidPhone
	} from '@/libs/validate.js'
	export default {
		components: {
			uniPopup,
			popupCon
		},
		data() {
			return {
				mobile: '', // 手机号码
				code: '', // 短信验证码
				popBtn: [], //  name为操作按钮名称，color为操作按钮颜色值
				changeImg: false, //  是否重新更换图形验证码
				randomCode: '', //  图片验证码随机码
				codeText: '获取验证码',
				getCodeing: false,
				totalTime: 60,
				yzmBtn: {
					background: "#ffffff"
				},
				submitBtn: {
					background: "#1283d4",
					marginTop: '15px',
					color: '#ffffff'
				},
				isDisabled: false // 倒计时按钮是否禁用
			}
		},
		computed: mapState(['forcedLogin']),
		mounted() {
			//微信平台登录
			//#ifdef MP-WEIXIN
			  this.$store.dispatch('wxLogin', 'weixin')
			//#endif
		},
		methods: {
			...mapMutations(['login']),
			// 获取验证码
			getCode() {
				let sid = null
				sid = setInterval(() => {
					if (this.totalTime > 0) {
						this.totalTime = this.totalTime - 1
						this.codeText = '已发送' + this.totalTime + 's'
						if (this.totalTime < 60) {
							this.isDisabled = true
						}
					} else {
						this.isDisabled = false
						clearInterval(sid)
						this.getCodeing = false
						this.codeText = '获取验证码'
						this.totalTime = 60
					}
				}, 1000)
			},
			// 验证手机
			checkMobile() {
				if (!this.getCodeing) {
					if (this.mobile) {
						if (!isvalidPhone(this.mobile)) {
							uni.showToast({
								title: '请输入正确的手机号码',
								icon: 'none'
							})
							return false
						} else {
							this.getCodeing = true
							this.retsetCode()
							//  图文验证码
							this.$refs.imageTxtPopup.open()
						}
					}
				}
			},
			changeModal(val) {
				if (val.show == false) {
					this.getCodeing = false
				}
			},
			//  验证图片验证码
			captchaVerify(code, nowRandomCode) {
				const _this = this
				let obj = {}
				obj.mobile = this.mobile
				obj.random = nowRandomCode
				obj.code = code
				obj.openid = this.$store.state.vuex_openid
				console.log(this.$store.state.vuex_openid)
				//  发送短信验证码
				sendLoginVerifyCode(obj).then(res => {
					console.log(JSON.stringify(res.data))
					if (res.status == 200) { //  验证码输入正确
						_this.randomCode = nowRandomCode //  图片验证码随机码
						//  关闭   图形验证码 弹框
						_this.$refs.imageTxtPopup.close()
						//  开启倒计时
						_this.getCode()
						uni.showToast({
							icon: 'none',
							title: '验证码发送成功'
						})
					} else { //  验证码输入错误
						_this.retsetCode()
						uni.showToast({
							icon: 'none',
							title: res.message,
							duration: 5000
						})
					}
				})
			},
			// 重新触发获取图片验证码
			retsetCode() {
				const _this = this
				_this.code = ''
				_this.randomCode = ''
				//  切换验证码重新校验
				_this.changeImg = false
				_this.$nextTick(function() {
					_this.changeImg = true
				})
			},
			// 登录
			bindLogin() {
				let mobile = this.mobile
				let openid = this.$store.state.vuex_openid
				let code = this.code
				let random = this.randomCode
				let data = {
					'mobile': mobile,
					'code': code,
					'openid': openid,
					'random': random
				}
				login(data).then(res => {
					console.log(res)
					if (res.status == 200) {
						this.toMain(res.data)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			toMain(data) {
				this.login(data);
				uni.reLaunch({
					url: '/pages/index/index',
				});
			},
			// 用户协议
			gotoXieyi(url) {
				uni.navigateTo({
					url: '/pages/xieyi/index?id=0'
				})
			},
		},
		watch: {
			mobile(val) {
				this.mobile = val
			}
		}
	}
</script>
<style lang="scss">
	.phone-login {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		padding: 0 125upx;

		.login-content {
			flex: 1;

			.login-logo {
				text-align: center;

				.logo {
					display: inline-block;
					margin: 200upx 0 100upx;
				}
			}
		}

		.xieyi {
			font-size: 24upx;
			text-align: center;
			padding-bottom: 60upx;

			text {
				color: #1283d4
			}
		}
	}
</style>
