<template>
	<view class="container">
		<view class="logo">
			<image class="w-240 h-240" src="@/static/logo.png"></image>
		</view>
		<view class="logo-text">
			<text>万世电子科技</text>
		</view>

		<view class="form-wapper">
			<u-form ref="uForm" errorType="toast" :rules="rules" :model="userInfo">

				<u-form-item class="h-100" prop="account">
					<u-input v-model="userInfo.account" maxlength="11" shape="square" placeholder="请输入您的手机号" 
						style="padding: 0 20rpx;">
						<image slot="prefix" class="w-48 h-48" src="@/static/login/mobile.png"></image>
					</u-input>
				</u-form-item>

				<u-form-item prop="password">
					<u-input :password="!isShowPassWord" v-model="userInfo.password" shape="square" placeholder="请输入密码"
						style="padding: 0 20rpx;">
						<image slot="prefix" class="w-48 h-48" src="@/static/login/pass.png"></image>

						<image @click="onCheckPassword" v-if="isShowPassWord" slot="suffix" class="w-32 h-24"
							src="@/static/login/show.png"></image>
						<image @click="onCheckPassword" v-else slot="suffix" class="w-32 h-20"
							src="@/static/login/hide.png"></image>
					</u-input>
				</u-form-item>
			</u-form>

			<view @click="onSubmit" class="btn-wapper">
				<text>提交</text>
			</view>

			<view class="operation-wapper">
				<text @click="$wskj.to('/pages/login/applogin/register')" style="color:#FE2C24;">去注册</text>
				<text @click="$wskj.to('/pages/login/applogin/forgotpassword')">忘记密码?</text>
				
			</view>

			<view class="user-agreement-wapper">
				<image v-show="!isAgree" @click="isAgree = !isAgree" src="@/static/select.png">
				</image>
				<image v-show="isAgree" @click="isAgree = !isAgree" src="@/static/is-select.png">
				</image>
				<view>
					<text class="ml-15">阅读并同意</text>
					<text @click="onGetXieyi('yhxy')" style="color:#4083F0;">《用户协议》</text>
					<text>和</text>
					<text @click="onGetXieyi('yszc')" style="color:#4083F0;">《隐私协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				userInfo: {
					account: '',
					password: ''
				},
				rules: {
					'account': [{
							type: 'string',
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value)
							},
							message: '手机号码格式不正确',
							trigger: ['change'],
						}
					],
					'password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['change']
					},
				},
				isAgree: false, // 是否阅读服务协议
				isShowPassWord: true, // 是否隐藏密码
			};
		},
		methods: {
			...mapMutations('user', ['saveUserInfo']),
			onGetXieyi(type) {
				const params = {
					url: '/api/index/xieyi',
					loadingTip: '',
					data: {
						type
					}
				}
				this.$request(params).then(res => {
					let title = type === 'yhxy' ? '用户协议' : '隐私政策'
					// #ifdef APP-PLUS
					this.$wskj.to('/pages/xieyi?title=' + title + '&content=' + res.data)
					// #endif

					// #ifdef MP-WEIXIN || MP-ALIPAY
					this.$wskj.to('/pages/xieyi?title=' + title + '&content=' + encodeURIComponent(res.data))
					// #endif
				}).catch(err => {
					this.$u.toast('发生错误')
				})
			},
			onCheckPassword() {
				this.isShowPassWord = !this.isShowPassWord
			},
			// 登录
			onSubmit() {
				this.$refs.uForm.validate().then(res => {
					// 校验通过
					if (res) {
						// 校验通过后先看是否同意了用户协议
						if (!this.isAgree) {
							return this.$u.toast('请同意用户服务协议与隐私协议')
						}
						// 登录请求
						const params = {
							url: '/api/user/login',
							loadingTip: '登录中',
							data: this.userInfo
						}
						this.$request(params).then(res => {
							const {
								data
							} = res
							if (res.code === 1) {
								// 存储token
								uni.setStorageSync('token', data.userinfo.token)

								this.saveUserInfo(data.userinfo) // 保存登录返回的信息到store

								uni.redirectTo({ // 登录成功跳转到首页
									url: '/pages/index'
								})
							} else {
								uni.$u.toast(res.msg || '登录失败');
							}
						}).catch(err => {
							this.$u.toast(err.msg || "登录失败")
						})
					}
				}).catch(errors => {

				})
			}
		}
	};
</script>

<style>
	/deep/.u-input {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		background-color: #F5F5F5;
	}

	.container {
		height: 100%;
		padding: 150rpx 30rpx 0;
	}

	.logo {
		width: 240rpx;
		height: 240rpx;
		margin: 0 auto;
	}

	.logo-text {
		width: 100%;
		text-align: center;
		margin-top: 30rpx;
		color: #000000;
		font-size: 48rpx;
	}

	.form-wapper {
		width: 100%;
		margin: 30rpx auto 0;
	}


	.btn-wapper {
		width: 100%;
		margin: 100rpx auto 0;
		background-color: #FDB62A;
		height: 90rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 90rpx;
		color: #000000;
	}


	.operation-wapper {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin: 50rpx auto 0;
	}

	.operation-wapper>view {}



	.user-agreement-wapper {
		width: 100%;
		position: absolute;
		bottom: 100rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}

	.user-agreement-wapper>image {
		width: 40rpx;
		height: 40rpx;
	}





	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>