<template>
	<view class="login_box flexCC">
		<image src="../../static/imgs/shop/logo_1.png" class="logo"></image>
		<view class="login_inp">
			<view class="inp_item flexS">
				<text class="iconfont iconshouji"></text>
				<input type="text" placeholder="请输入手机号" placeholder-class="place" v-model="mobile">
			</view>
			<view class="inp_item inp_sms flexS" v-if="isPhone">
				<text class="iconfont iconduanxinyingxiao"></text>
				<input type="text" placeholder="请输入验证码" placeholder-class="place" v-model="verify_code">
				<view maxlength="6" @click.stop="sendCode()">{{ countDown ? `重新获取(${countDown}s)` : '获取验证码' }}</view>
			</view>
			<view class="inp_item flexS" v-else>
				<text class="iconfont iconmima"></text>
				<input type="text" placeholder="请输入密码" placeholder-class="place" v-model="password">
			</view>

		</view>
		<view class="sub_btn" @click="loginIn">立即登陆</view>
		<view class="aggree flexS">
			<view class="check_icon" @click="isChecked=!isChecked">
				<text class="iconfont iconxuanzhong" v-if="isChecked"></text>
				<text class="iconfont iconweixuanzhong" v-else></text>
			</view>
			<text>我已阅读并同意</text>
			<navigator url="../../pagesA/pages/user-agreement/user-agreement" class="basecolor">《大卫博士会员隐私协议》</navigator>
		</view>
		<!-- <view class="login_way">
			<view class="text">
				<text class="line"></text>
				<view>{{isPhone?'手机验证码登陆':'账号密码登录'}}</view>
				<text class="line"></text>
			</view>
			<view class="icon_box flexC" @click="isPhone =!isPhone">
				<text class="iconfont iconshouji" v-if="isPhone"></text>
				<text class="iconfont iconmima" v-else></text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		wxLogin,
		phoneLogin,
		sendCode
	} from '../../apis/login.js'
	export default {
		data() {
			return {
				isChecked: false,
				mobile: '', //手机号
				password: '', //密码
				verify_code: '', //短信验证码
				countDown: 0, //发送手机验证码倒计时
				isEdit: false, //是否禁止输入手机号
				isSend: true, //是否发送
				isPhone: false, // false 账号密码登录  true 手机号验证码登陆
				timer: null //定时器
			}
		},
		methods: {
			loginIn() {
				if (!this.mobile) {
					uni.showModal({
						content: '请输入手机号',
						showCancel: false
					})
					return
				}
				if (!this.isPhone && !this.password) {
					uni.showModal({
						content: '请输入密码',
						showCancel: false
					})
					return
				}
				// if (this.isPhone && !this.verify_code) {
				// 	uni.showModal({
				// 		content: '请输入短信验证码',
				// 		showCancel: false
				// 	})
				// }
				if(!this.isChecked){
					uni.showModal({
						content: '请先阅读并勾选隐私协议',
						showCancel: false
					})
					return
				}
				let data = this.isPhone ? {
					mobile: this.mobile,
					verify_code: this.verify_code
				} : {
					mobile: this.mobile,
					password: this.password
				};
				uni.showLoading({
					title: '登陆中...'
				})
				uni.login({
					success: ({
						code
					}) => {
						phoneLogin(data).then(res => {
							if (res.code == 200) {
								uni.setStorageSync('token', res.data.token)
								uni.redirectTo({
									url: '../index/index'
								})
							} else {
								uni.showModal({
									content: res.message || '登陆失败',
									showCancel: false
								})
							}
							uni.hideLoading();
						}).catch(err => {
							uni.hideLoading()
						})
					}
				})

			},
			/*发送手机验证码*/
			sendCode() {
				let _this = this;
				if (_this.countDown) {
					uni.showModal({
						content: '验证码已发送，请稍后重试',
						showCancel: false
					});
					return false;
				}
				if (!_this.mobile || _this.mobile.length != 11) {
					uni.showModal({
						content: '手机号格式不正确',
						showCancel: false
					});
					return false;
				}
				sendCode({
						mobile: _this.mobile
					})
					.then(res => {
						if (res.code == 200) {
							_this.isEdit = true; //禁止编辑手机号
							uni.showModal({
								content: '验证码发送成功',
								showCancel: false
							});
							_this.countDown = 60;
							_this.timer = setInterval(() => {
								_this.countDown--;
								if (!_this.countDown) {
									_this.countDown = 0;
									clearInterval(_this.timer);
								}
							}, 1000);
						} else {
							this.countDown = 0;
							clearInterval(this.timer);
							this.isEdit = false; //可以编辑手机号
							uni.showModal({
								content: res.msg || '获取验证码失败',
								showCancel: false
							});
							return false;
						}
					})
					.finally(() => {
						this.isEdit = false; //可以编辑手机号
					});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.login_box {
		width: 690rpx;
		margin: 0 auto;

		.logo {
			width: 660rpx;
			height: 100rpx;
			margin-top: 40rpx;
		}

		.login_inp {
			margin-top: 40rpx;

			.inp_item {
				width: 630rpx;
				height: 104rpx;
				background: #F8F8F8;
				border-radius: 52rpx;
				padding-left: 30rpx;
				box-sizing: border-box;
				margin-top: 40rpx;

				.iconfont {
					font-size: 50rpx;
					color: #818694;
					margin-right: 15rpx;
				}

				input {
					width: 85%;
					height: 100%;
					font-size: 30rpx;
				}

				.place {
					font-size: 30rpx;
					color: #999;
				}
			}

			.inp_sms {
				input {
					width: 55%;
				}

				view {
					padding-left: 15rpx;
					position: relative;
					text-align: center;
				}

				view::before {
					display: block;
					content: '';
					width: 2rpx;
					height: 50rpx;
					background: #999;
					position: absolute;
					top: -4rpx;
					left: 0;
				}
			}
		}

		.sub_btn {
			width: 630rpx;
			margin-top: 80rpx;
		}

		.aggree {
			margin-top: 30rpx;

			.basecolor {
				color: $base-color;
			}

			.check_icon {
				margin-right: 10rpx;
			}
		}

		.login_way {
			@include flex(column);
			margin-top: 48rpx;
			width: 100%;
			box-sizing: border-box;

			.text {
				@include flex();
				width: 100%;
				height: 26rpx;
				justify-content: space-between;

				text {
					height: 3rpx;
					width: 200rpx;
					font-size: 22rpx;
					background: #b2b2b2;
				}

				veiw {
					font-size: 22px;
					color: #b2b2b2;
				}
			}

			.icon_box {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				border: 4rpx solid #818694;
				margin-top: 30rpx;

				.iconfont {
					font-size: 50rpx;
					color: #818694;
				}
			}


		}
	}
</style>