<template>
	<view class="main">
		<navBar navTitle="" :hasLogo="true" :hasRight="true" :backToUrl="'/pages/mine/setting/setting'" 
			@clickRight="clickRight" :color="'#000000'" :backBackGroundColor="'#3D553D'" />
		<u-code :seconds="seconds" @start="start" ref="uCode"
		 :start-text="$t('code.start')"
		 :change-text="$t('code.change')"
		 :end-text="$t('code.end')"
		 @change="codeChange"></u-code>
		<view class="info">
			<view class="item">
				<view class="lable">{{$t('phone.old')}}</view>
				<view class="gray">{{ telNum }}</view>
			</view>
			<u-divider></u-divider>
			<view class="item">
				<view class="lable">{{$t('phone.code')}}</view>
				<view style="margin-left: 30upx;">
					<u--input style="width: 130upx;" border="none" v-model="code" type="number"></u--input>
				</view>
				<view class="resend" @tap="getCode">{{ tips }}</view>
			</view>
		</view>
		<view style="color: #717171; text-align: right;font-size: 10rpx;margin-right:56rpx;margin-top:16rpx">*{{$t('update.phone.title')}}</view>
		<view class="info" style="height: 120upx;">
			<view class="item">
				<view class="lable">{{$t('phone.new')}}</view>
				<view style="margin-left: 30upx;">
					<u--input style="width: 200upx; color:#878787" :placeholder="$t('input.pla')" border="none" v-model="newTelNum" type="number"></u--input>
				</view>
			</view>
		</view>
		<u-button :text="$t('save.update')" color="#699A70" @click="changePhone" class="btn" style=""></u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tips: '',
			// refCode: null,
			seconds: 60,
			wathTime: 10,
			code: '',
			focus: false,
			telNum: '',
			newTelNum: ''
		};
	},
	onLoad(opt) {
		this.telNum = opt.telNum
	},
	methods: {
		cancel() {
			uni.navigateTo({
				url: '/pages/mine/setting/setting'
			});
		},
		codeChange(text) {
			this.tips = text;
		},
		async getCode() {
			if (this.$refs.uCode.canGetCode) {
				uni.showLoading({
					title: this.$t('sendCode.loading')
				});

				let res = await this.$api.mine.mineCode();
				if (res.status === 0) {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.focus = true;
					this.$refs.uCode.start();
					// 通知验证码组件内部开始倒计时
				} else {
					uni.hideLoading();
					uni.$u.toast(res.msg);
				}
			} else {
				uni.$u.toast(this.$t('sendCode.toast'));
			}
		},
		start() {
			uni.$u.toast(this.$t('sendCode'));
		},
		async changePhone(){
			if(!this.code || !this.newTelNum){
				uni.$u.toast(this.$t('input.phoneCode'));
				return
			}
			let data = {code:this.code,newTelNum:this.newTelNum}
			let res = await this.$api.mine.verifyCode(data);
			if (res.status === 0) {
				uni.navigateTo({
					url: '/pages/login/sendCode/sendCode?token='+res.data.token+'&newNum='+this.newTelNum
				});
			} else {
				
				uni.$u.toast(res.msg);
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background: url('@/static/image/home/new_bg.png') no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	height: 100vh;
	box-sizing: border-box;
	position: relative;
}
.main {
	display: grid;
	justify-content: center;
	/deep/.uni-input-input{
		color: #878787;
	}
	.title {
		margin-top: 40upx;
		display: flex;
		justify-content: center;
		image {
			width: 201upx;
			height: 60upx;
		}
	}
	.btn {
		height: 56rpx;
		width: 600upx;
		border-radius: 40rpx;
		margin-top: 30rpx;
		position: absolute;
		bottom: 120upx;
		left: 10%;
	}
	.cancel {
		text-align: center;
		height: 56rpx;
		width: 600upx;
		border-radius: 40rpx;
		margin-top: 30rpx;
		position: absolute;
		bottom: 40upx;
		left: 10%;
	}
}
.info {
	box-sizing: border-box;
	border-radius: 8rpx;
	width: 650upx;
	height: 218upx;
	background: #FFFFFF;
	margin: 65rpx 50rpx 0 50rpx;
	
	padding: 0 65rpx 0 65rpx;
	.item {
		font-size: 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40upx;
		.rz {
			margin-left: 10upx;
			font-size: 28rpx;
			background-color: #558bf2;
			width: 60upx;

			border-radius: 40upx;
			padding: 0upx 20upx 4upx 20upx;
		}
	}
	.lable{
		color: #434343;
	}
	.gray {
		color: #878787;
	}
	/deep/ .u-input__content__field-wrapper__field {
		color: #fff !important;
	}
	.resend {
		color: #699A70;
	}
}
</style>
