<template>
	<view class="index">
		<view class="index-top">
			登录
		</view>
		<view class="index-area">
			<navigator url="../Buy_soap_tape/phone-area" class="phone-area flexB">
				<view class="flexS">
					<view class="title">
						<text class="text">国家/地区</text>
						<text class="star">*</text>
					</view>
					<text class="area">{{areaName}}（{{area_code}}）</text>
				</view>
				<text class="icon cuIcon-right"></text>
			</navigator>
		</view>
		<view class="index-input index-phone">
			<input type="text" class="tel-input" v-model="phone" placeholder="请输入手机号">
		</view>
		<view class="index-input index-yanzheng">
			<input type="text" class="yzm-input" v-model="verify_code" maxlength="6" placeholder="输入6位验证码">
			<view class="shu" />
			<text @tap="$noMultipleClicks(getYZM)" :style="{color: countDown ? '#333' : '#FB231F'}">{{countDown ? `${countDown}s` : '获取验证码'}}</text>
		</view>
		<view class="index-deal">
			<checkbox :checked="checked" @click="checked = !checked" color="#FF232C" style="transform:scale(0.6)"/><text>我已阅读并同意</text>
			<text class="red" @click="agreement">《大卫博士会员隐私协议》</text>
		</view>
		<view class="index-btn" @click="$noMultipleClicks(submit)">
			立即登录
		</view>
	</view>
</template>

<script>
	import { getsendCode, verifyLogin } from '@/api/index.js'
	import areaList from '@/common/util/phone-area.js'
	export default {
		data() {
			return {
				returnInfo: {},
				openid: '',
				URL: '',
				areaName: '中国大陆', // 手机号地区名称
				isMatch: /^[1][3-9]\d{9}$/, //手机号验证
				codeList: areaList, //手机号区域选择
				area_code: '+86',
				phone: '',  //手机号
				verify_code: '',  //验证码
				checked: false,
				noClick:true,
				countDown: 0,  //验证码已发送倒计时
			}
		},
		watch: {
			verify (n) {  //监听验证码输入，输入结束后且通过验证，收起手机软键盘
				if (n.match(/^\d{6}$/) && this.tel.match(/^1\d{10}$/)) {
					uni.hideKeyboard()
				}
			}
		},
		onLoad(option) {
			if (option.type) {
				this.URL = option.type == 'index' ?
				 '../index/index' : option.type == 'return' ?
				 `../CustomerReturnPay/returnedInfo?id=${option.id}&verify=${option.verify}` :
				 `../Buy_soap_tape/goods?type=${option.type == 1 ? 'soap' : 'tape'}`
			}
			this.openid = option.openid
			uni.$on('CHOOSEPHONECODE', (name, code, reg, phoneReg) => {
				// 监听 chooseArea 事件更新
				this.areaName = name; // 修改选择的手机号地区名称
				this.area_code = code // 修改选择的手机号地区代码
				this.isMatch = phoneReg
			})
			if (option.data) {
				this.buyForm = JSON.parse(decodeURIComponent(option.data))
				if (this.area_code) {
					let index = this.area_code.indexOf('+')
					let code = this.area_code.substring(index + 1)
					this.codeList[0].list.map(i => {
						if (i.code === Number(code)) {
							this.areaName = i.name
							this.isMatch = i.phoneReg
						}
					})
				}
			}
		},
		methods: {
			//获取code值方法
			getUrlParam(name) {
			    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); //构造一个含有目标参数的正则表达式对象
			    var r = window.location.search.substr(1).match(reg); //匹配目标参数
			    if (r != null) return decodeURIComponent(r[2]);
			    // return null; //返回参数值
			    return ''; //返回参数值
			},
			agreement() {
				uni.navigateTo({ url: './user-agreement' })
			},
			getYZM () {  //点击发送验证码
				if (!this.phone) {
					uni.toast('手机号码不能为空')
					return
				}
				if (this.isMatch && !this.phone.match(this.isMatch)) {
					uni.toast('手机号所属与区号不一致')
					return
				}
				if (this.countDown) {  //如果正在倒计时，表示验证码已发送
					uni.showModal({
						content:"验证码已发送,请稍后重试",
						showCancel:false
					})
				} else {  //发送网络请求
					uni.showLoading({ title: '加载中', mask: true })
					getsendCode({ phone: this.phone, area_code: this.area_code }).then(res => {
						uni.hideLoading()
						if (res.code == 200) {  //验证码发送成功，开始倒计时
							uni.toast('验证码发送成功')
							this.countDown = 120
							this.timer = setInterval(() => {
								this.countDown --
								if (!this.countDown) {
									this.countDown = 0
									clearInterval(this.timer)
								}
							}, 1111)
						} else {
							uni.showModal({
								title: '提示',
								content: res.msg || '获取失败',
								showCancel: false
							})
						}
					}).catch(err => {
						uni.showModal({
							title: '提示',
							content: err,
							showCancel: false
						})
					})
				}
			},
			async submit () {  //点击提交
				if (!this.phone) {
					uni.toast('请输入手机号')
					return false
				}
				if (this.isMatch && !this.phone.match(this.isMatch)) {
					uni.toast('手机号所属与区号不一致')
					return
				}
				if (!this.verify_code) {
					uni.toast('请输入验证码')
					return false
				}
				if (!this.checked) {
					uni.toast('请勾选隐私协议')
					return false
				}
				uni.showLoading({ title: '加载中', mask: true })
				verifyLogin({ phone: this.phone, verify_code: this.verify_code, openid: this.openid }).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						uni.toast('登录成功')
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('userInfo', res.data.user)
						if (this.URL == '../index/index') {
							uni.switchTab({
								url: this.URL
							})
						} else {
							uni.reLaunch({
								url: this.URL
							})
						}
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg || '登录失败',
							showCancel: false
						})
						this.countDown = 0
						clearInterval(this.timer)
					}
				}).catch(err => {
					uni.showModal({
						title: '提示',
						content: err,
						showCancel: false
					})
					this.countDown = 0
					clearInterval(this.timer)
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.index {
		padding: 74rpx 68rpx;
		&-area {
			margin-top: 40rpx;
			min-height: 128rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.phone-area {
				width: 100%;
				
				.area {
					color: #049E56;
					font-weight: bold;
					margin-left: 16rpx;
				}
				
				.icon {
					font-size: 40rpx;
					color: #999;
				}
				
			}
			.title {
				font-size: 34rpx;
				font-weight: bold;
			
				.star {
					color: $base-color;
					margin-left: 10rpx;
					font-size: 40rpx;
				}
			}
		}
		&-top {
			color: #333333;
			font-size: 60rpx;
			font-weight: bold;
		}
		&-title {
			font-size: 32rpx;
			color: #333333;
			margin-top: 15rpx;
		}
		&-input {
			// width: 606rpx;
			// height: 104rpx;
			padding: 30rpx 40rpx;
			background: #F8F8F8;
			border-radius: 8px;
		}
		&-yanzheng {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;
			.shu {
				width: 0rpx;
				height: 40rpx;
				border: 2rpx solid #CCCCCC;
			}
			text {
				font-size: 28rpx;
				// font-weight: bold;
			}
		}
		&-deal {
			margin: 160rpx 0 60rpx 0;
			font-size: 24rpx;
			.red {
				color: #FF232C;
			}
		}
		&-btn {
			color: #fff;
			font-size: 32rpx;
			width: 590rpx;
			line-height: 104rpx;
			text-align: center;
			background: linear-gradient(93deg, #FF232C 0%, #FF571B 100%);
			border-radius: 52rpx;
			margin: 0 auto;
		}
		&-bottom {
			margin-top: 160rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333333;
		}
	}
</style>
