<template>
	<view>
		<dHeader :title="$lang.lang.editPsd.control"></dHeader>
		<view class="start-bar"></view>
		<view class="login-item">
		<!-- #ifdef H5 -->
		<input type="password" style='width:0;height:0;min-height:0'/>
		<input type="text" autocomplete="off" style='width:0;height:0;min-height:0'/>
		<!-- #endif -->
			<view class="login-v">
				<view class="login-vp login-phone">
					<view class="login-area">
						<view class="uni-input">{{$request.checkAddIcon(userInfo.areaCode)}}</view>
					</view>
					<input class="vp-input" autocomplete="off" disabled v-model="userInfo.mobile" type="number"  :placeholder="$lang.lang.notices.phone">
				</view>
			</view>
			<view class="login-v">
				<view class="login-vp">
					<input class="vp-input" autocomplete="off" v-model="code" type="number"  :placeholder="$lang.lang.notices.code">
					<view class="login-code" v-if="leftTime < 60">{{leftTime}}S</view>
					<picker class="login-code" :range="smsName" @change="sendCode" v-else>
					  <view class="uni-input">{{ $lang.lang.editEmail.code }}</view>
					</picker>
				</view>
			</view>
			<view class="login-vp login-v">
				<input class="vp-input" autocomplete="off" v-model="password" type="password" maxlength="32"   :placeholder="$lang.lang.notices.numPsd">
			</view>
			<view class="login-vp login-v">
				<input class="vp-input" autocomplete="off" v-model="password2" type="password" maxlength="32"  :placeholder="$lang.lang.notices.nextPsd">
			</view>
		</view>
		<view class="set-btns">
			<view class="" @click="register">{{$lang.lang.editPsd.edit}}</view>
			<view class="" @click="toback">{{$lang.lang.order.cancel}}</view>
		</view>
	</view>
</template>

<script>
	import dHeader from '../../components/dHeader/index.vue'
	export default {
		components: {
			dHeader
		},
		data() {
			return {
				areaIndex: 0,
				areaIndexs:0,
				newIndex:0,
				mobile: '',
				code: '',
				agree: false,
				areaData: [],
				areaName: [],
				leftTime: 60,
				password:'',
				password2:'',
				userInfo:'',
				smsName: ['SMS','WhatsApp'],
				smsData: [1,2],
				smsIndex: 0
			}
		},
		onLoad() {
			this.Country()
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$request.get('/app-api/member/user/get').then(res => {
					if(res.code==0&&res.data){
						this.userInfo = res.data
					}
				})
			},
			Country () {
				let that = this
				that.$request.get('/app-api/ecw/country/list-all').then(res => {
					if(res.code == 0 && res.data.length > 0){
						for(let i in res.data){
							that.areaData.push(res.data[i].tel)
              that.areaName.push('+'+res.data[i].tel + ' ' + res.data[i][that.$lang.name])
						}
					}
				})
			},
			sendCode (e) {
				if (this.leftTime < 60) {
					return false
				}
				var data = {
				  mobile: this.userInfo.mobile,
				  nodeValue: 'user-sms-reset-password',
				  areaCode: this.userInfo.areaCode,
				  code: this.userInfo.areaCode,
				  isTransport: 0,
				  transportId: 0,
				  isOrders: 0,
				  messageType: this.smsData[e.detail.value]
				}
				this.$request.get('/app-api/param/validator/mobile',data).then(res => {
					if(res.code==0){
						this.$request.post('/app-api/member/send-sms-code', data).then(res => {
							if(res.code == 0){
								this.countDown()
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
							}
						})
					}else{
						 uni.showToast({
							title: this.$lang.lang.notices.nophone,
							icon: 'error',
						})
					}
				})
			},
			countDown() {
				this.leftTime--
				if (this.leftTime > 0) {
					setTimeout(this.countDown, 1000)
				} else {
					this.leftTime = 60
				}
			},
			areaChange (e) {
				this.areaIndex = e.detail.value
			},
			areaChanges (e) {
				this.areaIndexs = e.detail.value
			},
			toback(){
				uni.navigateBack()
			},
			register () {
				let params = {
					mobile: this.userInfo.mobile,
					code: this.code,
					password:this.password
				}
				if(this.code == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.code,
						icon: 'error',
					})
				}
				if(this.password == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.newPsd,
						icon: 'error',
					})
				}else{
					var reg1 = new RegExp('^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,32})$')
					if (!reg1.test(this.password)) {
						return uni.showToast({
							title: this.$lang.lang.notices.numPsd,
							icon: 'error',
						})
					}
				}
				if(this.password2 == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.newPsd,
						icon: 'error',
					})
				}
				if(this.password!=this.password2){
					return uni.showToast({
						title: this.$lang.lang.notices.different,
						icon: 'none',
					})
				}

				this.$request.post('/app-api/member/reset-control-password', params).then(res => {
					if(res.code == 0&&res.data){
						uni.showToast({
							title:this.$lang.lang.notices.edited,
							icon: 'none',
						})
						setTimeout(()=>{
							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;
}
.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: left;
	font-size: var(--f30);
	/* background-color: #27417C; */
	border-radius: 60upx;
	height: 50upx;
	margin-top: 24upx;
	//padding: 0 10upx;
	margin-right: 20upx;
	font-size: var(--f26);
  min-width: 12%;
}
.login-phone .login-area text{
	margin-right: 10upx;
}
/* .vp-input::input-placeholder{
	color:var(--c0);
} */
.vp-input{
	margin-top: 30upx;
	width: 86%;
	font-size: var(--f26);
}

.set-btns{
	margin: 0 auto;
	margin-top: 100upx;
	padding: 0 50upx;
	display: flex;
	width: 80%;
	align-items: center;
	justify-content: space-between;
}
.set-btns view{
	width:40%;
	border-radius: 12upx;
	color: var(--c0);
	font-size: 28upx;
	text-align: center;
	padding: 18upx 0;
	background-color: #016EF6;
}
.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>