<template>
	<view class="body">
		<text>首次登录创建新帐号</text>
		<view class="input">
			<text>手机号</text>
			<input type="text" v-model="mobile" placeholder="请填写手机号" placeholder-style="color:#ACACAC;" />
		</view>
		<view class="input">
			<text>验证码</text>
			<input type="text" v-model="code" placeholder-style="color:#ACACAC;" placeholder="请填写手机验证码" />
			<text :class="'yzm '+yzm.class" @click="sendMobileCode">获取验证码 {{yzm.djs}}</text>
		</view>
		<button type="default" class="btn" @click="login">下一步</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				code: '',
				yzm: {
					class: '',
					djs: '',
					setIntervalId: 0
				},
				from: '/center'
			}
		},
		async onLoad(e) {
			if (e.from) this.from = e.from
		},
		methods: {
			async login() {
				if (this.mobile.length != 11) {
					uni.showToast({
						icon: "none",
						icon: 'error',
						title: "手机号有误",
					});
					return;
				}

				if (this.code.length != 6) {
					uni.showToast({
						icon: "none",
						icon: 'error',
						title: "验证码有误",
					});
					return;
				}

				const res = await uni.$u.request.graphql({
					name: 'ydn_sms_login',
					type: 'mutation',
					args: `mobile:"${this.mobile}",code:"${this.code}",type:"web"`
				})
				
				if (res.Error) {
					uni.showToast({
						title: res.Error,
						icon: 'error',
						duration: 2000
					});
					return
				}

				uni.redirectTo({
					url: decodeURIComponent(this.from)
				})
			},
			async sendMobileCode() {

				if (this.mobile.length != 11) {
					uni.showToast({
						icon: "none",
						icon: 'error',
						title: "手机号有误",
					});
					return;
				}

				var yzm = this.yzm
				if (yzm.class == 'disabled') {
					uni.showToast({
						title: '请稍后再试试',
						icon: 'error',
						duration: 2000
					});
					return
				}
				yzm.class = 'disabled'

				const res = await uni.$u.request.post({
					data: {
						query: `mutation{ydn_send_mobile_code(mobile:"${this.mobile}",type:7)}`
					}
				}).then(a => a.data.data.ydn_send_mobile_code);

				if (res.success == '1') {
					uni.showToast({
						title: '验证码发送成功',
						icon: 'success',
						duration: 2000
					});
				}

				yzm.setIntervalId = setInterval(() => {
					if (yzm.djs == '') yzm.djs = 60;
					else yzm.djs--
					if (yzm.djs == 0) {
						yzm.djs = ''
						yzm.class = ''
						clearInterval(yzm.setIntervalId)
						yzm.setIntervalId = 0
					}
				}, 999)

			}
		}
	}
</script>

<style>
	.body {
		font-family: Helvetica;
		font-weight: 400;
		font-size: 14px;
		color: #333333;
		padding: 20px;
		margin-top: 30px;
	}

	.input {
		display: flex;
		margin: 30px 0;
		padding: 5px 0;
		border-bottom: solid 1px #ACACAC;
	}

	.input input {
		margin-left: 20px;
		color: #909399;
	}

	.input .yzm {
		color: #4F6FD9;
	}

	.input .disabled {
		color: rgb(204, 204, 204) !important;
	}

	.btn {
		height: 44px;
		margin-top: 30px;
		background-color: #D23338;
		color: #FFFFFF;
	}
</style>