<template>
	<view>
		<view class="topLine"></view>
		<view class="phoneWrap">
			<view class="phoneItem">
				<view class="phoneLeft">
					{{handleType == 'resetPwd' ? '手机号' : '绑定手机号'}}
				</view>
				<view class="phoneCenter">
					<input type="text" v-model="param.mobile" placeholder="请输入手机号" placeholder-class="centerInp"/>
				</view>
			</view>
			<view class="phoneItem">
				<view class="phoneLeft">
					验证码
				</view>
				<view class="phoneCenter">
					<input type="text" v-model="param.captcha" placeholder="请输入验证码" placeholder-class="centerInp"/>
				</view>
				<view class="getCodeBtn" @click="getCode">
					{{codeTxt}}
				</view>
			</view>
			<!-- <view style="padding: 32rpx 0;" v-if="handleType == 'resetPwd'">
				<wakary-input type="bottom" @finish="finish"></wakary-input>
			</view> -->
		</view>
		<view class="bottomBtnWrap">
			<view class="bottomBtn" @click="editPhone">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import wakaryInput from '@/components/wakary-input.vue'
	export default{
		data(){
			return{
				userInfo:{},
				handleType:'',
				codeFlag:true,
				codeTxt:"获取验证码",
				param:{
					type:'2',//重置支付密码-1=密码验证，2=手机验证
					pwd:'',//重置支付密码-新密码
					mobile:'',
					event:'resetpaypwd',
					captcha:''
				}
			}
		},
		components:{
			wakaryInput
		},
		onReady() {
			let navTitle
			if(this.handleType == 'resetPwd'){
				navTitle = '重置支付密码'
			}else{
				navTitle = '修改手机号'
			}
			uni.setNavigationBarTitle({
				title:navTitle
			})
		},
		onLoad(option) {
			if(option.handleType != undefined){
				this.handleType = option.handleType
			}
			//获取用户信息
			this.$request('/user/info').then((res)=>{
				this.userInfo = res.data
			})
		},
		methods:{
			editPhone(){
				if(!this.check.telphone(this.param.mobile)){return;}
				if(this.param.captcha == ''){
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return
				}
				/* if(this.handleType == 'resetPwd' && this.param.pwd == ''){
					uni.showToast({
						title:'请输入新密码',
						icon:'none'
					})
					return
				} */
				let url
				let retMsg
				if(this.handleType == 'resetPwd'){
					if(this.userInfo.mobile != this.param.mobile){
						uni.showToast({
							title:'手机号不正确',
							icon:'none'
						})
						return
					}
					url = '/sms/check'
					retMsg = '验证手机号'
				}else{
					url = '/user/changemobile'
					retMsg = '修改手机号'
				}
				this.$request(url,this.param).then((res)=>{
					console.log(retMsg,res)
					if(res.code == 1){
						if(this.handleType == 'resetPwd'){
							uni.navigateTo({
								url:'confirmPayPassword?handleType=resetPwd&mobile='+this.param.mobile+'&captcha='+this.param.captcha
							})
						}else{
							uni.navigateBack({
								delta:1
							})
							setTimeout(()=>{
								uni.showToast({
									title:'修改成功'
								})
							},500)
						}
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			getCode(){
				if(!this.check.telphone(this.param.mobile)){return;}
				if(this.codeFlag==false){
					return;
				}
				this.sendMessage()
			},
			sendMessage(){
				uni.request({
					url:this.apiUrl+"/sms/send",
					method:"GET",
					data:{
						mobile:this.param.mobile,
						event:this.handleType == 'resetPwd' ? 'resetpaypwd' : 'changemobile'
					},
					success: (res) => {
						console.log('发送验证码',res)
						if(res.data.code != 1){
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}else{
							this.codeFlag=false;
							var time = 60
							this.codeTxt="重新获取"+time;
							var timer=setInterval(()=>{
								if(time==1){
									this.codeTxt="获取验证码"
									this.codeFlag=true
									clearInterval(timer)
								}else{
									time--
									this.codeTxt="重新获取"+time;
								}
							},1000)
						}
					}
				})
			},
			finish(e){
				this.param.pwd = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{background: #f8f8f9;}
	.topLine{height: 2rpx;background: rgba(25,24,51,0.06);}
	.phoneWrap{
		padding: 0 32rpx;
		font-size: 28rpx;
		background: #fff;
		.phoneItem{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			.phoneLeft{
				width: 180rpx;
			}
			.phoneCenter{
				flex: 1;
				.centerInp{
					font-size: 28rpx;
				}
			}
			.getCodeBtn{
				width: 174rpx;
				height: 70rpx;
				border: 1rpx solid #35655f;
				border-radius: 11rpx;
				text-align: center;
				line-height: 70rpx;
				color: #35655f;
			}
		}
	}
	.bottomBtnWrap{
		position: fixed;
		width: 100%;
		height: 88rpx;
		bottom: 0;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0rpx -14rpx 44rpx 0rpx rgba(85,123,218,0.08);
		.bottomBtn{
			width: 680rpx;
			height:75rpx;
			background: #35655f;
			text-align: center;
			line-height: 75rpx;
			color: #fff;
			border-radius: 50rpx;
		}
	}
</style>