<template>
	<view>
		<dHeader :title="$lang.lang.editEmail.bindEmail"></dHeader>
		<view class="start-bar"></view>
		<view class="login-item">
			<view class="login-vp login-v" v-if="oldMail">
				<text>{{$lang.lang.editEmail.old}}：{{oldMail }}</text>
			</view>
			<view class="login-vp login-v">
				<text>{{$lang.lang.editEmail.new}}：</text>
				<input class="vp-input" v-model="mail" type="text"  :placeholder="$lang.lang.notices.email">
			</view>
			<view class="login-v login-vp">
					<text>{{$lang.lang.editEmail.code}}：</text>
					<input class="vp-input" v-model="code" type="number"  :placeholder="$lang.lang.notices.code">
					<view class="login-code" v-if="leftTime < 60">{{leftTime}}S</view>
					<view class="login-code" v-else @click="sendCode">{{$lang.lang.editEmail.getCode}}</view>
			</view>
		</view>
		<view class="login-btns">
			<view class="" @click="bind">{{$lang.lang.editEmail.bind}}</view>
		</view>
	</view>
</template>

<script>
	import dHeader from '../../components/dHeader/index.vue'
	export default {
		components: {
			dHeader
		},
		data() {
			return {
				mail:'',
				code: '',
				leftTime: 60,
				oldMail:''
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$request.get('/app-api/member/user/get').then(res => {
					if(res.code==0&&res.data){
						this.oldMail = res.data.email
					}
				})
			},
			sendCode () {
				if(this.mail == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.email,
						icon: 'error',
					})
				}
				if (this.leftTime < 60) {
					return false
				}
				this.$request.post('/app-api/member/send-email-code', {email: this.mail}).then(res => {
					if(res.code == 0){
						this.countDown()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}
				})
			},
			countDown() {
				this.leftTime--
				if (this.leftTime > 0) {
					setTimeout(this.countDown, 1000)
				} else {
					this.leftTime = 60
				}
			},
			bind () {
				let params = {
					code: this.code,
					email: this.mail,
				}

				if(this.code == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.code,
						icon: 'error',
					})
				}
				if(this.mail == ''){
					return uni.showToast({
						title:this.$lang.lang.notices.email,
						icon: 'error',
					})
				}else{
					let email_reg = /[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/
					if (!email_reg.test(this.mail)) {
						return uni.showToast({
							title: this.$lang.lang.notices.noEmail,
							icon: 'error',
						})
					} 
				}				
				this.$request.post('/app-api/member/user/bind-email', params).then(res => {
					if(res.code == 0){
						uni.showToast({
							title: this.$lang.lang.notices.bind,
							icon: 'none',
							success() {
								setTimeout(function(){
									uni.navigateBack()
								},2000)
							}
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}
				})
			}
		}
	}
</script>

<style>
page{
	width: 100%;
	background: #f7f7f7;
	padding-top: 200upx;
}
.red{
	color: #E61B00;
}
.login-item{
    border-radius: 20upx;
    background-color: #fff;
    width: 86%;
    margin: 0 auto;
    padding: 3%;
}
.login-v{
	display: flex;
	height: 100upx;
	display: flex;
	align-items: center;
}
.login-v text{
	min-width: 200upx;
}
.login-v image{
	width: 40upx;
	height: 40upx;
}
.login-v .vp-input{
	/* color: var(--c0); */
	/* caret-color: var(--c0); */
	font-size: var(--f26);
}
.login-vs{
	display: flex;
	align-items: center;
	font-size: var(--f30);
	/* color: var(--c0); */
	font-weight: 700;
	margin-right: 20upx;
}
.login-vs image{
	margin-right: 20upx;
	margin-top: 0upx;
}
.login-vp{
	width: 100%;
	border-bottom: 1px solid #e0e0e0;
	position: relative;
}
.login-phone{
	display: flex;
}
.login-phone .login-area{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--f30);
	/* background-color: #27417C; */
	border-radius: 60upx;
	height: 50upx;
	margin-top: 30upx;
	padding: 0 10upx;
	margin-right: 20upx;
	font-size: var(--f26);
}
.login-phone .login-area text{
	margin-right: 10upx;
}
/* .vp-input::input-placeholder{
	color:var(--c0);
} */
.vp-input{
	flex: 1;
	font-size: var(--f26);
}

.login-btns{
	margin-top: 100upx;
	padding: 0 50upx;
}
.login-btns view{
	width: 100%;
	height: 96upx;
	border-radius: 100upx;
	color: var(--c0);
	font-size: 36upx;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(0deg, #2878E0 0%, #016EF6 100%);
	margin-bottom: 60upx;
}
.agree{
	margin: 40upx auto 0;
	width: 100%;
	display: flex;
	align-items: center;
	font-size: var(--f26);
	margin-left: 4%;
	color: #9d9d9d;
	/* color: var(--c0); */
}
.agree image{
	width: 40upx;
	height: 40upx;
	margin-right: 10upx;
	margin-top: 6upx;
}
.login-code{
	position: absolute;
	right: 0;
	color:var(--c0);
	border: 1px solid #e0e0e0;
	top: 20upx;
	padding: 12upx 10px;
	border-radius: 50upx;
	font-size: var(--f24);
	background-color: #3f6bff;
}

.login-area uni-picker	{
	margin-left: 10upx;
	margin-bottom: 4upx;
}
.login-area image{
	width: 30upx;
	height: 30upx;
	margin: 0 10upx;
}
.desc{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--f24);
	color: var(--c6);
}
.desc image{
	width: 48upx;
	height: 48upx;
	margin-top: 4upx;
	margin-right: 10upx;
}
</style>
