<template>
	<view class="loginBack">
		<view class="loginForm">
			<view class="welcomeLogin">欢迎登录</view>
			<view class="tip">舾装-工装托盘管理</view>
			<view class="formregion">
				<!-- <view class="logo"><image :src="define" class="define" mode="scaleToFill"></image></view> -->
				<u-form :model="form" ref="uForm">
					<u-form-item prop="lxdh" label-position="top">
						<u-input type="text" placeholder="请输入手机号码" v-model="form.lxdh" @blur="handleBlur" />
					</u-form-item>
					<u-form-item prop="msgCode" label-position="top">
						<u-input type="number" v-model.trim="form.msgCode"  placeholder="请输入验证码" />
						<u-button v-if="!showCode" type="primary" class="codebtn" @click="getcode">获取验证码</u-button>
						<u-count-down v-if="showCode" ref="uCountDown" :start="59" :timestamp="299" @end="codeEnd" color="#257deb" style="width: 50rpx; border-radius: 30rpx;"
						bg-color="#fff" border-color="#fff" height="45" font-size="30" :show-border="false" 
						 :show-days="false" :show-hours="false" :show-minutes="true" :autoplay="true"></u-count-down>
						<view v-if="showCode" class="timetxt"></view>
					</u-form-item>
					<!-- <view  v-if="!showCode" type="primary" class="loginno">登 录</view>
					<u-button v-if="showCode" type="primary" class="logincla" @click="login">登 录</u-button> -->
					<u-button type="primary" class="logincla" @click="login">登 录</u-button>
				</u-form>
			</view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	//#ifdef APP-PLUS
	// const jpushModule = uni.requireNativePlugin('JG-JPush');
	//#endif
	export default {
		name: "login",
		data() {
			return {
				define: require("@/static/images/logotip.png"),
				show: false,
				form: {
					lxdh:"",
					msgCode:""
				},
				showCode: false,
				rules: {
					lxdh: [{
						required: true,
						message: '输入手机号码',
						trigger: ['blur'],
					}],
					// msgCode: [{
					// 	required: true,
					// 	message: '请输入验证码',
					// 	trigger: 'change'
					// }]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow(){
			this.showCode=false;
			this.form= {
				lxdh:"",
				msgCode:""
			}
		},
		methods: {
			handleBlur(e){
				console.log("handleBlur");
				// 判断手机号码是否合法
				if(!this.$u.test.mobile(e)){
					this.$refs.uToast.show({
						title: '手机号码输入错误，请核实！',
						type: 'warning',
						duration: 2000
					});
				}
			},
			async getcode(){
				var _this=this;
				// 获取验证码
				if(!_this.form.lxdh){
					_this.$refs.uToast.show({
						title: '请输入手机号码！',
						type: 'warning',
						duration: 2000
					});
				}
				else{ //  if(_this.$u.test.mobile(_this.form.lxdh))
					// 输入正确手机号码
					uni.removeStorageSync('token');
					uni.removeStorageSync('user');
					uni.removeStorageSync('expires');
					
					// 调接口推送验证码
					// Query Params 传参
					uni.showLoading({
						title: '发送验证码...'
					});
					const {data: res} = await uni.$http.post("/api/sendSms?phoneNumber="+_this.form.lxdh);
					if(res&&res.success){
						// 倒计时
						_this.showCode=true;
						_this.form.msgCode=res.data;
						_this.$refs.uToast.show({
							title: res.message? res.message:"验证码已发送手机，请查收！",
							type: 'success',
							duration: 2000
						});
					}
					else{
						_this.$refs.uToast.show({
							title: res.message? res.message:"验证码发送失败！请重试！",
							type: 'warning',
							duration: 2000
						});
					}
					
				}
				// else{
				// 	_this.$refs.uToast.show({
				// 		title: '手机号码输入错误，请核实！',
				// 		type: 'warning',
				// 		duration: 2000
				// 	});
				// }
			},
			codeEnd(e){
				// 倒计时结束  重新获取验证码
				console.log(e);
				this.showCode=false;
			},
			login() {
				
				// this.$refs.uToast.show({
				// 	title: '登录成功',
				// 	type: 'success',
				// 	isTab: true,
				// 	duration: 1000,
				// 	url: '/pages/index/index'
				// });
				
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 登录
						this.loginDo();
					} else {
						console.log('验证失败');
					}
					
				});
				
			},
			async loginDo(){
				uni.showLoading({
					title: '正在登录...'
				});
				var _this=this;
				const {data: res} = await uni.$http.post('/api/login?lxdh='+this.form.lxdh+"&msgCode="+this.form.msgCode);
				if(res.success){
					if(res.data){
						console.log(res.data)
						uni.setStorageSync('expires', res.data.expires);
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('user', JSON.stringify(res.data.user));
						uni.setStorageSync('menu', JSON.stringify(res.data.btns));
						
						// //#ifdef APP-PLUS
						// //设置别名
						// jpushModule.setAlias({
						// 	'alias': res.data.user.yhdm,
						// 	'sequence': 1
						// });
						// //#endif
						
						this.getdept();
						this.$refs.uToast.show({
							title: '登录成功',
							type: 'success',
							isTab: true,
							duration: 1000,
							url: '/pages/index/index'
						});
					}
					else{
						this.$refs.uToast.show({
							title: "此手机号码登录失败！请重试！",
							type: 'error',
							duration: 2000
						});
					}
				}
				else{
					this.$refs.uToast.show({
						title: res.message? res.message:"此手机号码登录失败！请重试！",
						type: 'error',
						duration: 2000
					});
				}
			},
			
			async getdept(){
				var user= JSON.parse(uni.getStorageSync("user"));
				var bmbm=user.bmbm?user.bmbm:""; 
				const {data: res} = await uni.$http.get('/getCommonData');
				if(res.success){
					if(res.data){
						// 缓存部门
						uni.setStorageSync('commondata', JSON.stringify(res.data));
						if(res.data.depts){
							res.data.depts.forEach((item, ii) => {
								if(item.departCode==bmbm){
									uni.setStorageSync('bmmc', item.departName);
								}
							});
						}
					}
				}
			},
			
		}

	}
</script>
<style>

</style>
<style lang="scss" scoped>
		
	::v-deep .u-checkbox__label{
		color:#bdbfc1
	}
	.fontColor{
		color:#bdbfc1
	}
	.timetxt{
		font-size: 36rpx;
		color:#257deb;
		line-height: 38rpx;
		height: 45rpx;
		margin-left: 50rpx;
	}
	.codebtn{
		display: block;
		background-color:#257deb;
		height: 60rpx;
		width: 160rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		padding: 0 10rpx;
	}
	.loginno{
		display: block;
		background-color:#a4ceff;
		height: 80rpx;
		line-height: 80rpx;
		width: 550rpx;
		margin-top: 30rpx;
		border-radius:12rpx;
		font-size: 30rpx;
		text-align: center;
		box-sizing:border-box;
	}
	.logincla{
		display: block;
		background-color:#257deb;
		height: 80rpx;
		width: 550rpx;
		margin-top: 30rpx;
	}
	.loginBack {
		color: #fff;
		height: 100vh;
		padding:60rpx 50rpx 200rpx 50rpx;
		width: 100%;
		overflow: hidden;
		background-size: 100% 100%;
		background-image: url('../../static/images/welcome.jpg');
		.inpuIcon {
			width: 46rpx;
			height: 46rpx;
			margin-right: 30rpx;
		}
		.formregion {
			width: 650rpx;
			padding: 33px 50rpx;
			background-color: #fff;
			border-radius: 10px;
			margin-top: 60rpx;
			position: relative;
			display: block;
			.logo{
				position: absolute;
				top: -50rpx;
				left: 0;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.define {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
	.welcomeLogin {
		font-size: 24rpx;
		letter-spacing: 2rpx;
		padding: 60rpx 0 30rpx;
	}
	.tip{
		font-weight: 600;
		font-size: 42rpx;
		letter-spacing: 4rpx;
		padding: 0 0 40rpx 0;
		 
	}
</style>
