<template>
	<view>
		<dHeader :title="$lang.lang.changeTel.edit"></dHeader>
		<view class="start-bar"></view>
		<view class="login-item">
			<view class="login-v">
<!-- 				<view class="login-vs">
					<image src="../../static/img/phone.png" mode=""></image>
				</view> -->
				<view class="login-vp login-phone">
					<view class="login-area">
<!-- 						<picker :value="areaIndex" :range="areaName" @change="areaChange">
							<view class="uni-input">{{areaData[areaIndex]}}</view>
						</picker> -->
						<text>{{$request.checkAddIcon(userInfo.areaCode)||0}}</text>
						<image src="../../static/img/down1.png" mode=""></image>
					</view>
					<input class="vp-input" v-model="oldMobile" disabled type="number"  :placeholder="$lang.lang.notices.phone">
				</view>
			</view>
			<view class="login-v">
				<view class="login-vp login-phone">
					<view class="login-area">
						<picker :value="areaIndexs" :range="areaName" @change="areaChanges">
							<view class="uni-input">{{$request.checkAddIcon(areaData[areaIndexs])}}</view>
						</picker>
						<image src="../../static/img/down1.png" mode=""></image>
					</view>
					<input class="vp-input" v-model="mobile" type="number"  :placeholder="$lang.lang.notices.newPhone">
				</view>
			</view>
			<view class="login-v">
<!-- 				<view class="login-vs">
					<image src="../../static/img/code.png" mode=""></image>
				</view> -->
				<view class="login-vp">
					<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-vp login-v">
				<input class="vp-input" v-model="password" type="password"  :placeholder="$lang.lang.notices.password">
			</view>


		</view>
		<view class="agree" >
			<checkbox :checked="agree"  @click="agree = !agree" style="transform:scale(0.7)"></checkbox>
			<view>{{$lang.lang.notices.read}}<text>《{{$lang.lang.notices.service}}》</text></view>
		</view>
		<view class="login-btns">
			<view class="" @click="register">{{$lang.lang.changeTel.bind}}</view>
		</view>
		<view class="desc">
			<image src="../../static/img/helps.png" mode=""></image>
			<view class="">{{$lang.lang.notices.contact}}<text class="red">	400-900-9962</text></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,
				password:'',
				areaData: [],
				areaName: [],
				leftTime: 60,
				oldMobile:'',
				userInfo:{}
			}
		},
		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
						this.oldMobile = this.userInfo.mobile
					}

				})
			},
			ismobile(code,mobile){
				this.$request.get('/app-api/param/validator/mobile',{code:code,mobile:mobile}).then(res => {
					if(res.code==0){
						this.$request.post('/app-api/member/send-sms-code', {areaCode: this.areaData[this.areaIndexs], mobile: this.mobile, scene: 2}).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',
						})
					}
				})
			},
			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)
							if(that.$lang.locale=='zh'){
								that.areaName.push('+'+res.data[i].tel + ' ' + res.data[i].nameZh)
							}else{
								that.areaName.push('+'+res.data[i].tel + ' ' + res.data[i].nameEn)
							}
						}
					}
				})
			},
			sendCode () {
				if(this.mobile == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.phone,
						icon: 'error',
					})
				}
				if (this.leftTime < 60) {
					return false
				}
				this.ismobile(this.areaData[this.areaIndexs],this.mobile)
			},
			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
			},
			register () {
				let params = {
					areaCode: this.areaData[this.areaIndexs],
					code: this.code,
					oldMobile: this.oldMobile,
					mobile: this.mobile,
					password: this.password,
				}
				if(this.oldMobile == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.phone,
						icon: 'error',
					})
				}
				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.password,
						icon: 'error',
					})
				}
				if(this.mobile == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.newPhone,
						icon: 'error',
					})
				}
				if(!this.agree){
					return uni.showToast({
						title: this.$lang.lang.notices.chooseService,
						icon: 'none',
					})
				}
				this.$request.post('/app-api/member/user/update-mobile', params).then(res => {
					if(res.code == 0){
						uni.showToast({
							title:'修改成功',
							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;
}
.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);
	width: 20%;
}
.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);
}

.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: 4% auto 0;
	width: 96%;
	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>