<template>
	<view class="login">
		<view class="avatorWrapper">
			<view class="avator">
				<image class="img" src="../../static/image/header-icon.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="form">
			<view class="" v-show="!loginShow">
				<view class="  inputWrapper">
					<input maxlength="11" class="input" @blur="memberOne" v-model="form.mobilePhone" type="text"
						value="" placeholder="请输入手机号" />
				</view>
				<view class=" inputWrapper">
					<input placeholder="请输入验证码" v-model="form.passCode" class="inputCode" name="input"></input>
					<button class='cu-btn round bg-red' @click="getCode()" style="width: 160px ;" v-show="!getCodeShow"
						:disabled="getCodeShow">获取验证码</button>
					<button class='cu-btn round bg-red' @click="getCode()" style="width: 230px ;" v-show="getCodeShow"
						:disabled="getCodeShow">{{getCodeText}}</button>
				</view>
				<view class=" inputWrapper" style="padding: 0;">
					<move-verify class="move-verify" @result='verifyResult' ref="verifyElement1"></move-verify>
				</view>
			</view>
			<view class="" v-show="loginShow">
				<view class="  inputWrapper">
					<input maxlength="11" class="input" v-model="form.mobilePhone" type="text" value=""
						placeholder="请输入手机号" />
				</view>
				<view class=" inputWrapper">
					<input class="input" placeholder="请输入密码" type="password" v-model="form.password"
						name="input"></input>
				</view>
				<view class=" inputWrapper" style="padding: 0;">
					<move-verify class="move-verify" @result='verifyResult' ref="verifyElement2"></move-verify>
				</view>
			</view>
			<view class="margin-top margin-left">
				<checkbox-group class="block flex align-center " @change="changeBox">
					<checkbox style="transform:scale(0.8);margin-right: 5upx;" :class="checkbox.checked?'checked':''"
						:checked="checkbox.checked?true:false" value="A"></checkbox><text class="">记住密码</text>
				</checkbox-group>
			</view>
			<view class="flex justify-center margin-top">
				<view v-show="!loginShow" @click="(loginShow=true)">
					<text class="text-red">使用账号密码登录</text>
				</view>
				<view class="text-red" v-show='loginShow' @click="(loginShow=false)">
					<text>使用手机验证码登录</text>
				</view>
			</view>

			<button size="default" @click="logIn" :loading="loadingShow"
				class=" loginBtn cu-btn bg-red margin-tb-sm lg">登录</button>
		</view>
		<view class=" forgotBtn cu-bar ">
			<text class="forgotBtn_hr"></text>
			<text>DCMY</text>
			<text class="forgotBtn_hr"></text>
		</view>

	</view>
</template>

<script>
	import moveVerify from "@/components/helang-moveVerify/helang-moveVerify.vue"
	import host from '../../utils/host.js'
	export default {
		components: {
			"move-verify": moveVerify
		},
		data() {
			return {
				userInfo: null,
				loadingShow: false,
				resultData: {
					flag: false
				},
				checkbox: {
					value: 'A',
					checked: false,
				},
				loginShow: true,
				getCodeText: null,
				memberShow: false,
				getCodeShow: false,
				memberStoreList: [{
					storeName: "天河北路店"
				}, {
					storeName: "林和西店"
				}],
				form: {
					mobilePhone: null,
					password: null,
					state: 1,
					passCode: null
				},
				time: 0,
				storeId: null,
				key: 0,
			}
		},
		onLoad() {},
		methods: {
			changeBox(e) {
				//console.log(e);
				this.checkbox.checked = !this.checkbox.checked

				if (this.checkbox.checked == false) {
					uni.removeStorageSync('userPassword')
				} else {}
			},
			memberOne(e) {
				var that = this
				if (that.loginShow == false) {
					that.$api.staffLoginList({
						mobilePhone: e.target.value,
						state: 1
					}).then(res => {
						if (res.code == '000000') {
							if (res.rows.length == 0) {
								uni.showModal({
									title: '登录提示',
									content: "没有查到相关员工信息 , 请确认员工手机是否正确",
									showCancel: false,
								})
							} else {
								that.storeId = res.rows[0].storeId
							}
						} else {
							uni.showModal({
								title: '登录提示',
								content: "手机号查询员工列表 , " + res.message,
								showCancel: false,
							})
						}
					})
				}
			},
			/* 校验结果回调函数 */
			verifyResult(res) {
				//console.log(res.flag);
				this.resultData = res;
				if (this.resultData.flag == false) {
					uni.showModal({
						title: '登录提示',
						content: "验证失败 ! 请下拉刷新页面重试  ",
						showCancel: false,
					})
				}
				//console.log(this.resultData);
			},
			/* 校验插件重置 */
			verifyReset() {
				if (this.$refs.verifyElement1) {
					this.$refs.verifyElement1.reset();
					this.$refs.verifyElement2.reset();
				}
				/* 删除当前页面的数据 */
				this.resultData = {};
			},
			logIn() {
				var that = this
				if(this.form.show!=undefined&&this.form.show==true){
						this.resultData.flag = true
				}
				that.loadingShow = true
				//console.log(this.checkbox.checked);
				if (that.checkbox.checked == true) {
					uni.setStorageSync('userPassword', that.form)
				}
				if (this.resultData.flag == true) {
					if (that.form.passCode == null) {
						that.$api.phonePassLogin(that.form).then(res => {
							that.loadingShow = false
							if (res.code == '000000') {
								var user = res.data
								user.mobilePhone = that.form.mobilePhone
								uni.setStorageSync('userInfo', user)
								setTimeout(function() {
									uni.switchTab({
										url: '../tabBar/mySet/mySet'
									});
									uni.showToast({
										title: '登录成功',
										icon: "success",
										duration: 2000
									});
								}, 500)
							} else {
								uni.showModal({
									title: '提示',
									content: res.message,
									showCancel: false,
									success: function(res) {
										that.loadingShow = false
										that.getCodeShow = false
										that.time = 0;
									}
								})

							}
						})
					} else {
						that.$api.phoneLogin(that.form).then(res => {
							that.loadingShow = false
							if (res.code == '000000') {
								var user = res.data
								user.mobilePhone = that.form.mobilePhone
								setTimeout(function() {
									uni.switchTab({
										url: '../tabBar/mySet/mySet'
									});
									uni.showToast({
										title: '登录成功',
										icon: "success",
										duration: 2000
									});
									if (that.checkbox.checked == true) {
										uni.setStorageSync('userPassword', that.form)
									}
									uni.setStorageSync('userInfo', user)
								}, 500)
							} else {
								uni.showModal({
									title: '提示',
									content: res.message,
									showCancel: false,
									success: function(res) {
										that.loadingShow = false
										that.getCodeShow = false
										that.time = 0;
									}
								})
							}
						})
					}

				} else {
					if (this.resultData.flag != undefined) {
						uni.showModal({
							title: '提示',
							content: "请拖动滑块验证信息",
							showCancel: false,
							success: function(res) {
								that.loadingShow = false
								that.getCodeShow = false
								that.time = 0;
							}
						})
					}
				}

			},
			getCode() {
				let reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
				if (reg.test(this.form.mobilePhone)) {
					this.$api.getSmsCode({
						mobilePhone: this.form.mobilePhone,
						storeId: this.storeId
					}).then(res => {
						if (res.code == '000000') {
							uni.showToast({
								title: '已发送验证码',
								icon: "success",
								duration: 3000
							});
							this.getCodeShow = true
							this.time = 60;
							this.timer();
						} else {
							uni.showModal({
								title: '提示',
								content: res.message,
								showCancel: false,
								success: function(res) {
									this.getCodeShow = false
									this.time = 0;
								}
							})
						}
					})
				} else {
					this.getCodeShow = false
					this.time = 0;
					uni.showModal({
						title: '提示',
						content: '请输入正确的手机号',
						showCancel: false,
						success: function(res) {
							this.getCodeShow = false
							this.time = 0;
						}
					})
				}

			},
			timer() {
				if (this.time > 0) {
					this.time--;
					this.getCodeText = (this.time < 10 ? '0' + this.time : this.time) + "s后重新获取";
					setTimeout(this.timer, 1000);
				} else {
					this.time = 0;
					this.getCodeText = "获取验证码";
					this.getCodeShow = false;
				}
			},
		},
		onShow: function() {
			let form = uni.getStorageSync('userPassword')
			//console.log(this.key);
			if (this.form.password != undefined) {
				this.form = form
				this.checkbox.checked = true
			} else {
				this.verifyReset()
				//console.log(123);
			}
			if (this.key == 1) {
				this.verifyReset()
				//console.log(123);
			}
		},
		onPullDownRefresh: function() {
			setTimeout(function() {
				uni.reLaunch({
					url: './login',
				});
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 2000
				});
				uni.stopPullDownRefresh();
			}, 500);
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			//console.log(option);
			var form = uni.getStorageSync('userPassword')

			if (form.password != undefined) {
				this.form = form
				if (option.key != undefined && option.key * 1 == 1) {
					this.key = option.key
				} else {
					this.checkbox.checked == true
				
					this.form.show=true
					this.logIn()
				}
			}
		},

	}
</script>
<style>
	.login {
		background: #dadada;
		width: 100vw;
		height: 100vh;
	}

	.switch_login {
		text-align: center;
	}

	.switch_login text {
		display: inline-block;
		cursor: pointer;
		padding: 20upx 0;
		font-size: 32upx;
		font-weight: 700;
	}

	.avatorWrapper {
		height: 20vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.avator {
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}

	.avator .img {
		width: 100%;
	}

	.form {
		padding: 0 100upx;
	}

	.inputWrapper {
		width: 100%;
		height: 80upx !important;
		background: white;
		border-radius: 30px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
		display: flex;
		align-items: center;

	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
	}

	.inputWrapper .inputCode {
		width: 100%;
		height: 100%;
	}

	.loginBtn {
		width: 100%;
		height: 80upx;
		background: #77B307;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.forgotBtn {
		color: #383838;
		font-size: 20upx;
		margin-top: 20px;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 0 10%;
	}

	.forgotBtn_hr {
		margin-top: 20upx;
		height: 1upx;
		width: 35%;
		border-top: #000000 1upx solid;
	}

	.login uni-button[disabled]:not([type]),
	uni-button[disabled][type=default] {
		color: #FFFFFF;
		background-color: red;
	}

	.login .uni-movable-view {
		border: none !important;
	}

	.login .cu-btn[disabled] {
		opacity: .3;
	}

	.login uni-button[disabled] {
		color: #FFFFFF;
		cursor: not-allowed;
	}

	.move-verify {
		width: 100%;
		height: 100%;
		border-radius: 50upx;
		line-height: 45px;
	}

	.pathway uni-movable-view.active[data-v-f9d47844] {
		border: #FFFFFF 1px solid;
	}
</style>
