<template>
	<view class="page-content padding">
		<view class="flex-col">
			<view class="label">手机号码</view>
			<input v-model="form.username" maxlength="11" placeholder="手机号码" class="zd-input"></input>
		</view>
		<view class="flex-col">
			<view class="label">密码</view>
			<view class="zd-input flex align-center justify-between">
				<input v-model="form.password" placeholder="密码" maxlength="8" :password="!showPassword" >
					
				</input>
				<text style="font-size: 40rpx;" :class="[showPassword ? 'cuIcon-unlock' : 'cuIcon-lock']"
										@click="changePassword"></text>
			</view>
			
			
		</view>
		<button class="cu-btn bg-zd btn" @click="submitForm">登录</button>
	</view>
</template>

<script>
	import {
		barLogin,
		getUserInfo
	} from '@/api/login.js'
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				showPassword: false,
			};
		},
		methods: {
			changePassword: function() {
			            this.showPassword = !this.showPassword;
			        },
			submitForm() {
				if (!this.form.username) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return
				}
				let reg = /^1[3456789]\d{9}$/
				if (!reg.test(this.form.username)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				if (!this.form.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '登录中'
				})
				barLogin(this.form).then(res => {
					if (res.code == 200) {
						uni.setStorageSync('token', res.token)
						this.getUserInfoFun()
					}
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			},
			// 获取用户信息
			getUserInfoFun() {
				getUserInfo().then(res => {
					uni.hideLoading()
					if (res.user && res.user.barId) {
						this.userInfo = res.user
						uni.setStorageSync('userInfo', res.user)
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})
						setTimeout(() => {
							// 进入首页
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1000)
					} else {
						uni.showModal({
							title: '提示',
							content: '您还未入驻，请选入驻',
							showCancel: true,
							success: (res) => {
								if (res.confirm) {
									console.log('确定')
									uni.redirectTo({
										url: '/pages/index/chooseLogin'
									})
								}
							}
						})
					}

					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		padding: 48rpx;
		background-color: #FDFDFD;
		min-height: 100vh;

		.label {
			color: #000;
			margin-bottom: 26rpx;
			font-size: 24rpx;
			font-weight: 500;
		}

		.zd-input {
			width: 654rpx;
			height: 96rpx;
			border-radius: 16rpx;
			background-color: #FFF;
			padding: 0 30rpx;
			box-sizing: border-box;
			color: #000;
			margin-bottom: 56rpx;
			border: 1px solid #C8C8C8;
		}

		.btn {
			width: 654rpx;
			height: 104rpx;
			border-radius: 30rpx;
			margin: 30rpx auto;
			// box-shadow: 0px 10px 24px 0px rgba(43, 45, 51, 0.2);
		}
	}
</style>