<template>
	<view class="login">
		<view class="status_bar">
		</view>
		<view class="top">
			<image class="icon-logo" src="../../static/image/logo@3x.png" mode="aspectFit"></image>
			<text class="title">五粮液易商</text>
		</view>
		<view class="middle">
			<view class="account-block" v-show="loginType==='password'">
				<input class="account" type="text" v-model="account" placeholder="请输入账号"
					placeholder-class='placeholder-text' />
			</view>
			<view class="password-block" v-show="loginType==='password'">
				<template v-if="!passwordVisible">
					<input class="password" type="password" v-model="password" placeholder="请输入密码"
						placeholder-class='placeholder-text' />
					<image class="icon-visible" src="../../static/image/visible@3x.png" mode="aspectFit"
						@click="handlePasswordVisible"></image>
				</template>
				<template v-else>
					<input class="password" type="text" v-model="password" placeholder="请输入密码"
						placeholder-class='placeholder-text' />
					<image class="icon-visible" src="../../static/image/invisible@3x.png" mode="aspectFit"
						@click="handlePasswordVisible"></image>
				</template>
			</view>
			<!-- <view class="account-block" v-show="loginType==='phone'">
				<input class="account" type="tel" v-model="phone" placeholder="请输入手机号"
					placeholder-class='placeholder-text' />
			</view> -->
		</view>
		<view class="bottom">
			<button class="btn" type="default" @click="goLogin" :class="{ 'btn-disabled': disabled }"
				:disabled="disabled"><text class="btn-text">{{loginBtnText}}</text></button>
			<!-- <view class="actions">
				<navigator url="/pages/forgetpassword/forgetpassword">
					<text class="forgetpassword-btn">忘记密码</text>
				</navigator>
				<text class="phone-btn" @click="fnChangeLogin">{{loginWayText}}</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'

	import {
		apiLogin
	} from '@/servers/user.js'


	export default {
		data() {
			return {
				account: '0050000215',
				password: 'DO1tjHPW0Z',
				phone: '',
				code: '',
				loginType: 'password',
				passwordVisible: false,
				disabled: false,
			}
		},
		computed: {
			...mapState(['userInfo']),
			loginWayText() {
				return this.loginType === 'phone' ? '密码登录' : '手机号登录'
			},
			loginBtnText() {
				return this.loginType === 'phone' ? '获取验证码' : '登录'
			}
		},
		watch: {
			phone: {
				handler: function(val) {
					if (this.loginType === 'password') {
						this.disabled = false
						return
					}
					if (/^1\d{10}$/.test(val)) {
						this.disabled = false
					} else {
						this.disabled = true
					}
				},
				immediate: true
			}
		},
		onLoad(option) {
			// console.log('login-option', option)
			// this.loginType = this.option?.loginType || 'password'
			// if (this.loginType === 'password') {
			// 	const {
			// 		account,
			// 		password
			// 	} = this.userInfo
			// 	this.account = account
			// 	this.password = password
			// 	// this.goLogin()
			// } else {
			// 	this.code = this.option.code
			// }
		},
		methods: {
			// 切换密码可见性
			handlePasswordVisible() {
				this.passwordVisible = !this.passwordVisible;
			},
			// 登录
			async goLogin() {
				if (this.loginType === 'phone') {
					uni.navigateTo({
						url: `/pages/forgetpassword/get-captcha?phone=${this.phone}&loginType=${this.loginType}`
					});
				} else {
					const ispass = await this.validate();
					if (!ispass) return;

					const parmas = {
						username: this.account,
						password: this.password,
						loginType: 'App'
					}
					const res = await apiLogin(parmas)
					// const res = {
					// 	status: 1
					// }
					if (res.status === 1) {
						this.$uStore({
							name: 'userInfo',
							value: {
								...res.data.operator
							}
						});
						this.$uStore({
							name: 'vuex_token',
							value: res.data.token
						});
						uni.switchTab({
							url: '/pages/home/home'
						});
					}

				}
			},
			fnChangeLogin() {
				if (this.loginType === 'phone') {
					this.loginType = 'password'
					this.disabled = false
				} else {
					this.loginType = 'phone'
					this.disabled = true
				}

			},
			// 校验input
			validate() {
				return new Promise((resolve, reject) => {
					let flag = true;
					if (this.account == "") {
						flag = false;
						uni.showToast({
							title: '输入账户不规范',
							icon: 'none',
							duration: 1500
						});
					} else if (this.password == '') {
						flag = false;
						uni.showToast({
							title: '输入密码不规范',
							icon: 'none',
							duration: 1500
						});
					}

					resolve(flag);
				})
			},
			...mapMutations(["$uStore"]),
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		flex-direction: column;
		padding: 0 40rpx;
	}

	// .status_bar {
	// 	height: var(--status-bar-height);
	// }

	.top {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.icon-logo {
		width: 128rpx;
		height: 128rpx;
		margin: 88rpx 0 48rpx;
	}

	.title {
		font-size: 20px;
		color: $text-base-color;
	}

	.middle {
		display: flex;
		flex-direction: column;
		margin: 100rpx 0 56rpx;
	}

	/deep/.placeholder-text {
		font-size: 34rpx;
		color: $wly-palcehold-color;
	}

	.account {
		flex: 1;
		color: $text-base-color;
		height: 100rpx;
		border-bottom: 1px solid #cfcfcf;
		padding-left: 12rpx;
	}

	.password {
		flex: 1;
		color: $text-base-color;
		height: 100rpx;
		border-bottom: 1px solid #cfcfcf;
		padding-left: 12rpx;
	}

	.password-block {
		position: relative;
		height: 100rpx;
	}

	.icon-visible {
		position: absolute;
		right: 24rpx;
		top: 50rpx;
		z-index: 10;
		width: 21px;
		height: 14px;
		margin-top: -7px;
	}

	.bottom {
		display: flex;
		flex-direction: column;
	}

	.btn {
		height: 92rpx;
		background: $wly-primary-color;
		border-radius: 46rpx;
	}

	.btn-disabled {
		background: rgba(255, 29, 50, 0.50) !important;
		color: #fff !important;
	}

	.btn-text {
		color: #fff;
		font-size: 34rpx;
	}

	.actions {
		margin-top: 36rpx;
		justify-content: space-between;
	}

	.forgetpassword-btn {
		font-size: 28rpx;
		color: $wly-palcehold-color;
	}

	.phone-btn {
		font-size: 28rpx;
		color: #666660;
	}
</style>
