<!-- 验证码登录 账密登录 -->
<template>
	<view class="login-page bg-white">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-white">
		</cu-custom>
		<view class="bg-img bg-mask flex align-center"
			:style="'background-image: url('+imgURL+'login-bg-top.png);height: 480upx;'">
			<view class="padding-xl ">
				<view class="image login-bg">
					<image :src="otherImgURL+'logo@ZP.png'" mode="widthFix"></image>
					<view class=" xxx text-bold text-lg padding-top">
						一路油你 中品加油
					</view>
					<view class="text-df text-grey padding-top-xs padding-bottom">
						登录后加油更便捷
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="bg-white nav padding login-shadow">
			<view class="flex text-center padding-bottom">
				<view class="cu-item text-bold text-lg flex-sub"> 
				</view>
				<!-- <view class="cu-item text-bold text-lg flex-sub "
					:class="[1==TabCur?'text-red cur':'',(animation=='animation-fades'&&1==TabCur)?'animation-fade':'']"
					@tap="tabSelect(1)">
					企业账号
				</view> -->

				<view class="cu-item text-bold text-lg  flex-sub "
					:class="[0==TabCur?'text-blues cur':'',(animation=='animation-fades'&&0==TabCur)?'animation-fade':'']"
					@tap="tabSelect(0)">
					个人账号
				</view>
				<view class="cu-item text-bold text-lg flex-sub">

				</view>
			</view>
			<form v-if="0==TabCur">
				<view class="cu-form-group padding-top yu-input" v-if="!person.sended">
					<input placeholder="请输入手机号码" label="手机号" v-model="driver.username" type="number" name="input" />
				</view>

				<view class="" v-if="person.registered">
					<view class="cu-form-group yu-input" v-if="showRandom">
						<input placeholder="请输入验证码" type="number" v-model="person.random" name="input" />
						<view class='oil-main-color' @tap="sendRandom"> {{person.tips}}</view>
					</view>
					<view class="cu-form-group yu-input" v-else>
						<input placeholder="请输入密码" type="password" v-model="person.password" name="input" />
					</view>
				</view>

				<view class="cu-form-group  text-sm">
					<view class="" v-if="showRandom" >
						当前为验证码登录
					</view>
					<view class="" v-else >
						当前为密码登录
					</view>

				</view>
				<view class=" flex flex-direction padding-top-lg" v-if="!person.registered">
					<button class="cu-btn margin bg-main-oil  lg" v-show="!person.sended" @tap="ifRegistered">
						下一步
					</button>
				</view>
				<view view class=" flex flex-direction padding-top-lg" v-else>
					<button class="cu-btn bg-main-oil  lg" @tap="loginRandom" v-if="showRandom">
						登录
					</button>
					<button v-else class="cu-btn bg-main-oil  lg" @tap="loginPwd">
						登录
					</button>

				</view>
			</form>

			<!-- <form v-if="1==TabCur">
				<view class="cu-form-group yu-input padding-top" v-if="!company.sended">
					<input name="手机号" label="手机号" type="number" placeholder="请输入企业下绑定手机号" v-model="driver.username" />
				</view>
				<view class="" v-if="company.registered">
					<view class="cu-form-group yu-input" v-if="showRandom" v-show="company.sended">
						<input placeholder="请输入验证码" type="number" v-model="company.random" />
						<view class='oil-main-color' @tap="sendRandom"> {{company.tips}}</view>
					</view>
					<view class="cu-form-group yu-input" v-else>
						<input placeholder="请输入密码" type="password" v-model="company.password" />
					</view>

				</view>

				<view class="cu-form-group text-sm">
					<view class="" v-if="showRandom" @tap="accuntSourceSelect">
						当前为验证码登录
					</view>
					<view class="" v-else @tap="accuntSourceSelect">
						当前为密码登录
					</view>

				</view>
				<view class=" flex flex-direction padding-top-lg" v-if="!company.registered">
					<button class="cu-btn margin bg-main-oil  lg" v-show="!company.sended" @tap="ifRegistered">
						下一步
					</button>
				</view>
				<view class=" flex flex-direction padding-top-lg" v-else>
					<button v-if="showRandom" class="cu-btn bg-main-oil  lg" @tap="loginRandom">
						登录
					</button>
					<button v-else class="cu-btn bg-main-oil  lg" @tap="loginPwd">
						登录
					</button>

				</view>
			</form> -->

		</scroll-view>

		<view class="cu-load load-modal" v-if="loadModal">
		</view>
		<loginBottom @onCheck="checkAgree" />

	</view>
</template>

<script>
	import loginBottom from './components/loginBottom.vue'
	import authApi from '@/api/auth.js'
	import md5 from 'js-md5'
	export default {
		components: {
			loginBottom
		},
		data() {
			return {
				showRandom: false,
				animation: '',
				hasPhone: false,
				userHandle: false,
				TabCur: 0,
				verifyCodeToken: "",
				accuntSource: false,
				imgURL: this.global.imgURL,
				otherImgURL: this.global.otherImgURL,
				loadModal: false,
				active: 0,

				person: {
					sended: false,
					password: "",
					tips: '发送验证码',
					intervalID: '',
					random: '',
					registered: false
				},

				company: {
					sended: false,
					password: "",
					tips: '发送验证码',
					intervalID: '',
					random: '',
					registered: false
				},
				driver: {
					username: ""
				},
				count: 0,
				loginRes: {},
				checked: false,
				next: false
			}
		},
		onShow() {},
		methods: {
			checkAgree(val) {
				this.checked = val
				// this.showRandom = true
			},
			ifRegistered() {
				let that = this
				if (this.driver.username.length != 11) {
					uni.showToast({
						title: '手机码验证不通过',
						icon: 'none'
					})
					return false
				}
				if (this.showRandom) {
					this.sendRandom()
				} else {
					let type = this.TabCur == 0 ? 'Personal' : 'Company'
					authApi.loginByPhoneNext({
						username: this.driver.username
					}, type).then(res => {
						if (res.code == 20000) {
							// 存在 next
							this.person.registered = true
							this.next = true
						} else if (res.code == 42008) {
							uni.showModal({
								title: res.msg,
								confirmText: '立即注册',
								confirmColor: '#FE0505',
								success: (res) => {
									if (res.confirm) {
										uni.setStorageSync('username', that.driver.username)
										uni.navigateTo({
											url: '/BagAuth/pages/login/register'
										})
									}
								}
							})
						}
					})
				}
			},
			sendRandom() {
				// 判断该手机号是否已注册
				if (1 == this.TabCur) {
					// 1 企业 0个人
					authApi.checkCompanyAccount({
						username: this.driver.username
					}).then(res => {
						if (res.data != null) {
							if (res.data.code == 40001) {
								uni.showModal({
									title: res.data.msg,
									content: '企业账号只能由企业分配，请确认是否当前手机号，如有疑问，请联系客服处理',
									showCancel: false,
									confirmColor: '#1890FF',
									success: (res) => {
										if (confirm) {

										}
									}
								})
							} else if (res.code == 20000) {
								this.company.registered = true
								this.verifyCodeToken = res.data.verifyCodeToken
								uni.showToast({
									title: res.msg
								})
								this.showRandom = true
								this.company.sended = true
								this.sended = true
								var second = 60
								this.company.intervalID = setInterval(() => {
									if (second > 0) {
										this.company.tips = second + '秒后可重发'
										console.log(this.tips)
										second--
									} else {
										clearInterval(this.company.intervalID)
										this.company.tips = '发送验证码'

									}
								}, 1000)
							}
						}
					})
				} else {
					let that = this
					authApi.checkPersonalAccount({
						username: this.driver.username
					}).then(res => {
						if (res.data != null) {
							if (res.data.code == 40001) {
								uni.showModal({
									title: res.data.msg,
									confirmText: '立即注册',
									confirmColor: '#1890FF',
									success: (res) => {
										if (res.confirm) {
											uni.setStorageSync('username', that.driver.username)
											uni.navigateTo({
												url: '/BagAuth/pages/login/register'
											})
										}
									}
								})
							} else if (res.code == 20000) {
								this.person.registered = true
								this.verifyCodeToken = res.data.verifyCodeToken
								uni.showToast({
									title: res.msg
								})
								this.showRandom = true
								this.person.sended = true
								this.sended = true
								var second = 60
								this.person.intervalID = setInterval(() => {
									if (second > 0) {
										this.person.tips = second + '秒后可重发'
										second--
									} else {
										clearInterval(this.person.intervalID)
										this.person.tips = '重发验证码'
									}
								}, 1000)
							}
						}
					})
				}
			},
			checkAccount() {

			},
			// sendRandom() {
			// 	if (this.TabCur == 0) {
			// 		if (this.company.tips == '重发验证码') {
			// 			this.ifRegistered()
			// 			return false
			// 		}
			// 	}
			// 	if (this.TabCur == 1) {
			// 		if (this.person.tips == '重发验证码') {
			// 			this.ifRegistered()
			// 			return false
			// 		}
			// 	}
			// 	uni.showToast({
			// 		title: '别急，等会儿再发哦',
			// 		icon: 'none',
			// 		position: 'bottom'
			// 	})
			// },

			loginPwd() {
				if (!this.checked) {
					uni.showToast({
						title: '请您阅读并同意协议',
						icon: 'none'
					})
					return false
				}
				let data = {
					username: this.driver.username,
					password: this.TabCur == 0 ? md5(this.person.password) : md5(this.company.password),
					unionId: uni.getStorageSync('unionid')
				}
				let type = this.TabCur == 0 ? 'Personal' : 'Company'
				authApi.loginPwd(data, type).then(res => {
					this.loginSuccess(res)
				})
			},
			loginRandom() {
				if (!this.checked) {
					uni.showToast({
						title: '请您阅读并同意协议',
						icon: 'none'
					})
					return false
				}
				let data = {
					verifyCodeToken: this.verifyCodeToken,
					username: this.driver.username,
					verifyCode: this.TabCur == 0 ? this.person.random : this.company.random,
					unionId: uni.getStorageSync('unionid')
				}
				let type = this.TabCur == 0 ? 'Personal' : 'Company'
				authApi.loginRandom(data, type).then(res => {
					if (res.code == 20000) {
						this.loginSuccess(res)
					}
				})
			},
			checkPersonal() {
				if (this.accuntSource) {
					authApi.checkPersonalRDM({
						username: this.driver.username
					}).then(res => {

					})
				} else {
					authApi.checkPersonalPWD({
						username: this.driver.username
					}).then(res => {
						if (res.code == 20000) {}
					})
				}

			},
			loginSuccess(res) {
				let resData = res.data
				if (resData.authTokenDTO.loginFlag) {
					uni.setStorageSync('Authorization', resData.authTokenDTO.accessToken)
					uni.setStorageSync('accountStatus', resData.isCompanyAccount)
					uni.getUserProfile({
						success: (res) => {
							uni.setStorageSync('wxInfo', JSON.parse(res.rawData))
						}
					})
					let user = resData.authTokenDTO.loginUser
					uni.setStorageSync('user', user)

					setTimeout(() => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}, 1000);
					//  这里有问题
					uni.switchTab({
						url: '/pages/tabbar/home/home'
					})
				}
			},
			checkCompany() {
				if (this.accuntSource) {
					authApi.checkCompanyRDM({
						username: this.driver.username
					}).then(res => {

					})
				} else {
					authApi.checkCompanyPWD({
						username: this.driver.username
					}).then(res => {

					})
				}
			},
			// checkPersonalRDM(){
			// 	authApi.checkPersonalRDM({username:this.driver.username}).then(res=>{

			// 	})
			// },
			// checkPersonalRDM(){
			// 	authApi.checkPersonalRDM({username:this.driver.username}).then(res=>{

			// 	})
			// },
			getUserInfo() {

			},
			clearStorage() {
				uni.clearStorage()
			},
			decryptPhoneNumber(e) {
				// console.log(e.detail)
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					const data1 = {
						...this.loginRes,
						...e.detail
					}
					this.bindLoginByPhone(data1)
				} else {
					this.userHandle = true
					uni.showModal({
						title: '用户拒绝了手机号的授权，并给你一个大耳巴子',
						content: `如有疑问，请联系客服处理`
					})
				}
			},
			bindLoginByPhone(data) {
				if (this.count < 1) {
					oilIdentityApi.bindLoginByPhone(data).then(res => {
						if (res.code == '000') {
							this.bindLoginByPhone(data)
							this.count++
						}
					})
				}

			},
			loginWeixin() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						const code = loginRes.code
					}
				})
			},


			// reqRandom() {
			// 	if (this.driver.phone && this.driver.phone.length === 11) {
			// 		uni.showToast({
			// 			title: '发送中...',
			// 			duration: 0,
			// 			icon: 'loding',
			// 			mask: true
			// 		})
			// 		this.phoneError = ''
			// 		this.disabled = true
			// 		this.btnColor = '#333'

			// 		const data2 = {
			// 			...this.driver,
			// 			IMEI: this.IMEI,
			// 			serviceCode: 'LSM_SENDMESSAGES',
			// 			type: 'LSM_APP_LOGIN'
			// 		}

			// 		authApi.api(data2).then(res => {
			// 			console.log('验证码参数', data2)
			// 			console.log('验证码返回参数res', res)
			// 			if (res.code === '1000') {
			// 				this.disabled = true
			// 				uni.hideLoading()
			// 				uni.showToast({
			// 					title: '验证码发送成功',
			// 					icon: 'success',
			// 					position: 'bottom'
			// 				})
			// 				this.btnColor = '#333'
			// 				let second = 60
			// 				const timer = setInterval(() => {
			// 					second--
			// 					if (second) {
			// 						this.tips = `${second}秒后重发`
			// 					} else {
			// 						clearInterval(timer)
			// 						this.tips = `发送验证码`
			// 						this.disabled = false
			// 						this.btnColor = '#FE0505'
			// 					}
			// 				}, 1000)
			// 			}
			// 		})
			// 	} else {
			// 		uni.showToast({
			// 			title: '请输入正确手机号',
			// 			icon: 'none'
			// 		})
			// 	}
			// },

			tabSelect(e) {
				this.TabCur = e;
				var anmiaton = 'animation-fades'
				this.animation = anmiaton;
				setTimeout(() => {
					this.animation = '';
				}, 1000)
			},
			accuntSourceSelect() {
				this.showRandom = !this.showRandom
			},
			ifSuccess(code, data) {
				if (code === '1000') {
					// // // // console.log('122')

					uni.showToast({
						title: `登录成功!`
					})
					uni.navigateTo({
						url: 'pages/index/index'
					})
				}
			}
		}
	}
</script>

<style>
	.login-bg {
		width: 100%;
	}

	.login-bg image {
		width: 100upx;
		vertical-align: bottom;
	}

	.login-page {
		height: 750rpx;
		background-color: #fff;
	}

	.login-shadow {
		border-radius: 50upx 50upx 0 0;
		box-shadow: 0px -10px 20px 2px rgba(0, 0, 0, 0.06);
		margin-top: -50upx;
		position: relative;
		z-index: 2;
	}

	.bg-mask {
		background-color: transparent;
	}

	.bg-mask::after {
		background-color: transparent;
	}

	.yu-input {
		background: #FAFAFA
	}
</style>
