<template>
	<view class="content">
		<view class="login_bg">
			<view class="login_title">您好，</br>欢迎使用取纸机管理平台</view>
			<image class="iv_login" src="../../static/iv_login.png"></image>
		</view>

		<view class="user_name">
			<view class="text_user">账号/手机号</view>
			<u-input class="user_pass" v-model="userInfo.name" border="bottom" placeholder="请输入您的手机号"></u-input>

			<view class="text_user">密码</view>
			<view class="password">
				<u-input class="user_pass" :type="type" border="bottom" v-model="userInfo.password"
					placeholder="请输入您的密码">
					<template slot="suffix">
						<u-icon name="eye" @click="showpassword"></u-icon>
					</template>
				</u-input>
			</view>
		</view>
		<view class="but_login" @click="login"> 登录</view>
		<view class="privacy_policy">登录即代表已阅读并同意 <text class="text" @click="onGetXieyi(1)">《用户协议》</text>和<text
				class="text" @click="onGetXieyi(2)">《隐私协议》</text>
		</view>

		<!-- <view class="third_party">
			<view class="border"></view>
			<view class="third">第三方登录</view>
			<view class="border"></view>
		</view>
		<view class="wx_login" @click="wxLogin">
			<image class="iv_login" src="../../static/iv_wx.png"></image>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '',
					password: '',
					// name: '15544195768',
					// password: '123456',
				},
				type: 'password'
			}
		},
		onLoad() {
			const token = uni.getStorageSync('token')
			if (token) {
				this.$wskj.switchTab('/pages/home_index/home');
			}
		},
		methods: {
			login() {
				let _this = this;
				if (_this.userInfo.name.length == 0) {
					this.$u.toast('请输入您的手机号')
					return
				}
				if (_this.userInfo.password.length == 0) {
					this.$u.toast('请输入您的密码')
					return
				}
				const params = {
					url: '/login',
					data: {
						username: _this.userInfo.name,
						password: _this.userInfo.password,
					},
				}
				_this.$request(params).then(res => {
					uni.setStorageSync('token', res.token);
					_this.$wskj.switchTab('/pages/home_index/home');
				})
				//_this.$wskj.switchTab('/pages/home_index/home');
			},
			// 密码隐藏显示
			showpassword() {
				this.type = this.type === 'password' ? 'text' : 'password';
			},
			wxLogin() {
				//微信登录
				uni.navigateTo({
					url: ''
				})
			},
			onGetXieyi(type) {
				const params = {
					url: '/app/system/rule/list',
					method: 'GET',
					loadingTip: '',
					data: {
						ruleType: type == 1 ? 'user_agreement' : 'privacy_agreement'
					}
				}
				this.$request(params).then(res => {
					console.log(res)
					let title = type === '1' ? '用户协议' : '隐私政策'
					this.$wskj.to('/pages/agreement?title=' + title + '&content=' + res.rows[0].ruleContent)
				}).catch(err => {
					console.log(err)
					this.$u.toast('发生错误')
				})
			}
		}
	}
</script>

<style lang="less">
	.wx_login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 28px;

		.iv_login {
			width: 78rpx;
			height: 78rpx;
		}
	}

	.third_party {
		display: flex;
		margin-left: 66rpx;
		margin-top: 120rpx;
		align-items: center;

		.border {
			width: 238rpx;
			border-bottom: 2rpx solid #999999;
		}

		.third {
			padding: 0rpx 20rpx;
		}
	}

	.content {
		.privacy_policy {
			margin-top: 20rpx;
			margin-left: 87rpx;
			font-size: 24rpx;

			.text {
				color: #FB4B4E;
			}

		}

		.login_bg {
			height: 180px;
			width: 100%;
			background: linear-gradient(91deg, #FCD4D2 0%, #FDEDEE 100%);
			// view 显示一行
			display: flex;
			// view 俩边撑开
			justify-content: space-around;

			.login_title {
				color: #FFFFFF;
				margin-top: 70px;
			}

			.iv_login {
				width: 100px;
				height: 100px;
				bottom: -30%;
			}

		}

		.but_login {
			width: 630rpx;
			text-align: center;
			justify-content: center;
			line-height: 88rpx;
			font-weight: 500;
			margin-left: 66rpx;
			color: white;
			height: 88rpx;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			background: linear-gradient(89deg, #FFBFBC 0%, #FB262A 100%);
		}

		.user_name {
			margin-top: -50rpx;
			background-color: wheat;
			border-radius: 20px 20px 0px 0px;
			background: white;
			padding: 100rpx 60rpx;

			.user_phone {
				font-size: 12px;
				padding-top: 38rpx;
				padding-bottom: 28rpx;
				border-bottom: 2rpx solid #999999;
			}

			.text_user {
				margin-top: 20rpx;
				font-size: 18px;
				font-weight: 600;
			}

			.user_pass {
				margin-top: 20rpx;
				font-size: 12px;
			}

			.password {
				display: flex;

				.iv_pass {
					height: 30rpx;
					width: 30rpx;
				}

				.user_pass {
					margin-top: 20rpx;
					font-size: 12px;
				}
			}
		}
	}
</style>