<template>
	<view class="container">
		<image class="logo" src="../../static/logo.png" mode=""></image>
		<view class="shop-name">
			懒人企业福利社
		</view>
		<view>
			<view class="input-code">
				<input class="input" confirm-type="search" type="text" :value="phone" placeholder="请输入手机号"
					 @input="topInputChange" :placeholder-style="{'color':'#848689'}" :maxlength="11"/>
			</view>
			<button v-if="showGetPhoneBtn" class="login-title" open-type="getPhoneNumber" @getphonenumber="getphonenumber" />
			<view class="input-code input">
				<input class="left" confirm-type="search" type="text" :value="code" placeholder="请输入验证码"
					 @input="bottomInputChange" :placeholder-style="{'color':'#848689'}" :maxlength="4"/>
				<text @click="sendCode()" class="right" :style="{'color':isSendCode?'':'#FF0520'}">{{btnText}}</text>
			</view>
		</view>
		<view class="login-btn" @click="login()">
				登 录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				time: 300,
				isSendCode: false,
				btnText: '获取验证码',
				showSelectAccount: false,
				showGetPhoneBtn: true
			}
		},
		created() {
		},
		onUnload() {
			clearInterval()
		},
		methods: {
			topInputChange (e) {
				this.phone = e.detail.value
			},
			bottomInputChange (e) {
				this.code = e.detail.value
			},
			getphonenumber (e) {
				console.log(e);
				this.liteLogin(e.detail.code)
			},
			sendCode() {
				if (this.phone.length != 11) {
					this.toast('请输入正确的手机号')
					return
				}
				if (this.time != 300) {
					return
				}
				let params = {'codeType': '10', 'mobile': this.phone, 'resetToken':'not'}
				this.$net.post('/meta/sms', params).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '验证码发送成功'
						})
						this.startTime()
					} else {
						uni.showToast({
							title: res.message
						})
					}
				})
			},
			startTime () {
				if (this.time != 300) {
					return
				}
				this.isSendCode = true
				this.btnText = this.time+'s'
				var timer = setInterval(()=>{
					this.time--
					if (this.time>0) {
						this.btnText = this.time+'s'
					} else {
						this.btnText = '重新发送'
						this.time = 300
						clearInterval(timer)
					}
				}, 1000)
			},
			login() {
				if (this.phone.length==0) {
					this.toast('请输入手机号')
					return
				}
				if (this.code.length==0) {
					this.toast('请输入验证码')
					return
				}
				this.loading.loadingShow('登录中...')
				let params = {'authType':'code','authAccount':this.phone,'authPasswd':this.code, 'resetToken':'not'}
				this.$net.post('/auth/authorization', params).then(res => {
					this.loading.loadingHide()
					if (res.code === 200) {
						this.$net.tokenSave(res.data.token || '')
						this.$store.commit('refreshUserLogin', true)
						if (res.data.accountSwitching != 0) {
							this.$router.replaceTo('SelectAccount')
						} else {
							this.$router.pop()
						}
					} else {
						this.toast(res.message)
					}
				})
			},
			liteLogin(liteCode) {
				this.showGetPhoneBtn = false
				if (!liteCode) {
					return
				}
				this.loading.loadingShow('登录中...')
				let params = {'authType':'lite','authAccount':liteCode, 'resetToken':'not'}
				this.$net.post('/auth/authorization', params).then(res => {
					this.loading.loadingHide()
					if (res.code === 200) {
						this.$net.tokenSave(res.data.token || '')
						this.$store.commit('refreshUserLogin', true)
						if (res.data.accountSwitching != 0) {
							this.$router.replaceTo('SelectAccount')
						} else {
							this.$router.pop()
						}
					} else {
						this.toast(res.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #FFFFFF;
	.nav-bar {
		background-color: #FFFFFF;
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #EFEFEF;
		.back {
			height: 34rpx;
			width: 86rpx;
			image{
				height: 36rpx;
				width: 18rpx;
				margin-left: 34rpx;
			}
		}
		.title {
			font-size: 34rpx;
			color: #333333;
			text-align: center;
		}
	}
	.logo {
		display: block;
		margin: 128rpx auto 0;
		height: 128rpx;
		width: 128rpx;
	}
	.shop-name {
		margin-top: 32rpx;
		text-align: center;
		width: 100%;
		font-size: 32rpx;
		color: #333333;
	}
	.select-type {
		margin-top: 120rpx;
		width: 100%;
		display: flex;
		align-items: center;
		height: 70rpx;
		.item {
			height: 70rpx;
			font-size: 32rpx;
			color: #252525;
			text-align: center;
			flex: 1;
		}
		.active {
			font-weight: bolder;
			color: #FF0520;
		}
		.active::after {
			margin: 20rpx auto 16rpx;
			width: 176rpx;
			height: 6rpx;
			border-radius: 20rpx;
			content: ' ';
			display: block;
			background-color: #FF0520;
		}
	}
	.input {
		height: 92rpx;
		width: 590rpx;
		margin: 40rpx auto 0;
		border-bottom: 2rpx solid #F0F0F0;
		font-size: 28rpx;
		color: #333333;
	}
	.login-title {
		opacity: 0;
		height: 92rpx;
		width: 100%;
		position: absolute;
		top: 380rpx;
		left: 0;
		z-index: 99;
	}
	.input-code {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left {
			width: 470rpx;
			color: #333333;
		}
		.right {
			color: #848689;
			font-size: 24rpx;
		}
	}
	.login-btn {
		margin: 80rpx auto 0;
		background-color: #ff0520;
		height: 80rpx;
		width: 590rpx;
		line-height: 82rpx;
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
		border-radius: 40rpx;
	}
}
</style>
