<template>
	<view class="container">
		<Navbar canBack></Navbar>
		<view class="auth-header">
			<view class="auth-logo">
				<u-image width="80px" height="80px" src="@/static/lpg-logo.png"></u-image>
			</view>
		</view>
		<view class="loginTitleCss flex flex-direction">
			<view class="text-xxl text-bold">
				<!-- 账号密码登录 -->
				{{accountTile || ""}}
			</view>
			<view class="margin-top-sm text-gray">
				{{accountTip || ""}}{{ formData.phone || ""}}
				<!-- 未注册手机号登录后自动生成账号 -->
			</view>
		</view>
		<view class="auth-box">
			<view class="margin-top-sm">
				<u-code-input v-model="formData.sms" adjustPosition :maxlength="6" mode="line"></u-code-input>
			</view>
			<view class="flex w100 justify-end">
				<view class="btn-group">
					<u-button class="auth-btn" shape="circle" :disabled="!formData.sms.length === 6"
						:style="{background:formData.sms.length === 6?'#EA5504':'#D5D8DF'}"
						@click="handleSubmit">{{btnText}}</u-button>
				</view>
			</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		sendSmsCode
	} from '@/api/auth.js'

	export default {
		data() {
			return {
				inputType: 'password',
				codeDisabled: false,
				currentMode: 0,
				codeTips: '',
				formData: {
					phone: "",
					sms: '',
					yhlx:'hy'
				},
				btnText: "登录",
				checkValue: [],
				accountTile: "请输入验证码",
				accountTip: "验证码已发送至",
				accountPlaceholder: "请输入手机号"
			}
		},
		onLoad(data) {
			if (data.mobile) {
				this.formData.phone = data.mobile;
			}
			if (data.mode) {
				this.currentMode = parseInt(data.mode);
				this.btnText = this.currentMode === 3 ? "下一步" : '登录';
			}
		},
		methods: {
			handleSubmit() {
				console.log("验证码登录", this.formData.sms);
				let that = this;
				if (this.formData.sms.length === 6) {
					if (this.currentMode === 3) {
						console.log("跳转忘记密码页");
						uni.navigateTo({
							url: `/pages/forgotPassword?account=${that.formData.phone}&sms=${that.formData.sms}`
						})
					} else {
						this.$store.dispatch('codeLogin', this.formData).then(res => {
							setTimeout(() => {
								uni.$u.toast('登录成功')
								uni.switchTab({
									url: '/pages/home/home'
								})
							}, 300)
						}).catch((e) => {
							console.log("登录失败", e);
							if (e.code === 500 && e.msg === '该手机号未注册') {
								let option = {
									 confirmText: "立即注册",
								}
								console.log("注册数据",that.formData);
								this.$modal.confirm('是否注册该账号？', '未注册',option).then(() => {
									this.$store.dispatch('Register', that.formData).then(res => {
										console.log("注册结果",res);
										uni.$u.toast('注册成功');
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/home/home'
											})
										},1000)
									})
								}).catch(() => {
									console.log("取消");
								});
							}else{
								uni.$u.toast(e.msg);
							}
						})
					}

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #fff;
		height: 100vh;
	}

	.auth-header {
		width: 100%;
		height: 200rpx;

		.auth-logo {
			margin: 40px 0 0 40px;
		}
	}

	.auth-box {
		margin: 0 40px;

		.btn-group {
			height: 100px;
			width: 120px;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.auth-btn {
				color: #fff;
				height: 90rpx;
				font-size: 32rpx;
			}
		}
	}

	.radioCss {
		margin-top: 2px;
	}

	.loginTitleCss {
		margin: 0 40px;
	}

	/deep/.u-form-item__body__right__message {
		margin-left: 0px !important;
	}
</style>