<template>
	<view class="login">
		<image class="login_bgimg" :src="login_img" alt="">
			<view class="login_form">
				<u--form labelPosition="left" :model="userInfo">
					<u-form-item prop="userInfo.name" class="label_left">
						<image :src="user_img" class='login_icon' alt="">
							<u--input v-model="userInfo.userAccount"></u--input>
					</u-form-item>
					<u-form-item prop="userInfo.name" class="label_left">
						<image :src="lockon" class='login_icon' alt="">
							<input class="psd_input" v-model="userInfo.passWord" :password="eye"></input>
							<image :src="eye?Frame:browse" class='login_icon_eye' alt=""  @click="showpsd">
					</u-form-item>
				</u--form>
				<u-button type="primary" text="登录" class="btn" @click="submit"></u-button>
			</view>
			<!-- 顶部公共提示信息 -->
			<uni-popup ref="Exchangepopup" type="message">
				<uni-popup-message :type="popupType" :message="popupMessage" :duration="2000"></uni-popup-message>
			</uni-popup>
			<!-- 顶部提示信息结束-->
	</view>
</template>
<script>
	import login from "@/static/login_img/login.png"
	import Frame from "@/static/login_img/Frame.png"
	import lockon from "@/static/login_img/lock-on.png"
	import user from "@/static/login_img/user.png"
	import browse from "@/static/login_img/browse.png"
	export default {
		name: "son",
		data() {
			return {
				login_img: login,
				browse: browse,
				user_img: user,
				lockon: lockon,
				Frame: Frame,
				userInfo: {
					userAccount: 'admin',
					passWord: '88888888',
				},
				eye: true,
				popupType:'',
				popupMessage:''
			};
		},
		methods: {
			showpsd() {
				this.eye = !this.eye
			},
			//顶部公共消息提示
			ExchangeMessage(type, message) {
				this.popupType = type
				this.popupMessage = message?message:'后端接口404错误!'
				this.$refs.Exchangepopup.open()
			},
			submit() {
				this.$utils.showLoading('登录中')
				if (this.userInfo.userAccount && this.userInfo.passWord) {
					this.$http.wxLogin(this.userInfo).then(res => {
						uni.hideLoading()
						if(res.code == 0){
							this.$storage.setJson("token",res.data.token)
							this.$storage.setJson("userId",res.data.userId)
							uni.navigateTo({
								url: '/pages/home/index'
							})
							this.ExchangeMessage('success', res.msg)
						}else{
							this.ExchangeMessage('error', res.msg)
						}
					})
				} else {
					this.ExchangeMessage('warn', '账号密码错误')
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style lang="scss">
	.login {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;

		.login_bgimg {
			width: 100%;
			height: 100%;
		}

		::v-deep .login_form {
			position: absolute;
			width: 500px;
			height: 300px;
			left: 8%;
			bottom: 10%;
			// border: 1px solid red;

			.label_left {
				.u-form-item__body__left {
					width: auto !important;
				}
			}

			.u-border {
				border: none
			}

			.u-form-item__body {
				padding: 0px 0px;
				margin-bottom: 32px;
			}

			.u-form-item__body__right__content ,.psd_input{
				background: #1D2034;
				border-radius: 6px 6px 6px 6px;
				width: 400px;
				height: 40px;
				padding: 0px 0px;
				color: #fff;
				.uni-input-input {
					color: #fff;

				}

			}
			.psd_input{
				width: 360px;
				padding-left: 10px;
			}
			.u-input--square {
				padding: 8px 9px !important;
			}

			.uicon-lock-fill,
			.uicon-account-fill {
				margin-left: 15px;
			}

			.uicon-eye-off,
			.uicon-eye {
				margin-right: 15px;
			}
		}

		.btn {
			width: 200px;
			height: 40px;
			background: #91FDB9;
			border-radius: 6px 6px 6px 6px;
			position: absolute;
			left: 0px;
			color: black;
			padding: 0px 0px;
		}

		.login_icon {
			width: 20px;
			height: 20px;
			margin-left: 10px;
		}

		.login_icon_eye {
			width: 20px;
			height: 20px;
			position: relative;
			left: -30px;
		}
	}
</style>
