<template>
	<view :animation="anidataauth" class="auth">
		<view class="swiper" :style="{transform: 'translateX(' + pg + 'vw)',height:height}">
			<view class="content">
				<view class="title">
					<ciy-gesture @toleft="gopg(1)" class="mid" style="letter-spacing: 1em;">{{lang('login.tabreg')}}</ciy-gesture>
					<view class="itm" @tap="gopg(1)">{{lang('login.tablogin')}}</view>
					<view class="itm" @tap="gopg(2)">{{lang('login.tabforget')}}</view>
				</view>
				<form @submit="submitreg">
					<view style="width:600rpx;margin:0.5em auto;">
						<view class="ciy-form">
							<label>{{lang('login.form_mobile')}}</label>
							<view>
								<ciy-input type="number" name="user" placeholder="请输入手机号"></ciy-input>
							</view>
						</view>
						<view class="ciy-form">
							<label>{{lang('login.form_setpass')}}</label>
							<view>
								<ciy-input name="pass" type="password" placeholder="请输入登录密码"></ciy-input>
							</view>
						</view>
						<view class="ciy-form">
							<label>{{lang('login.form_repass')}}</label>
							<view>
								<ciy-input name="pass2" type="password" placeholder="再次输入登录密码"></ciy-input>
							</view>
						</view>
						<view style="margin:1em 0;">
							<ciy-checkitem sq v-model="xieyi">
								已阅读并同意《
								<text @tap="gourl" :data-url="lang('login.xieyi')" style="color:#0000FF;">
									用户协议
								</text>》。
							</ciy-checkitem>
						</view>
						<view style="text-align: center;padding-top:1em;">
							<button class="btn lg cc" form-type="submit">{{lang('login.btn_reg')}}</button>
						</view>
					</view>
				</form>
			</view>

			<view class="content">
				<view class="title">
					<view @tap="gopg(0)" style="padding-right:2em;">{{lang('login.tabreg')}}</view>
					<ciy-gesture @todown="close" class="mid" style="letter-spacing: 1em;padding-left: 0.5em;" @toright="gopg(0)" @toleft="gopg(2)">{{lang('login.tablogin')}}</ciy-gesture>
					<view @tap="gopg(2)">{{lang('login.tabforget')}}</view>
				</view>
				<form @submit="submitlogin">
					<view style="width:600rpx;margin:0.5em auto;">
						<view class="ciy-form">
							<label @tap="showver">{{lang('login.form_mobile')}}</label>
							<view>
								<ciy-input :value="user" type="number" name="user" placeholder="请输入手机号"></ciy-input>
							</view>
						</view>
						<view class="ciy-form">
							<label>{{lang('login.form_pass')}}</label>
							<view>
								<ciy-input :value="pass" name="pass" type="password" placeholder="请输入密码"></ciy-input>
							</view>
						</view>
						<view style="margin:1em 0;">
							<ciy-checkitem sq v-model="xieyi">
								已阅读并同意《
								<text @tap="gourl" :data-url="lang('login.xieyi')" style="color:#0000FF;">
									用户协议
								</text>》。
							</ciy-checkitem>
						</view>
						<view style="text-align: center;padding-top:1em;">
							<button class="btn lg cc" style="width: 100%;" form-type="submit">{{lang('login.btn_login')}}</button>
						</view>
						<view style="display:inline-block;min-width:2em;min-height:2em;">
							<view v-if="tusers.length > 0" class="cuser">
								<view class="itm code" @tap="setdbg(index)" v-for="(item,index) in tusers" :key="index">
									{{item.name}}
								</view>
							</view>
						</view>
						<view v-if="ver<-6" style="text-align: center;color:var(--txt1)">众产(杭州)科技有限公司</view>
					</view>
				</form>
			</view>

			<view class="content">
				<view class="title">
					<view @tap="gopg(0)">{{lang('login.tabreg')}}</view>
					<view @tap="gopg(1)">{{lang('login.tablogin')}}</view>
					<ciy-gesture @toright="gopg(1)" class="mid">{{lang('login.tabforget')}}</ciy-gesture>
				</view>
				<form @submit="submitforget">
					<view style="width:600rpx;margin:0.5em auto;">
						<view class="ciy-form">
							<label>{{lang('login.form_mobile')}}</label>
							<view>
								<ciy-input v-model="forgetmobile" name="user" type="number" placeholder="请输入手机号"></ciy-input>
							</view>
						</view>
						<view class="ciy-form">
							<label>验证码</label>
							<view>
								<ciy-capcode hasmore name="capsms" btntxt="发送短信" :account="forgetmobile" :func="smsfunc" placeholder="请输入验证码"></ciy-capcode>
							</view>
						</view>
						<view class="ciy-form">
							<label>新密码</label>
							<view>
								<ciy-input name="pass" type="password" placeholder="请输入新密码"></ciy-input>
							</view>
						</view>
						<view class="ciy-form">
							<label>再次输入</label>
							<view>
								<ciy-input name="pass2" type="password" placeholder="再次输入新密码"></ciy-input>
							</view>
						</view>
						<view style="text-align: center;padding-top:1em;">
							<button class="btn lg cc" form-type="submit">{{lang('login.btn_forget')}}</button>
						</view>
					</view>
				</form>
			</view>
		</view>
	</view>
	<view :animation="anidatabg" class="authbg" @tap="close"></view>
</template>

<style scoped>
	.cuser {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 2em;
	}

	.cuser>.itm {
		margin: 0.5em;
	}

	.title {
		display: flex;
		text-align: center;
		font-size: 1em;
		margin: 1em;
		align-items: flex-end;
	}

	.title>.itm {
		text-decoration: underline;
		padding: 0 1em;
		min-width: 4em;
	}

	.title .mid {
		text-decoration: none;
		font-weight: bolder;
		font-size: 1.6em;
		padding: 0;
		flex: 1;
		background: linear-gradient(30deg, var(--man5), var(--man7));
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}

	.auth {
		position: fixed;
		z-index: 50002;
		/*51*/
		bottom: -2em;
		left: 0;
		right: 0;
		transform: translateY(28em)
	}

	.authbg {
		position: fixed;
		z-index: 50001;
		/*50*/
		top: 0;
		bottom: 0;
		left: -0.5em;
		right: -0.5em;
		touch-action: none;
		background: linear-gradient(0deg, var(--bg2), transparent);
		transform: translateY(100vh);
	}

	.auth .swiper {
		display: flex;
		width: 300vw;
		flex-wrap: nowrap;
		transition: all 0.3s;
	}

	.auth .content {
		width: 100vw;
		margin: 0 0.5em;
		border-radius: 1em 1em 0 0;
		background: radial-gradient(at center 5em, var(--bg1), var(--bg3));
		overflow: auto;
		box-shadow: 2px 2px 20px -10px var(--bg9);
	}
</style>
<script>
	import md5 from '@/util/md5.js';
	export default {
		props: {},
		data() {
			return {
				forgetmobile: '',
				smsfunc: '',
				user: '',
				pass: '',
				xieyi: false,
				pg: -100, //-100
				ver: 6,
				height: '28em',
				tusers: [],
				anidataauth: {},
				anidatabg: {},
			};
		},
		options: {
			virtualHost: true
		},
		watch: {},
		computed: {},
		mounted() {},
		methods: {
			async Open(authcb, must) {
				this.authcb = authcb;
				if (!must) {
					var me = this.getme();
					if (me.id > 0) {
						authcb({
							me: me
						});
						this.authcb = null;
						return;
					}
					//#ifdef MP-WEIXIN
					var upid = this.toint(this.getstorage('upid'));
					var res = await uni.login({
						provider: 'weixin',
						scopes: 'auth_base',
						onlyAuthorize: true
					});
					var retjson = await this.callfunc({
						func: 'login.wx_autouser',
						loadhide: true,
						data: {
							code: res.code,
							upid: upid
						}
					});
					if (retjson.code != 1)
						return;
					this.tologin(retjson);
					return;
					//#endif
				}
				var animation = uni.createAnimation({
					timingFunction: 'ease'
				});
				animation.translateY(0);
				animation.step({
					duration: 700
				});
				this.anidataauth = animation.export();
				var animation = uni.createAnimation({
					timingFunction: 'ease'
				});
				animation.translateY(0);
				animation.step({
					duration: 400
				});
				this.anidatabg = animation.export();
				this.user = this.getstorage('login_mb');
				this.smsfunc = 'login.sendsms';
			},
			async submitlogin(e) {
				var app = getApp();
				var post = e.detail.value;
				if (post.user.length > 0)
					this.setstorage('login_mb', post.user);
				if (post.user == '')
					return this.toast('请填写手机号');
				if (post.pass == '')
					return this.toast('请填写密码');
				if (!this.xieyi && await this.askmsg('是否阅读并同意协议？', '同意') != 'ok')
					return;
				post.auth = (new Date()).getTime();
				post.appcid = app.globalData._appcid;
				var epass = md5.md5(post.pass + app.globalData.tokensalt);
				post.pass = md5.md5(epass + post.auth);
				//._from = app.globalData._sysinfo;
				var retjson = await this.callfunc({
					func: 'login.login_mobile', // login.login
					data: post
				});
				if (retjson.code != 1)
					return this.toast(retjson.errmsg);
				this.setstorage('_dbgs', retjson.dbgs);
				this.tologin(retjson);
			},
			async submitreg(e) {
				var app = getApp();
				var post = e.detail.value;
				if (post.user == '')
					return this.toast('请填写手机号');
				if (post.pass == '')
					return this.toast('请填写密码');
				if (post.pass != post.pass2)
					return this.toast('两次密码输入不同');
				if (!this.xieyi && await this.askmsg('是否阅读并同意协议？', '同意') != 'ok')
					return;
				post.upid = app.getstorage('upid');
				post.appcid = app.globalData._appcid;
				post.pass = md5.md5(post.pass + app.globalData.tokensalt);
				post.pass2 = '';
				//._from = app.globalData._sysinfo;
				var retjson = await this.callfunc({
					func: 'login.reg_mobile', // login.reg
					data: post
				});
				if (retjson.code != 1)
					return this.toast(retjson.errmsg);
				this.setstorage('login_mb', post.user);
				this.tologin(retjson);
				this.toast('注册成功，已自动登录');
			},
			async submitforget(e) {
				var app = getApp();
				var post = e.detail.value;
				if (post.user == '')
					return this.toast('请填写手机号');
				if (post.captcha == '')
					return this.toast('请填写验证码');
				if (post.pass == '')
					return this.toast('请填写密码');
				if (post.pass != post.pass2)
					return this.toast('两次密码输入不同');
				post.pass = md5.md5(post.pass + app.globalData.tokensalt);
				var retjson = await this.callfunc({
					func: 'login.forgetpass', // login.reg
					data: post
				});
				if (retjson.code != 1)
					return this.toast(retjson.errmsg);
				this.tologin(retjson);
				this.toast('密码找回成功，已自动登录');
			},
			tologin(json) {
				var app = getApp();
				var auth = app.setuserstorage(json);
				if (this.authcb != null)
					this.authcb(auth);
				this.authcb = null;
				this.close();
			},
			gopg(idx) {
				this.pg = idx * -100;
			},
			close() {
				if (this.authcb != null)
					this.authcb({
						me: {
							id: 0
						}
					});
				this.authcb = null;
				var animation = uni.createAnimation({
					timingFunction: 'ease'
				});
				animation.translateY(this.height);
				animation.step({
					duration: 1000
				});
				this.anidataauth = animation.export();
				var animation = uni.createAnimation({
					timingFunction: 'ease'
				});
				animation.translateY('100vh');
				animation.step({
					duration: 1000
				});
				this.anidatabg = animation.export();
			},
			async showver(e) {
				this.ver--;
				if (this.ver !== 0)
					return;
				var app = getApp();
				if (app.globalData._wxenv == 'release')
					return;
				var retjson = await this.callfunc({
					func: 'login.debug_list',
					data: {}
				});
				this.tusers = retjson.list;
			},
			setdbg(idx) {
				this.xieyi = true;
				this.user = this.tusers[idx].user;
				this.pass = this.tusers[idx].pass;
			},
		}
	}
</script>