<template>
	<view id="replace-password">
		<view class="form-box phone-box">
			<view class="form-item login-name">
				<view class="iconfont icon-shoujihao"></view>
				<view class="phone-num">
					{{oldPhone}}
				</view>
			</view>
			<view class="form-item login-phone">
				<view class="iconfont icon-yanzhengma"></view>
				<input v-model.trim="oldCode" type="text" placeholder="请输入旧手机验证码" />
				<button type="primary" class="login-phone-btn" @click="verifygetImgCode('old')">获取验证码</button>
			</view>
			<view class="form-item login-name">
				<view class="iconfont icon-shoujihao"></view>
				<input v-model.trim="newPhone" type="text" placeholder="请输入新手机号" />
			</view>
			<view class="form-item login-phone">
				<view class="iconfont icon-yanzhengma"></view>
				<input v-model.trim="newCode" type="text" placeholder="请输入新手机验证码" />
				<button type="primary" class="login-phone-btn" @click="verifygetImgCode('new')">获取验证码</button>
			</view>
		</view>
		<view class="btn">
			<button type="default" @click="submit">确认提交</button>
		</view>
		<u-modal v-model="codeShow" ref="codeModal" async-close title="图片验证码" :mask-close-able="true" @confirm="verifySenCode">
			<view class="slot-content imgCodeModel-content" >
				<view class="imgCodeModel-content-title">
					<image slot="right" style="width: 500rpx;height:150rpx" @click="getImgCodeTxt"  :src="imgCodePath" mode=""></image>
				</view>
				<view class="imgCodeModel-content-input">
					<u-input border class="login-input" type="text" v-model="imgCodeTxt" c
						laceholder-style="font-size:36rpx" placeholder="请输入图片验证码" />
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import NavBar from '@/common/components/navbar/NavBar.vue'
	export default {
		data() {
			return {
				infoData:{},
				// 手机号及验证码
				oldPhone:'',
				oldCode:'',
				newPhone:'',
				newCode:'',
				// 图片验证码弹窗
				codeShow:false,
				imgPhone:'',
				imgCodePath:'',
				imgCodeKey:'',
				imgCodeTxt:'',
			}
		},
		components: {
			NavBar
		},
		onLoad() {
			this.infoData = uni.getStorageSync('userInfo');
			// this.oldPhone = this.infoData.mobile;
			this.oldPhone = '17859911022';
		},
		onShow() {

		},
		methods: {
			verifygetImgCode(type){
				console.log("获取验证码1")
				if(type == 'old'){
					this.imgPhone = this.oldPhone;
				}else{
					this.imgPhone = this.newPhone;
				}
				
				if(!this.imgPhone){
					this.$refs.uToast.show({
						title: '请先输入手机号',
						type: 'error',
					})
				}else if(!this.$u.test.mobile(this.imgPhone)){
					this.$refs.uToast.show({
						title: '请先输入正确的手机号',
						type: 'error',
					})
				}else{
					this.getImgCodeTxt();
				}
			},
			getImgCodeTxt(){
				let opt = {
					url: '/user/admin/site/captcha',
					method: 'GET',
					header: {
					},
				};
				this.$request.TokenRequest(opt, {}).then(res => {
					if(res.code == 0){
						this.imgCodeKey = res.data.cid;
						this.imgCodePath = res.data.base64;
						this.imgCodeTxt = '';
						// 获取图片验证码
						this.codeShow = true;
					}else{
						this.$u.toast(res.message);
					}
				}, error => {
					this.$u.toast('服务器开小差了呢，请您稍后再试')
				})
			},
			submit(){
				if(this.verification()){
					let opt = {
						url: '/user/admin/member/updatePwd',
						method: "POST",
					}
					let params={
						id:this.infoData.id,
						newPassword:this.newPassword,
						oldPassword:this.oldPassword,
					}
					this.$request.TokenRequest(opt,params).then(res => {
						console.log("submit",res);
						if(res.code==0){
							this.$u.toast(res.message);
							this.$store.commit('setTokenKey', '');
							uni.$u.toast('退出登录成功');
							uni.removeStorageSync('token')
							uni.removeStorageSync('password')
							setTimeout(()=>{
								uni.reLaunch({
									url:"../tabbar/login"
								})
								return;
							},200)
						}else{
							this.$u.toast(res.message);
						}
					}, error => {
						this.$u.toast('服务器开小差了呢，请您稍后再试')
					})
				}
			},
			//	表单验证
			verification(){
				if(!this.oldPhone){
					this.$refs.uToast.show({
						title: '没有获取到旧手机号!',
						type: 'error',
					})
					return false;
				}else if(!this.$u.test.mobile(this.oldPhone)){
					this.$refs.uToast.show({
						title: '旧手机号错误!',
						type: 'error',
					})
					return false;
				}else if(!this.oldCode){
					this.$refs.uToast.show({
						title: '请输入旧手机验证码!',
						type: 'error',
					})
					return false;
				}else if(!this.newPhone){
					this.$refs.uToast.show({
						title: '请输入新手机号!',
						type: 'error',
					})
					return false;
				}else if(!this.$u.test.mobile(this.newPhone)){
					this.$refs.uToast.show({
						title: '请输入正确的新手机号!',
						type: 'error',
					})
					return false;
				}else if(!this.newCode){
					this.$refs.uToast.show({
						title: '请输入新手机验证码!',
						type: 'error',
					})
					return false;
				}else if(this.oldPhone==this.newPhone){
					this.$refs.uToast.show({
						title: '换绑手机号和旧手机号相同!',
						type: 'error',
					})
					return false;
				}else{
					console.log('true',true)
					return true;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	#replace-password{
		.form-box{
			padding: 0 30rpx;
			.form-item {
				height: 126rpx;
				border-bottom: 1px solid #ddd;
				display: flex;
				align-items: center;
				padding: 0 21rpx;
			
				.iconfont {
					&:first-of-type {
						font-size: 50rpx;
						color: #45a5ff;
						font-weight: 550;
					}
				}
				input {
					width: 500rpx;
					padding-left: 20rpx;
				}
				&.login-phone{
					input {
						width: 350rpx;
						padding-left: 20rpx;
					}
					.login-phone-btn{
						font-size: 30rpx;
						background: #2F7EFD;
						margin-right: 0;
					}
				}
				.phone-num{
					padding-left: 20rpx;
				}
			}
		}
		
	}
	.btn{
		display: flex;
		justify-content: center;
		height: 142rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		button{
			width: 690rpx;
			height: 90rpx;
			background: #3683FD;
			border-radius: 43rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.imgCodeModel-content{
		padding: 10rpx 50rpx;
	}
</style>
