<template>
	<view class="content">
		<view class="contentnav">欢迎您登录开票系统</view>
		<view class="top_box">
			<view class="top_box_one">
				<text class="top_box_one_text">手机号码</text>
				<input type="number" v-model="form.account" :adjust-position="false" placeholder="请输入手机号码" maxlength="-1" data-key="mobile" />
			</view>
			<view class="top_box_one">
				<text class="top_box_one_text">密码</text>
				<input type="mobile" v-model="form.password" :adjust-position="false" placeholder="请输入密码" maxlength="16" :password="!showPassword" />
				<view class="repeat" @click="display">
					<u-icon name="eye" v-if="showPassword"></u-icon>
					<u-icon v-else name="eye-off"></u-icon>
				</view>
			</view>
			<!-- <view class="top_box_one">
				<text class="top_box_one_text">验证码</text>
				<input type="mobile" v-model="form.captcha" placeholder="请输入短信验证码" maxlength="6" />
				<view class="repeats">
					<view v-if="showText == true"
						style="padding: 8rpx 16rpx 6rpx 16rpx;background: #288EFB;  border-radius: 15rpx;"
						@click="CodeRegister">{{ Recapture }}</view>
					<view v-else
						style="color: #ccc; background-color: #f9f9f9; padding: 8rpx 16rpx 6rpx 16rpx; border-radius: 15rpx;">
						{{ second }}s重新发送
					</view>
				</view>
			</view> -->
			<view class="toLogin" @click="userlogin">登录</view>
			<!--<view class="agreement flex-start">
				 	<u-checkbox-group><u-checkbox shape="circle" @change="radioChange"
						size="12"></u-checkbox></u-checkbox-group>
				<text>阅读并同意银收客</text>
				<view class="agreement-Item" @click="Privacy(1)">《用户协议》</view>
				及
				<view class="agreement-Item" @click="Privacy(2)">《隐私政策》</view> 
			</view>-->
			<view class="agreement" @click="clickpassword">忘记密码</view>
		</view>
		<view style="margin-top: 80rpx; text-align: center; color: #3088fd; position: fixed; bottom: 40rpx; left: 50%; transform: translate(-50%, -50%)" @click="quyonghu">
			我是用户
		</view>
	</view>
</template>

<script>
import Api from '@/common/js/api.js';
export default {
	data() {
		return {
			showPassword: false, //是否显示密码
			form: {
				account: '',
				password: '',
				captcha: ''
			},
			// 注册定时器   初始值
			second: 60,
			showText: true,
			Recapture: '发送验证码'
		};
	},
	async onLoad(e) {
		uni.login({
			provider: 'weixin',
			success: async (data) => {
				let openid = uni.cache.get('open_id');

				if (!openid) {
					let res = await Api.getminiuserinfo({
						code: data.code
					});
					uni.cache.set('open_id', res.data.openid);
				}

				await this.$onLaunched;
				if (e.userId) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					// this.onLoaduserId = e.userId
					uni.cache.set('Type', e.type);
					uni.cache.set('userId', e.userId);
					let token = await this.api.h5encryption({
						store_id: uni.cache.get('userId')
					});
					if (token.code == 1) {
						uni.cache.set('token', token.data.token);
						uni.cache.set('store_status', 1);
						uni.navigateTo({
							url: '/pages/index/index?restype=' + 1
						});
					}
				}
			}
		});
	},
	methods: {
		async CodeRegister() {
			//发起验证码
			if (this.form.account == null || this.form.account == '') {
				uni.showToast({
					title: '请输入电话号码',
					icon: 'none'
				});
				return false;
			}
			const res = await this.api.smssend({
				// post  手机验证码
				mobile: this.form.account,
				event: 'mobilelogin'
			});
			if (res) {
				uni.showToast({
					title: '验证码获取成功',
					icon: 'none'
				});
				// 定时器
				this.showText = false;
				this.Recapture = '重新获取';
				var interval = setInterval(() => {
					let times = --this.second;
					this.second = times < 10 ? '0' + times : times; //小于10秒补 0
				}, 1000);
				setTimeout(() => {
					clearInterval(interval);
					this.second = 60;
					this.showText = true;
				}, 60000);
			}
		},
		display() {
			// 切换图片显示隐藏
			this.showPassword = !this.showPassword;
		},
		quyonghu() {
			uni.reLaunch({
				url: '/pages/index/index?restype=' + 2
			});
			// uni.navigateTo({
			// 	url: '/pages/index/index?restype=' + 2
			// })
		},
		clickpassword() {
			uni.navigateTo({
				url: '/pages/login/password'
			});
		},
		async userlogin() {
			if (this.form.account == null || this.form.account == '') {
				uni.showToast({
					title: '请输入电话号码',
					icon: 'none'
				});
				return false;
			}
			if (this.form.password == null || this.form.password == '') {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return false;
			}
			// if (this.form.captcha == null || this.form.captcha == '') {
			// 	uni.showToast({
			// 		title: '请输入验证码',
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			let res = await this.api.userlogin({
				account: this.form.account,
				password: this.form.password,
				open_id: uni.cache.get('open_id')
			});
			uni.cache.set('userId', res.data.userinfo.store_id);
			uni.cache.set('logintoken', res.data.userinfo.token);
			uni.cache.set('store_status', res.data.store_status);
			uni.cache.set('userinfo', res.data.userinfo);
			uni.cache.set('Type', res.data.type);
			uni.cache.set('set_pwd', res.data.set_pwd);
			if (res.data.set_pwd == 1) {
				uni.navigateTo({
					url: '/pages/login/repairpassword'
				});
			} else {
				uni.reLaunch({
					url: '/pages/index/index?restype=' + 1
				});
			}
		}
	}
};
</script>

<style lang="scss">
.content {
	.contentnav {
		padding-left: 48rpx;
		padding-top: 200rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 56rpx;
		color: #333333;
	}

	.top_box {
		margin-top: 88rpx;
		z-index: 9;
		padding: 0 64rpx;
		box-sizing: border-box;
		width: 100%;
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #ffffff;
		border-radius: 40rpx 40rpx 0px 0px;

		.top_box_one {
			position: relative;
			width: 100%;
			margin-top: 64rpx;
			border-bottom: 6rpx solid #e5e5e5;

			.top_box_one_text {
				font-size: 36rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
			}

			.repeat {
				position: absolute;
				z-index: 99;
				bottom: 26rpx;
				right: 0;
				width: 25rpx;
				height: 17rpx;
			}

			.repeats {
				z-index: 99;
				position: absolute;
				bottom: 26rpx;
				right: 0;
				font-size: 24rpx;
				font-weight: 400;
				color: #ffffff;
				border-radius: 12rpx;
			}

			input {
				height: auto;
				padding: 18rpx 0 20rpx 0;
			}
		}

		.top_box_tow {
			width: 100%;

			text {
				margin-top: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
			}
		}

		.toLogin {
			width: 570rpx;
			margin-top: 112rpx;
			padding: 10rpx 0;
			text-align: center;
			background: #288efb;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #ffffff;
		}

		.agreement {
			text-align: right;
			width: 570rpx;
			margin-top: 14rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #7c8e97;

			.agreement-Item {
				color: #4ca1fc;
			}
		}
	}
}
</style>
