<template>
	<view class="wrapper">
		
		<view class="title font-36 font-bold ml-4">欢迎来到{{storeInfo.shop_name || '格利专属小程序'}}</view>
		
		<view class="input-wrap">
			<view class="item">
				<input
					class="font-28 py-2"
					:type="form.lgtype === 3 ? 'text' : 'number'"
					:placeholder="userPlachelder"
					v-model="form.user"
				/>
			</view>
			
			<view class="item" v-show="form.lgtype === 2">
				<input
					class="font-28 py-2"
					type="text"
					placeholder="请输入验证码"
					v-model="form.yzm" 
				/>
				<view 
					class="sms-btn font-28 py-2" 
					@click="handleSms"
					:class="smsDisabled ? 'disabledSmsBtn' : null" 
				>{{smsMsg}}</view>
			</view>
			
			<view class="item" v-show="form.lgtype === 3">
				<input
					class="font-28 py-2"
					type="password"
					placeholder="请输入密码"
					v-model="form.pwd" 
				/>
			</view>
			
			<view class="clearfix">
				<view class="forget font-24 py-1" @click="handleForget">忘记密码</view>
			</view>
			
			<view class="login-btn login-btn_active">短信验证码注册/登录</view>
			<view class="login-btn">密码登录</view>
		</view>
		
		
		<view class="agreement-wrap text-center">
			<view class="wx-login_title mb-2">微信快捷登录</view>
			<label for="getPhone">
				<image class="wx-login_icon mb-4" src="/static/images/common/icon_wx.png" mode="aspectFit" />
			</label>
			<view class="agreement flex j-start a-center">
				<text class="mr-1">同意</text>
				<navigator
					class="agr_text"
					hover-class="none"
					url="/subPages/web-view/index?url=wxxcx/agreement.htm"
				>《格利食品网平台服务协议》</navigator>
			</view>
		</view>
		
		<button
			style="display: absolute; z-index: -1;opacity: 0;"
			id="getPhone"
			open-type="getPhoneNumber" 
			@getphonenumber="getPhoneNumber"
		></button>
		<!-- <view>
			<input 
				:type="form.lgtype === 3 ? 'text' : 'number'"
				:placeholder="userPlachelder"
				v-model="form.user"
			/>
		</view>
		
		<view v-show="form.lgtype === 2">
			<input
				type="text"
				placeholder="请输入验证码"
				v-model="form.yzm" 
			/>
			<button @click="handleSms">{{smsMsg}}</button>
		</view>
		
		<view v-show="form.lgtype === 3">
			<input
				type="password"
				placeholder="请输入密码"
				v-model="form.pwd" 
			/>
		</view>
		
		<view>
			<button :class="form.lgtype === 2 ? 'btn_active' : null" type="default" @click="handleLogin(2)">短信验证码注册登录</button>
			<button :class="form.lgtype === 1 ? 'btn_active' : null" open-type="getPhoneNumber" @click="handleLogin(1)" @getphonenumber="getPhoneNumber">微信快捷登录</button>
			<button :class="form.lgtype === 3 ? 'btn_active' : null" type="default" @click="handleLogin(3)">密码登录</button>
		</view>
		
		
		<button type="default" >忘记密码</button> -->
		
	</view>
</template>

<script>
import common from './common.js'
import { timerFn } from '@/utils/common.js'
import { loginSms } from '@/apis/user.js'
import { mapState, mapActions } from 'vuex'

const userPlachelderStr = {
	1: '',
	2: '请输入手机号码',
	3: '请输入用户名'
}
export default {
	data() {
		return {
			smsDisabled: false, // sms按钮是否禁用
			smsMsg: '获取验证码',
			form: {
				lgtype: 2, // 1微信登录 2短信验证码登录 3账号密码登录
				user: '',
				yzm: '',
				pwd: ''
			}
		}
	},
	computed: {
		...mapState({
			session_key: state => state.user.session_key,
			openid: state => state.user.openid,
			storeInfo: state => state.user.storeInfo
		}),
		userPlachelder() {
			return userPlachelderStr[this.form.lgtype]
		}
	},
	methods: {
		...common,
		...mapActions('user', ['login']),
		
		async handleLogin(type) { 
			if(type !== this.form.lgtype) return this.$set(this.form, 'lgtype', type)
			switch (type) {
				case 2:
					const smsValidaErr = this.smsValidate()
					if(smsValidaErr) return this.$toast({title: smsValidaErr})
					this.loginCommon(this.form)
					break;
				case 3:
					const accoutValidaErr = this.accoutValidate()
					if(accoutValidaErr) return this.$toast({title: accoutValidaErr})
					this.loginCommon(this.form)
					break;
				default:
					break;
			}
		},
		
		
		getPhoneNumber (e) {
			if(e.detail.errMsg === 'getPhoneNumber:fail user deny') return
			const { iv, encryptedData } = e.detail
			this.loginCommon({
				lgtype: 1,
				encryptedData,
				iv,
				session_key: this.session_key
			})
		 },
		 
		// 获取验证码
		async handleSms() {
			try{
				if(this.smsDisabled) return console.log('验证码倒计时中')
				const valiErr = this.phoneValidate()
				if(valiErr) return this.$toast({title: valiErr})
				const res = await loginSms(this.form.user)
				timerFn(60, num => {
					if(num <= 0) {
						this.smsDisabled = false
						this.smsMsg = '重新获取'
					} else {
						this.smsDisabled = true
						this.smsMsg = `${num}S重试`
					}
				})
				// console.log(res)
			}catch(e){
				console.log(e)
				this.$toast({title: e.msg || '程序错误'})
			}
		},

		handleForget() {
			uni.navigateTo({
				url: `/subPages/resetPwd/index`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.wrapper {
	background-color: #fff;
	border-top: 1rpx solid $line;
	.title {
		padding-top: 80rpx;
		margin-bottom: 190rpx;
	}
	
	.input-wrap {
		width: 550rpx;
		margin: 0 auto;
		.item {
			position: relative;
			border-bottom: 1rpx solid $line;
			.sms-btn {
				position: absolute;
				right: 0;
				top: 50%;
				z-index: 20;
				transform: translateY(-50%);
				background-color: #fff;
				color: $primary;
			}
			.disabledSmsBtn {
				color: $desc;
			}
		}
		.forget {
			display: inline-block;
			float: right;
			color: $primary;
		}
		.login-btn {
			width: 360rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			margin: 40rpx auto 40rpx;
			border-radius: 8rpx;
			background-color: $mainBg;
		}
		.login-btn_active {
			color: #fff;
			background-color: $primary;
		}
	}
	
	.agreement-wrap {
		position: fixed;
		left: 50%;
		bottom: 48rpx;
		transform: translateX(-50%);
		font-size: 20rpx;
		.wx-login_icon {
			display: inline-block;
			width: 88rpx;
			height: 88rpx;
			border-radius: 8rpx;
			background-color: #fff;
		}
		.agr_text {
			color: $primary;
		}
	}
}
	
	
	
	
.btn_active {
	background-color: yellow;
}
.test {
	position: fixed;
	right: 20rpx;
	top: 20rpx;
	z-index: 2;
}
</style>