<template>
	<view class="wrap">
		<view class="top"></view>
		<u-image :src="imageURL" mode="widthFix"></u-image>
		<view class="content">
			<u-form :model="loginForm" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item label="邮箱号" prop="mail" label-width="150">
					<u-input placeholder="请输入邮箱号" v-model="loginForm.mail" type="text">
					</u-input>
				</u-form-item>
				<u-form-item label="验证码" prop="msg" label-width="150">
					<u-input placeholder="请输入验证码" v-model="loginForm.msg" type="number"></u-input>
					<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
				</u-form-item>
			</u-form>
			<!-- <button  :style="[inputStyle]" class="getCaptcha">登录</button> -->
			<!-- 			<u-gap height="0.5" bg-color="#bbb"></u-gap> -->
			<view style="margin-top: 16rpx;">
				<u-button @click="submit" type="warning">登录</u-button>
			</view>
			<view class="alternative">
				<navigator url="login_password" class="password" open-type="navigate">密码登录</navigator>
			</view>
		</view>
		<u-verification-code seconds="30" ref="uCode" @change="codeChange"></u-verification-code>
		<view style="text-align: center;">
			<view class="icon">
				<u-icon size="70" name="weixin-fill" color="rgb(83,194,64)" @click="mpLogin"></u-icon>
			</view>
			微信登录
		</view>
		<!-- <view class="buttom">
			<view class="loginType">
				<view class="wechat item">
					<view class="icon"><u-icon size="70" name="weixin-fill" color="rgb(83,194,64)"></u-icon></view>
					微信登录
				</view>
				<view class="QQ item">
					<view class="icon"><u-icon size="70" name="qq-fill" color="rgb(17,183,233)"></u-icon></view>
					QQ
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageURL: '/static/banner3.jpg',
				loginForm: {
					mail: "",
					msg: ""
				},
				codeTips: "获取验证码",
				rules: {
					mail: [{
							required: true,
							message: '请输入邮箱号',
							trigger: ['change', 'blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
							message: '格式有误',
							trigger: ['change', 'blur'],
						}
						// {
						// 	// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						// 	validator: (rule, value, callback) => {
						// 		// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
						// 		return this.$u.test.idCard(value);
						// 	},
						// 	message: '格式有误',
						// 	// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						// 	trigger: ['change','blur'],
						// }
					],
					msg: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}, ]
				},
				errorType: ['message'],
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			uni.hideHomeButton()
		},
		computed: {
			inputStyle() {
				let style = {};
				if (this.loginForm.mail && this.loginForm.msg) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['warning'];
				}
				return style;
			},
			submitEnable() {
				if (this.loginForm.mail && this.loginForm.msg) {
					return false;
				}
				return true;
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading({})
						this.$u.api.codeLogin(this.loginForm).then(res => {
							this.$u.vuex('vuex_token', res.data.access)
							this.$u.api.getUserInfo().then(res => {
								this.$u.vuex('vuex_user', res.data)
								// 修改资源请求地址
								this.$u.vuex('vuex_user.avatar', this.vuex_user.avatar +
									'?token=' + this.vuex_token)
								uni.hideLoading()
							})
							uni.reLaunch({
								url: '/pages/home/home'
							})
						}).catch(e => {
							uni.hideLoading()
						})
					}
				});
			},
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode && this.loginForm.mail) {
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					this.$u.api.getCode(this.loginForm).then(res => {
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			mpLogin() {
				uni.showLoading({
					title: '微信登录中...',
					mask: true
				})
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.$u.api.wxmplogin({
							code: loginRes.code
						}).then(res => {
							this.$u.vuex('vuex_token', res.data.access)
							this.$u.api.getUserInfo().then(res => {
								uni.hideLoading()
								uni.showToast({
									title: "登录成功",
									icon: "none"
								})
								uni.reLaunch({
									url: "/pages/home/home"
								})
								this.$u.vuex('vuex_user', res.data)
								// 修改资源请求地址
								this.$u.vuex('vuex_user.avatar', this.vuex_user.avatar +
									'?token=' + this.vuex_token)
							})
						}).catch(e => {
							uni.hideLoading()
							uni.showToast({
								title: "暂未绑定微信!",
								icon: "none"
							})
						})
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 90%;
			margin: 40rpx auto 0;

			.title {
				text-align: center;
				font-size: 40rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				color: $u-type-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}

			.getCaptcha {
				background-color: rgb(253, 243, 208);
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;
				margin-top: 6rpx;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.buttom {
			.loginType {
				display: flex;
				padding: 350rpx 150rpx 150rpx 150rpx;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;

				.link {
					color: $u-type-warning;
				}
			}
		}
	}
</style>
