<template>
	<view class="zk-login">
		<view class="zk-login-app">
			<image class="zk-login-app-close" src="/static/user/left.png" @click="closeClick"></image>
			<image class="zk-login-app-logo" :src="config.logo" mode=""></image>
			<text class="zk-login-app-name">{{config.name}}</text>
		</view>
		<swiper disable-touch :current="swiperCurrent" class="zk-login-swiper" duration="300">
			<swiper-item>
				<view class="zk-login-cont">
					<view class="zk-login-cont-list">
						<image class="zk-login-cont-left" src="/static/user/phone.png" mode=""></image>
						<input class="zk-login-cont-input" v-model="widget.phone" @input="inputChange" @blur="blurChange" @focus="inputChange" value="" placeholder="请输入手机号" />
						<image class="zk-login-cont-cancel" src="/static/user/cancel.png" @click="cancelClick" v-if="cancel" mode=""></image>
					</view>
					<view class="zk-login-cont-list">
						<image class="zk-login-cont-left" src="/static/user/psw.png" mode=""></image>
						<input v-if="isPsw" class="zk-login-cont-input" v-model="widget.password" type="text" @blur="blurChange" @focus="inputChange" placeholder="请输入密码"/>
						<input v-else class="zk-login-cont-input" v-model="widget.password" type="password" @blur="blurChange" @focus="inputChange" placeholder="请输入密码"/>
						<view @click="isPsw = !isPsw">
							<image class="zk-login-cont-show" v-if="isPsw" src="/static/user/show_psw.png" mode=""></image>
							<image class="zk-login-cont-show" v-else src="/static/user/hid_psw.png" mode=""></image>
						</view>
					</view>
					<x-submit class="zk-login-cont-submit" @click="userLogin($event,'password')">登&nbsp;录</x-submit>
					<view class="zk-login-cont-tips">
						<!-- <view class="zk-login-cont-test" @click="swiperCurrent = 1">验证码登录</view> -->
						<view class="zk-login-cont-test" @click="to('/pages/index?path=user_password_find')">忘记密码</view>
						<view class="zk-login-cont-test" @click="to('pages/user/reg')">免费注册</view>
					</view>
					<view class="zk-login-cont-bottom">登录即代表您已阅读并同意<text class="zk-login-cont-bottom-test" @click="to('/pages/treaty/service/index')">《用户协议》</text>、<text class="zk-login-cont-bottom-test"  @click="to('/pages/base/privacy')">《隐私协议》</text></view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="zk-login-cont">
					<view class="zk-login-cont-list">
						<image class="zk-login-cont-left" src="/static/user/phone.png" mode=""></image>
						<input class="zk-login-cont-input" v-model="widget.phone" @input="inputChange" type="number" @blur="blurChange" @focus="inputChange" value="" placeholder="请输入手机号" />
						<image class="zk-login-cont-cancel" src="/static/user/cancel.png" @click="cancelClick" v-if="cancel" mode=""></image>
					</view>
					<view class="zk-login-cont-verification">
						<view class="zk-login-cont-verification-cont">
							<image class="zk-login-cont-verification-left" src="/static/user/verification.png" mode=""></image>
							<input class="zk-login-cont-verification-input" v-model="widget.code" @input="inputChange" type="number" @blur="blurChange" @focus="inputChange" value="" placeholder="验证码" />
						</view>
						<x-submit class="zk-login-cont-verification-obtain" @click="codeClick">{{verText}}</x-submit>
					</view>
					<x-submit class="zk-login-cont-submit" @click="userLogin">登&nbsp;录</x-submit>
					<view class="zk-login-cont-tips">
						<view class="zk-login-cont-test" @click="swiperCurrent = 0">密码登录</view>
						<view class="zk-login-cont-test" @click="to('pages/user/reg')">免费注册</view>
					</view>
					<view class="zk-login-cont-bottom">登录即代表您已阅读并同意<text class="zk-login-cont-bottom-test" @click="to('/pages/index?path=user_declaration')">《用户协议》</text>、<text class="zk-login-cont-bottom-test"  @click="to('/pages/index?path=user_privacy')">《隐私协议》</text></view>
				</view>
			</swiper-item>
		</swiper>
		<view class="zk-login-lconter" :style="{width: screen.width + 'px', height: screen.height + 'px' }">
			 <image class="zk-login-bg" src="/static/user/bg.jpg" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	import mixin from '@/service/mixins'
	import ala from '@/service/ala'
	import api from '@/service/api'
	import xSubmit from '../../../elements/x-submit/index.vue'
	export default {
		mixins: [mixin],
		components: {
			xSubmit
		},
		data() {
			return {
				cancel: false ,// 是否显示删除按钮
				widget: {
					phone: '',
					code: '',
					password: ''
				},
				config:{
					logo:null,
					name:null
				},
				verText: '获取验证码', // 验证码提示文字
				swiperCurrent: 0,
				isPsw: false
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				if(ala.userIsLogin()===true){
					ala.to('/pages/tabbar/user')
				}
				// ala.keyboardChange()
				this.config.logo = await  api.configLogo()
				this.config.name = await  api.configName()
			},
			closeClick() {
				uni.navigateBack()
			},
			// 失去焦点
			blurChange(ev) {
				this.cancel = false
			},
			// 监听输入框输入 or 聚焦触发
			inputChange(ev) {
				this.cancel = this.widget.phone.length > 0? true : false
			},
			// 获取验证码
			codeClick(ev) {
				let cont = 5
				let timer = setInterval(() =>{
					if (cont > 0) {
						cont--
						this.verText = `获取验证码(${cont})`
					} else {
						this.verText = '重新发送'
						clearInterval(timer)
						this.isClick = true
						ev()
					}
				}, 1000)
			},
			// 密码显示隐藏
			pswClick() {
				// this.
			},
			cancelClick() {
				this.widget.phone = ''
			},
			// 用户登录, 两种登录方式， 验证码和密码登录
			userLogin(taball, type) {
				if (type == 'password') {
					ala.userLogin({
						username: this.widget.phone,
						password: this.widget.password
					})
				} else {
					ala.userCodeLogin({
						username: this.widget.phone,
						code: this.widget.code
					})
				}
				taball()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './var.scss';
</style>
