<template>
	<div class="login-wrapper">
		<div
			class="shading"
			:style="{
				marginTop: current == 1 ? '100rpx' : '200rpx'
			}"
		>
			<view>星梦供应链</view>
		</div>
		<div class="whiteBg" v-if="formItem === 1">
			<div class="list" v-if="current === 0">
				<form @submit.prevent="submit">
					<div class="item">
						<div class="acea-row row-middle">
							<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
							<input type="text" class="texts" placeholder="请输入用户名" v-model="formData.account" required />
						</div>
					</div>
					<div class="item">
						<div class="acea-row row-middle">
							<image src="/static/images/code_2.png" style="width: 28rpx; height: 32rpx"></image>
							<input type="password" class="texts" placeholder="请输入密码" v-model="formData.password" required />
						</div>
					</div>
				</form>
				<view style="display: flex; align-items: center; justify-content: space-between; color: #e93323; opacity: 0.7">
					<view @click="currentChange(3)">找回账号</view>  
					<view @click="currentChange(2)">忘记密码？立即找回</view>
				</view>
			</div>
			<div class="list" v-if="current === 1">
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
						<input type="text" class="texts" placeholder="请输入用户名" v-model="formData.account" />
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/code_2.png" style="width: 24rpx; height: 34rpx"></image>
						<input type="password" class="texts" placeholder="请输入密码" v-model="formData.passwd" />
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/code_2.png" style="width: 24rpx; height: 34rpx"></image>
						<input type="password" class="texts" placeholder="请确认密码" v-model="passwdss" />
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
						<input type="text" class="texts" placeholder="请输入邀请码" v-model="formData.shareCode" />
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
						<input type="text" class="texts" placeholder="请输入手机号" v-model="formData.phone" />
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/code_2.png" style="width: 28rpx; height: 32rpx"></image>
						<input type="text" placeholder="填写验证码" class="texts" v-model="formData.captcha" />
						<button class="code"  :class="disabled === true ? 'on' : ''" @click="code">
							{{ text }}
						</button>
					</div>
				</div>
			</div>
			<!-- 忘记密码 -->
			<div class="list" v-if="current === 2">
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
						<input type="text" class="texts" placeholder="请输入用户名" v-model="formData.account" required />
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/code_2.png" style="width: 28rpx; height: 32rpx"></image>
						<input type="password" class="texts" placeholder="请输入新密码" v-model="formData.passwd" required />
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
						<input type="text" class="texts" placeholder="请输入手机号" v-model="formData.phone" />
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/code_2.png" style="width: 28rpx; height: 32rpx"></image>
						<input type="text" placeholder="填写验证码" class="texts" v-model="formData.captcha" />
						<button class="code"  :class="disabled === true ? 'on' : ''" @click="code">
							{{ text }}
						</button>
					</div>
				</div>
			</div>
			<!-- 找回账号 -->
			<div class="list" v-if="current === 3">
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
						<input type="text" class="texts" placeholder="请输入手机号" v-model="formData.phone" />
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/code_2.png" style="width: 28rpx; height: 32rpx"></image>
						<input type="text" placeholder="填写验证码" class="texts" v-model="formData.captcha" />
						<button class="code"  :class="disabled === true ? 'on' : ''" @click="code">
							{{ text }}
						</button>
					</div>
				</div>
			</div>
			<div class="logon" @click="submit" v-if="current === 0">登录</div>
			<div class="logon" style="opacity: 0.7; margin-top: 50rpx" @click="currentChange(1)" v-if="current === 0">立即注册</div>
			<div class="logon" @click="loginMobile" v-if="current === 1">注册</div>
			<div class="logon" style="opacity: 0.7; margin-top: 50rpx" @click="currentChange(0)" v-if="current === 1">立即登录</div>
			<div class="logon" @click="wangPass" v-if="current === 2">确认</div>
			<div class="logon" @click="zhaoUser" v-if="current === 3">立即找回</div>
			<div class="logon" style="opacity: 0.7; margin-top: 50rpx" @click="currentChange(0)" v-if="current === 2 || current === 3">前往登录</div>
		</div>
		<div class="bottom"></div>
	</div>
</template>
<script>
import dayjs from '@/plugin/dayjs/dayjs.min.js';
import sendVerifyCode from '@/mixins/SendVerifyCode';
import {
	loginH5,
	registerVerify,
	register,
	// getCodeApi,
	getUserInfo,
	saveOpenIdByWxCode,
	forgotPassword,
	forgotUserName
} from '@/api/user';
import attrs, { required, alpha_num, chs_phone } from '@/utils/validate';
import { validatorDefaultCatch } from '@/utils/dialog';
import { getLogo, appAuth, appleLogin } from '@/api/public';
import { VUE_APP_API_URL } from '@/utils';

import { registerMobile } from '@/api/api';

const BACK_URL = 'login_back_url';

export default {
	name: 'Login',
	mixins: [sendVerifyCode],
	data: function () {
		return {
			navList: ['快速登录', '账号登录'],
			current: 0,
			account: '',
			password: '',
			captcha: '',
			formItem: 1,
			type: 'login',
			logoUrl: '',
			keyCode: '',
			codeUrl: '',
			codeVal: '',
			isShowCode: false,
			platform: '',
			appLoginStatus: false, // 微信登录强制绑定手机号码状态
			appUserInfo: null, // 微信登录保存的用户信息
			appleLoginStatus: false, // 苹果登录强制绑定手机号码状态
			appleUserInfo: null,
			appleShow: false, // 苹果登录版本必须要求ios13以上的
			passwdss: '',
			formData: {
				account: '',
				captcha: '',
				passwd: '',
				phone: '',
				shareCode: ''
			},
			shareCode: ''
		};
	},
	watch: {
		formItem: function (nval, oVal) {
			if (nval == 1) {
				this.type = 'login';
			} else {
				this.type = 'register';
			}
		}
	},
	mounted: function () {
		this.getCode();
		this.getLogoImage();
	},
	onLoad() {
		const invite_code = uni.getStorageSync('user_shareCode');
		if (invite_code) {
			this.formData.shareCode = invite_code;
			this.shareCode = invite_code;
		}

		let self = this;
		uni.getSystemInfo({
			success: function (res) {
				if (res.platform.toLowerCase() == 'ios' && res.system.split(' ')[1] >= 13) {
					self.appleShow = true;
				}
			}
		});
	},
	methods: {
		currentChange(e) {
			this.current = e;
			switch (e) {
				case 0:
					this.formData = {
						account: '',
						password: ''
					};
					break;
				case 1:
					this.formData = {
						account: '',
						captcha: '',
						passwd: '',
						phone: '',
						shareCode: this.shareCode
					};
					break;
				case 2:
					this.formData = {
						account: '',
						passwd: '',
						phone: '',
						captcha: ''
					};
					break;
				case 3:
					this.formData = {
						phone: '',
						captcha: ''
					};
					break;
			}
		},
		wxLoginGo(userInfo) {
			appAuth(userInfo)
				.then((res) => {
					if (res.data.type === 'register') {
						uni.navigateTo({
							url: '/pages/users/app_login/index?authKey=' + res.data.key
						});
					}
					if (res.data.type === 'login') {
						this.$store.commit('LOGIN', {
							token: res.data.token
						});
						this.getUserInfo(res.data);
					}
				})
				.catch((res) => {
					that.$util.Tips({
						title: res
					});
				});
		},
		again() {
			this.codeUrl = VUE_APP_API_URL + '/sms_captcha?' + 'key=' + this.keyCode + Date.parse(new Date());
		},
		getCode() {
			let that = this;
		},
		async getLogoImage() {
			let that = this;
			getLogo().then((res) => {
				that.logoUrl = res.data.logoUrl ? res.data.logoUrl : '/static/images/live-logo.gif';
			});
		},

		wangPass() {
			let that = this;
			if (!that.formData.account)
				return that.$util.Tips({
					title: '请填写用户名'
				});
			if (!that.formData.passwd)
				return that.$util.Tips({
					title: '请填写密码'
				});
			if (!that.formData.phone)
				return that.$util.Tips({
					title: '请填写手机号'
				});
			if (!that.formData.captcha)
				return that.$util.Tips({
					title: '请填写验证码'
				});
			forgotPassword(that.formData).then((res) => {
				uni.showModal({
					title: '提示',
					content: '密码已修改',
					showCancel: false,
					confirmText: '确认',
					success: () => {
						this.current = 0;
					}
				});
			});
		},
		zhaoUser() {
			let that = this;
			if (!that.formData.phone)
				return that.$util.Tips({
					title: '请填写手机号'
				});
			if (!that.formData.captcha)
				return that.$util.Tips({
					title: '请填写验证码'
				});
			forgotUserName(that.formData).then((res) => {
				uni.showModal({
					title: '已找回的用户名',
					content: res.data.userNames.join(','),
					showCancel: false,
					confirmText: '确认',
					success: () => {
						uni.setClipboardData({
							data: res.data.userNames.join(','), //要被复制的内容
							success: () => {
								//复制成功的回调函数
								uni.showToast({
									//提示
									title: '已复制用户名'
								});
								this.current = 0;
							}
						});
					}
				});
			});
		},
		async loginMobile() {
			let that = this;
			if (!that.formData.account)
				return that.$util.Tips({
					title: '请填写用户名'
				});
			if (!that.formData.passwd)
				return that.$util.Tips({
					title: '请填写密码'
				});

			if (that.formData.passwd != that.passwdss)
				return that.$util.Tips({
					title: '两次密码输入不一致'
				});
			if (!that.formData.shareCode)
				return that.$util.Tips({
					title: '请填写邀请码'
				});
			if (!that.formData.phone)
				return that.$util.Tips({
					title: '请填写手机号'
				});
			if (!that.formData.captcha)
				return that.$util.Tips({
					title: '请填写验证码'
				});

			registerMobile(that.formData)
				.then((res) => {
					that.$util.Tips({
						title: '注册成功'
					});
					that.current = 0;
					that.formData.passwd = '';
					that.formData.shareCode = '';
					that.formData.phone = '';
					that.formData.captcha = '';
					that.passwdss = '';
				})
				.catch((res) => {
					that.$util.Tips({
						title: res
					});
				});
		},
		async register() {
			let that = this;
			if (!that.account)
				return that.$util.Tips({
					title: '请填写手机号码'
				});
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
				return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
			if (!that.captcha)
				return that.$util.Tips({
					title: '请填写验证码'
				});
			if (!/^[\w\d]+$/i.test(that.captcha))
				return that.$util.Tips({
					title: '请输入正确的验证码'
				});
			if (!that.password)
				return that.$util.Tips({
					title: '请填写密码'
				});
			if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/i.test(that.password))
				return that.$util.Tips({
					title: '您输入的密码过于简单'
				});
			register({
				account: that.account,
				captcha: that.captcha,
				password: that.password,
				spread: that.$Cache.get('spread')
			})
				.then((res) => {
					that.$util.Tips({
						title: res
					});
					that.formItem = 1;
				})
				.catch((res) => {
					that.$util.Tips({
						title: res
					});
				});
		},
		async code() {
			let that = this;
			if (!that.formData.phone)
				return that.$util.Tips({
					title: '请填写手机号码'
				});
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.formData.phone))
				return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
			if (that.formItem == 2) that.type = 'register';
			await registerVerify(that.formData.phone)
				.then((res) => {
					that.$util.Tips({ title: res.message });
					that.sendCode();
				})
				.catch((err) => {
					return that.$util.Tips({
						title: err
					});
				});
		},
		navTap: function (index) {
			this.current = index;
		},
		async submit() {
			// let data = {
			// 	code: '000000',
			// 	msg: '操作成功',
			// 	resp_time: '20241129145034',
			// 	resp_data: {
			// 		merchant_no: '8225850553300UN',
			// 		channel_id: '95',
			// 		out_order_no: '202411291106',
			// 		order_create_time: '20241129145034',
			// 		order_efficient_time: '20241201145034',
			// 		pay_order_no: '24112911012001101011279773541',
			// 		total_amount: '1',
			// 		counter_url:
			// 			'https://pay.lakala.com/r/0000?pageStyle%3DV2%26token%3DCCSSDVvTh2uC7cMMVJLYg8gRw4thq1rVOYD88VZKXYGDvWebqiJgVEsQHIEwDgwQBLDF1zGzjQan-8nuhQ%3D%3D%26amount%3D1%26payOrderNo%3D24112911012001101011279773541%26mndf%3D1'
			// 	}
			// };

			// wx.openEmbeddedMiniProgram({
			// 	appId: 'wx889424d565967811',
			// 	path: `payment-cashier/pages/checkout/index?source=WECHATMINI&counterUrl=${encodeURIComponent(data.resp_data.counter_url)}`,
			// 	envVersion: 'release',
			// 	// release: 正式版  trial: 体验版
			// 	success(res) {
			// 		// 打开成功
			// 	}
			// });
			// return;
			let that = this;
			if (!that.formData.account)
				return that.$util.Tips({
					title: '请填写账号'
				});
			if (!that.formData.password)
				return that.$util.Tips({
					title: '请填写密码'
				});

			loginH5({
				account: that.formData.account,
				password: that.formData.password,
				spread: that.$Cache.get('spread')
			})
				.then(({ data }) => {
					this.$store.commit('LOGIN', {
						token: data.token
					});

					// that.getUserInfo(data);

					uni.login({
						success({ code }) {
							saveOpenIdByWxCode({ loginCode: code }).then((res) => {
								that.getUserInfo(data);
							});
						}
					});
				})
				.catch((e) => {
					that.$util.Tips({
						title: e
					});
				});
		},
		getUserInfo(data) {
			this.$store.commit('SETUID', data.uid);
			getUserInfo().then((res) => {
				this.$store.commit('UPDATE_USERINFO', res.data);
				let backUrl = this.$Cache.get(BACK_URL) || '/pages/index/index';
				if (backUrl.indexOf('/pages/users/login/index') !== -1) {
					backUrl = '/pages/index/index';
				}
				uni.reLaunch({
					url: '/pages/index/index'
				});
				return;
				console.log(69999);
				console.log(backUrl);
				uni.reLaunch({
					url: backUrl
				});
			});
		}
	}
};
</script>
<style lang="scss" scoped>
page {
	background: #fff;
}

.appLogin {
	margin-top: 60rpx;

	.hds {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #b4b4b4;

		.line {
			width: 68rpx;
			height: 1rpx;
			background: #cccccc;
		}

		p {
			margin: 0 20rpx;
		}
	}

	.btn-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
		}

		.apple-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 30rpx;
			background: #000;
			border-radius: 34rpx;
			font-size: 40rpx;

			.icon-s-pingguo {
				color: #fff;
				font-size: 40rpx;
			}
		}

		.iconfont {
			font-size: 40rpx;
			color: #fff;
		}

		.wx {
			margin-right: 30rpx;
			background-color: #61c64f;
		}

		.mima {
			background-color: #28b3e9;
		}

		.yanzheng {
			background-color: #f89c23;
		}
	}
}

.code img {
	width: 100%;
	height: 100%;
}

.acea-row.row-middle {
	// input {
	// 	flex: 1;
	// 	margin-left: 20rpx;
	// }
}

.login-wrapper {
	padding: 30rpx;

	.shading {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;

		/* #ifdef APP-VUE */
		margin-top: 50rpx;
		/* #endif */
		/* #ifndef APP-VUE */

		margin-top: 200rpx;
		/* #endif */

		view {
			font-size: 38rpx;
			font-weight: bold;
		}

		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
		}
	}

	.whiteBg {
		margin-top: 100rpx;

		.list {
			border-radius: 16rpx;
			overflow: hidden;

			.item {
				border-bottom: 1px solid #f0f0f0;
				background: #fff;

				.row-middle {
					position: relative;
					padding: 16rpx 45rpx;

					.texts {
						// flex: 1;
						margin-left: 20rpx;
						font-size: 28rpx;
						height: 80rpx;
						// line-height: 80rpx;
						// display: flex;
						// justify-content: center;
						// align-items: center;
					}

					// input {
					// 	flex: 1;
					// 	font-size: 28rpx;
					// 	height: 80rpx;
					// 	line-height: 80rpx;
					// }

					.code {
						position: absolute;
						right: 30rpx;
						top: 50%;
						color: $theme-color;
						font-size: 26rpx;
						transform: translateY(-50%);
					}
				}
			}
		}

		.logon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 86rpx;
			margin-top: 80rpx;
			background-color: $theme-color;
			border-radius: 120rpx;
			color: #ffffff;
			font-size: 30rpx;
		}

		.tips {
			margin: 30rpx;
			text-align: center;
			color: #999;
		}
	}
}
</style>
