<template>
	<view class="pages">
		<!-- <uni-section title="使用uni-ui表单" type="line">
			<uni-card :is-shadow="false" :isFull="true" :border="true">
				<text>
					使用uni-ui的组件创建表单，提交时使用的request.api.js中的网络请求方式，在VUEX里发起登录请求并将结果保存到本地。先调用VUEX，在VUEX中发送网络请求。
				</text>
			</uni-card>
			<uni-card title="uni-ui的表单" :thumbnail="avatar" sub-title="输入框为uni-easyinput" extra="使用uni-forms"
				note="Tips">
				<uni-forms ref="form" :modelValue="formData" :rules="rules">
					<uni-forms-item label="账号:" name="userName">
						<uni-easyinput prefixIcon="person" type="text" v-model="formData.userName"
							placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item label="密码:" name="password">
						<uni-easyinput prefixIcon="locked" type="password" v-model="formData.password"
							placeholder="请输入密码" />
					</uni-forms-item>
				</uni-forms>
				<button @click="dologin">登录</button>
			</uni-card>
		</uni-section> -->

		<!-- 	<text class="text1">
			汇融云仓贷后监管平台
		</text>
		<text class="text2">
			欢迎您
		</text>

		<view class="login">

			<view class="item">
				<image style="width: 17px;height: 17px;" src="../../static/newApp/wd.png" mode="aspectFill"></image>
				<input class="input" @input="nameInput" v-model="formData.userName" placeholder="请输入用户名"
					maxlength="11" />
			</view>

			<view class="item">
				<image style="width: 20px;height: 20px;" src="../../static/newApp/srmm.png" mode="aspectFill"></image>
				<input class="input" @input="paswordInput" v-model="formData.password"  placeholder="请输入密码" />
			</view>

			<view style="display: flex;flex-direction: row;width: 100%;margin-top: 8px;justify-content: space-between;">
				<view  @click="boxChange">
						<checkbox class="checkbox" :checked="rememberPsw" >记住密码</checkbox>
				</view>
			

				<text class="forget" @click="forget">忘记密码？</text>
			</view>

			<u-button class="btn" @click="dologin">登录</u-button>

			<text style="font-size: 13px;color: #ababab;margin-top: 50px;">—— 第三方登录方式 ——</text>

			<image style="width: 30px;height: 30px; margin-top: 20px;margin-bottom: 30px;"
				src="../../static/newApp/wx.png" mode="aspectFill" @click="weixin"></image>

		</view> -->

		<view style="display: flex;flex-direction: row; color: #000;margin-top: 120px;">
			<view style="display: flex;flex-direction: column; align-items: center;">
				<text style="font-size: 30px;color: #898989;">汇融云仓</text>
				<text style="font-size: 25px;color: #898989;">贷后监管平台</text>
			</view>

			<!-- <image src="../../static/newApp/yydlogo.png" mode="aspectFill"
				style="margin-left: 20px; width: 85px;height: 60px;"></image> -->

		</view>

		<view class="input" style="margin-top: 70px;">

			<image style="width: 30px;height: 30px;" src="../../static/loginIcon/sjh.png" mode="aspectFill"></image>
			<input class="input-item" @input="nameInput" v-model="formData.userName" placeholder="请输入手机号"
				maxlength="11" />
		</view>


		<view class="input" style="margin-top: 10px;">

			<image style="width: 30px;height: 30px;" src="../../static/loginIcon/mm.png" mode="aspectFill"></image>
			<input class="input-item" @input="paswordInput" v-model="formData.password" :password="showPassword"
				placeholder="请输入密码"  />
			<image style="width: 25px;height: 25px; margin-left: 10px;" :src="img1" mode="aspectFill" @click="showPas"></image>
		</view>

		<view style="display: flex;flex-direction: row;width: 80%;margin-top: 8px;justify-content: space-between;">
			<view @click="boxChange">
				<checkbox class="checkbox" :checked="rememberPsw">记住密码</checkbox>
			</view>


			<text class="forget" @click="forget">忘记密码？</text>
		</view>

		<button class="btn" @click="dologin">登录</button>

	<!-- 	<text style="font-size: 13px;color: #ababab;margin-top: 50px;">───── 第三方登录方式 ─────</text>

		<image style="width: 45px;height: 45px; margin-top: 20px;" src="../../static/loginIcon/wx.png" mode="aspectFill"
			@click="weixin"></image>
		<text style="font-size: 14px;color: #898989; margin-top: 5px;">微信授权登录</text> -->

		<view style="display: flex;align-items: center;margin-top: 50px;">

			<image :src="img2" style="width: 20px;height: 20px;" mode="aspectFill" @click="selectClick"></image>
			<text style="margin-left: 5px;font-size: 14px;color: #898989;">我已阅读并同意</text>
			<text style="margin-left: 5px;font-size: 16px;color: #197CD0;"  @click="fwxy">用户协议</text>
			<text style="margin-left: 5px;font-size: 14px;color: #898989;">&</text>
			<text style="margin-left: 5px;font-size: 16px;color: #197CD0;" @click="yszc">隐私政策</text>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword: true,
				selectType:false,
				rememberPsw: true, //复选框状态 默认勾选
				// avatar: '/static/uniui.png',
				// vavatar: '/static/uview/common/logo.png',
				// 表单数据
				formData: {
					userName: '',
					password: ''
				},
				img1: "/static/loginIcon/notShow.png",
				img2: "/static/loginIcon/wgx.png",
				// rules: {
				// 	// 对name字段进行必填验证
				// 	name: {
				// 		rules: [{
				// 			required: true,
				// 			errorMessage: '账号不可以为空'
				// 		}]
				// 	},
				// 	// 对passwd字段进行必填验证
				// 	passwd: {
				// 		rules: [{
				// 			required: true,
				// 			errorMessage: '密码不可以为空'
				// 		}]
				// 	}
				// },
			}
		},
		mounted() {
			//取出缓存中的账号、密码
			const loginName = uni.getStorageSync('loginName');
			const loginPasword = uni.getStorageSync('loginPasword');
			console.log("缓存的账号:", loginName)
			console.log("缓存的密码:", loginPasword)
			//有账号、密码就赋值给文本，没有就清空
			if (loginName && loginPasword) {
				this.formData.userName = loginName;
				this.formData.password = loginPasword;
			}
		},
		methods: {
			nameInput(event) {
				this.formData.userName = event.target.value
			},
			paswordInput(event) {
				this.formData.password = event.target.value;
			},
			showPas(){
				this.showPassword=!this.showPassword
				this.img1 = this.showPassword?"/static/loginIcon/notShow.png":"/static/loginIcon/isShow.png"
			},
			selectClick(){
				this.selectType =!this.selectType
				this.img2= this.selectType?"/static/loginIcon/xz.png":"/static/loginIcon/wgx.png"
			},
			fwxy() {
				uni.navigateTo({
					url: '/pages/login/fwxy'
				})
			},
			yszc() {
				uni.navigateTo({
					url: '/pages/login/yszc'
				})
			},
			boxChange() {
				this.rememberPsw = !this.rememberPsw;
				console.log('rememberPsw:', this.rememberPsw)
			},
			dologin() {
				let _this = this
				if (this.auth()) {
					this.$api.login(_this.formData).then((resp) => {
						// if (resp.success) {
						//勾选就缓存账号、密码
						if (_this.rememberPsw) {
							console.log('rememberPsw1:', _this.rememberPsw)
							uni.setStorageSync('loginName', this.formData.userName);
							uni.setStorageSync('loginPasword', this.formData.password);
						} else { //销毁缓存中的账号、密码
							console.log('rememberPsw2:', _this.rememberPsw)
							uni.removeStorageSync('loginName');
							uni.removeStorageSync('loginPasword');
						}

						console.log('MMMM:', resp)
						// getApp().globalData = resp
						 uni.setStorageSync("Global-Auth-Token",  uinfo.token)
						getApp().globalData.username = uinfo.name
						getApp().globalData.token = uinfo.token
						getApp().globalData.sysUserSid = uinfo.sid
						getApp().globalData.mobile = uinfo.mobile
						getApp().globalData.name = uinfo.name
						getApp().globalData.isAdmin = uinfo.isAdmin
						getApp().globalData.roleName = uinfo.roleName
						getApp().globalData.staffSid = uinfo.staffSid
						getApp().globalData.isLogin= true
						console.log('gd--:', getApp().globalData)
						// uni.redirectTo({
						// 	url: '/pages/index/index',
						// })
						uni.switchTab({
							url: '/pages/home/WorkFragment'
						});

					}).catch(e => {
						console.log('eeeee', e)
					})

					// this.$refs.form
					// 	.validate()
					// 	.then(r => {
					// 		_this.$store
					// 			.dispatch('login', _this.formData)
					// 			.then(uinfo => {
					// 				console.log('MMMM:', uinfo)
					// 				getApp().globalData = uinfo
					// 				// getApp().globalData.username = uinfo.name
					// 				// getApp().globalData.token = uinfo.token
					// 				// getApp().globalData.sid = uinfo.sid
					// 				// getApp().globalData.mobile = uinfo.mobile
					// 				// getApp().globalData.name = uinfo.name
					// 				// getApp().globalData.isAdmin = uinfo.isAdmin
					// 				// getApp().globalData.roleName = uinfo.roleName
					// 				// getApp().globalData.staffSid = uinfo.staffSid
					// 				console.log('gd--:', getApp().globalData)
					// 				// uni.redirectTo({
					// 				// 	url: '/pages/index/index',
					// 				// })
					// 				uni.switchTab({
					// 					url: '/pages/home/WorkFragment'
					// 				});

					// 			})
					// 			.catch(er => {
					// 				console.log('EEEE:', er)
					// 			})
					// 	})
					// 	.catch(err => {
					// 		console.log('eeee:', err)
					// 	})
				}

			},
			//校验
			auth() {
				if (this.formData.userName.length < 1 || this.formData.userName == '' && this.formData.password.length <
					1 || this.formData
					.password == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入用户名与密码'
					});
					return false;
				}
				if (this.formData.userName.length < 1 || this.formData.userName == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入用户名'
					});
					return false;
				}
				if (this.formData.password.length < 1 || this.formData.password == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入密码'
					});
					return false;
				}
				
				if(!this.selectType){
					uni.showToast({
						icon: 'none',
						title: '请阅读并同意勾选"用户协议"和"隐私政策"'
					});
					return false;
				}
				
				return true;
			},

			forget() {
				uni.showToast({
					icon: 'none',
					title: '暂不支持'
				});
			},
			weixin() {
				uni.showToast({
					icon: 'none',
					title: '暂不支持'
				});
				// if(!this.selectType){
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请阅读并同意勾选"用户协议"和"隐私政策"'
				// 	});
				// 	return false;
				// }
				// this.WxAuthLogin();
			},

		},

	}
</script>

<style lang="scss">
	// .pages {
	// 	display: flex;
	// 	height: 100%;
	// 	padding-left: 35px;
	// 	padding-right: 35px;

	// 	flex-direction: column;
	// 	background-image: url("../../static/newApp/dlybj.png");

	// 	.text1 {
	// 		margin-top: 120px;
	// 		color: #fff;
	// 		font-size: 25px;
	// 	}

	// 	.text2 {
	// 		margin-top: 10px;
	// 		color: #fff;
	// 		font-size: 29px;
	// 	}

	// 	.login {
	// 		display: flex;
	// 		margin-top: 20px;
	// 		padding: 22px 45px;
	// 		flex-direction: column;
	// 		align-items: center;
	// 		background-image: url("../../static/newApp/bbj.png");
	// 		background-size: 100% 100%;

	// 		.item {
	// 			padding: 10px 10px;
	// 			margin-top: 23px;
	// 			display: flex;
	// 			align-items: center;
	// 			border: 1px solid #bbb;
	// 			border-radius: 6px;

	// 			.input {
	// 				margin-left: 5px;
	// 				width: 150px;
	// 				font-size: 14px;
	// 				color: #000;
	// 			}
	// 		}

	// 		.checkbox {
	// 			zoom: 80%;
	// 			font-size: 16px;
	// 			color: #ababab;
	// 		}

	// 		.forget {
	// 			font-size: 13px;
	// 			color: #ababab;
	// 		}

	// 		.btn {
	// 			margin-top: 35px;
	// 			border-radius: 5px;
	// 			background-color: #0B80E7;
	// 			color: #fff;
	// 			font-size: 12px;
	// 			text-align: center;
	// 			font-family: Microsoft Yahei
	// 		}
	// 	}
	// }

	.pages {

		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		width: 100%;
		height: 100%;

		.input {
			display: flex;
			width: 70%;
			padding: 10px 15px;
			flex-direction: row;
			align-items: center;
			border-bottom: 2px solid #f1f1f1;

			.input-item {
				flex: 1;
				margin-left: 5px;
				padding-right: 5px;
				color: #000;
				font-size: 15px;
			}

		}

		.checkbox {
			zoom: 80%;
			font-size: 16px;
			color: #0797ED;
		}

		.forget {
			font-size: 13px;
			color: #0797ED;
		}

		.btn {
			margin-bottom: 50px;
			width: 70%;
			margin-top: 35px;
			border-radius: 5px;
			background-color: #0B80E7;
			color: #fff;
			font-size: 15px;
			text-align: center;
			font-family: Microsoft Yahei
		}
	}
</style>