<template>
	<view class="login-page bg-white">
		<view class="image login-bg">
			<image src="https://www.51xingka.net/LSMOIL/static/img/login-logo.png" mode="widthFix"></image>
		</view>
		<scroll-view scroll-x class=" bg-white nav padding  ">
			<view class="flex text-center padding-bottom">
				<view class="cu-item  flex-sub" :class="0==TabCur?'text-red cur':''" @tap="tabSelect(0)">
					个人账号
				</view>
				<view class="cu-item  flex-sub" :class="1==TabCur?'text-red cur':''" @tap="tabSelect(1)">
					企业账号
				</view>
			</view>

			<form v-if="0==TabCur">
				<view class="cu-form-group padding-top">
					<view class="title">手机号码</view>
					<input placeholder="请输入手机号码" label="手机号" v-model="driver.phone" type="number" name="input"></input>
				</view>
				<view class="cu-form-group" v-if="accuntSource">
					<view class="title">密码</view>
					<input placeholder="请输入密码" type="password" v-model="password" name="input"></input>
				</view>
				<view class="cu-form-group" v-else>
					<view class="title">验证码</view>
					<input placeholder="请输入验证码" type="number" v-model="driver.random" name="input"></input>
					<view class='oil-main-color' @tap="reqRandom"> 发送验证码</view>
				</view>

				<view class="cu-form-group">
					<view class="" v-if="accuntSource" @tap="accuntSourceSelect">
						验证码登录
					</view>
					<view class="" v-else @tap="accuntSourceSelect">
						密码登录
					</view>
					<!-- <view class="" v-if="!accuntSource">
						忘记密码
					</view> -->
				</view>
				<view class="padding flex flex-direction">
					<button v-if="accuntSource" class="cu-btn bg-main-oil  lg" @tap="login('wechatOilPersonal')">
						登录 / 注册
					</button>
					<button v-else class="cu-btn bg-main-oil  lg" @tap="login('wechatOilCompany')">
						登录
					</button>
				</view>
			</form>
			<form v-if="1==TabCur">
				<view class="cu-form-group padding-top">
					<view class="title">手机号码</view>
					<input name="手机号" label="手机号" type="number" placeholder="请输入企业下绑定手机号" v-model="driver.phone"></input>
				</view>

				<view class="cu-form-group" v-if="accuntSource">
					<view class="title">密码</view>
					<input placeholder="请输入密码" type="password" v-model="password"></input>
				</view>
				<view class="cu-form-group" v-else>
					<view class="title">验证码</view>
					<input placeholder="请输入验证码" type="number" v-model="driver.random"></input>
					<view class='oil-main-color'> 发送验证码</view>
				</view>
				<view class="cu-form-group">
					<view class="" v-if="accuntSource" @tap="accuntSourceSelect">
						验证码登录
					</view>
					<view class="" v-else @tap="accuntSourceSelect">
						密码登录
					</view>
					<!-- <view class="" v-if="!accuntSource">
						忘记密码
					</view> -->
				</view>
				<view class="padding flex flex-direction">
					<button v-if="accuntSource" class="cu-btn bg-main-oil  lg" @tap="login('wechatOilCompany')">
						登录 / 注册
					</button>
					<button v-else class="cu-btn bg-main-oil  lg" @tap="login('wechatOilCompany')">
						登录
					</button>
				</view>

			</form>
			<view class=" flex flex-direction">
				<button class="cu-btn margin bg-main-oil  lg" @tap="skipLogin">
					跳过
				</button>
			</view>

		</scroll-view>

		<view class="cu-load load-modal" v-if="loadModal">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<!-- <image src="/static/logo.png" mode="aspectFit"></image> -->
			<view class="gray-text">加载中...</view>
		</view>

		<loginBottom />
	</view>
</template>

<script>
	import uniteApi from '@/api/unite'
	import weixinApi from '@/api/weixin'
	import loginBottom from './components/loginBottom.vue'
	import {
		setToken
	} from '@/utils/auth'

	export default {
		components: {
			loginBottom
		},
		data() {
			return {
				TabCur: 0,
				accuntSource: false,
				loadModal: false,
				active: 0,
				password: "",
				random: '',
				IMEI: '1235455',
				driver: {},
			}
		},
		methods: {
			skipLogin() {
				console.log('111')
				uni.navigateTo({
					url: '../index/index'
				})
			},
			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'
					}


					uniteApi.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'
					})
				}
			},
			login(accountSource) {
				var pwdData = {
					...this.driver,
					accountSource: accountSource,
					serviceCode: 'LSM_REGISTER_OR_LOGIN',
					IMEI: this.IMEI
				}
				console.log('pwdData', pwdData)
				uniteApi.api(pwdData).then(res => {
					console.log('pwdData', pwdData)
					this.ifSuccess(res.code, res.data.data)
					setToken(res.data.token)
				})

			},
			tabSelect(e) {
				this.TabCur = e;
			},
			accuntSourceSelect() {
				this.accuntSource = !this.accuntSource
			},
			ifSuccess(code, data) {
				if (code === '1000') {
					// // // // console.log('122')

					uni.showToast({
						title: `登录成功!`
					})
					uni.navigateTo({
						url: 'pages/index/index'
					})
					// // // // console.log(data)
					//         this.$cookies.set('baseDriver', {
					//           dirverId: data.dirverId,
					//           IMEI: data.IMEI,
					//           token: data.token,
					//           phone: data.phone
					//         }, 60 * 60 * 3)
					//         this.$store.commit('SET_BASEDRIVER', {
					//           dirverId: data.dirverId,
					//           IMEI: data.IMEI,
					//           token: data.token,
					//           phone: data.phone
					//         })
					//         this.$store.commit('SET_DRIVER', data)

					//         this.$store.commit('SET_HEAD', data.headPortrait)
					//         if (data.oilPlateNumber) {
					//           this.$store.commit('SET_CARNO', data.oilPlateNumber)
					//         }
					//         this.$store.commit('SET_ACTIVE', 0)

					//         // // // // console.log(data.IMEI)
					//         this.$cookies.set('accountType', this.active === 0 ? 'wechatOilPersonal' : 'wechatOilCompany')

					//         this.$cookies.set('driver', data, 60 * 60 * 3)
					//         // this.$router.push('/')
					//         this.$router.go('-1')
				}
			}
		}
	}
</script>

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

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

	.login-page {
		height: 750rpx;
		background-color: #fff;
	}
</style>
