<template>
	<view class="container">
	  <view class="item">
	    <view class="item-title">{{content.title}}</view>
	    <!-- 修改支付密码输入框 -->
	    <input v-if="content.type === 'pay'" class="input-desc" :value="cellPhone" type="number" maxlength="11" data-name='phone' @input="handerChangeClick" :placeholder='content.defultDesc' />
			
	    <!-- 修改登录密码输入框 -->
	    <input v-if="content.type === 'login'" class="input-desc" password :value="cellPhone" data-name='phone' @input="handerChangeClick" :placeholder='content.defultDesc' />
	  </view>
		
	  <view class="item">
	    <view class="item-title">{{content.subTitle}}</view>
	    <input class="input-desc" :value="passWord" data-name='pwd' password @input="handerChangeClick" :placeholder="content.defultSubDesc" />
	  </view>
	  <view class="tips">
	    <text class="desc">提示：</text>
	    如果您是微信登录的账户，请直接填写新密码，然后点击确认修改即可设置登录密码
	  </view>
	
	  <!-- 修改支付密码禁用规则： 手机号不存在 或者 手机号不足11位 或者 密码不存在 则禁止点击 -->
	  <button
	    v-if="content.type === 'pay'"
	    class="submit_reset"
	    :disabled='!cellPhone || cellPhone.length !== 11 || !passWord'
	    @click="handleSubmit"
	  >
	    确认{{content.btnText}}
	  </button>
	  <!-- 修改登录密码禁用规则：新密码不存在 或者 确认密码不存在 则禁止点击 -->
	  <button
	    v-if="content.type === 'login'"
	    class="submit_reset"
	    :disabled='!cellPhone || !passWord'
	    @click="handleSubmit"
	  >
	    确认{{content.btnText}}
	  </button>
		
		<nav-footer />
	</view>

</template>

<script>
	import { request } from '../../../utils/index';
	import { pageOptionType } from './constant';
	import { apiArr } from '../../../api/user';
	
	export default {
		data() {
			return {
				cellPhone: null,
				passWord: null,
				type: '',
				content:{},
			}
		},
		methods: {
			// 修改输入框值
			handerChangeClick(event) {
				const {value} = event.detail;
				const {name} = event.currentTarget.dataset;
				if (name === 'phone') {
					this.cellPhone = value;
				};
				if (name === 'pwd') {
					this.passWord = value;
				}
			},
			
			
			// 提交修改
			async handleSubmit() {
				/**
				 * 参数场景说明：
				 *    修改登录密码页面时，cellPhone 是新设密码，passWord 是确认密码
				 *    修改支付密码页面时，cellPhone 是已绑定手机号，passWord 是支付密码
				*/
				const {cellPhone, passWord, type} = this;
				
				if (type === 'login') {
					if (cellPhone !== passWord) {
						uni.showToast({
						  title: '新密码与确认密码不一致',
						  icon: 'none',
						  duration: 2000
						});
						return
					}
					const res = await request(apiArr.modifyPass, "POST", {
						new_password: cellPhone,
						conform_password: passWord,
					});
					
					uni.showToast({
					  title: '修改登录密码成功',
					  icon: 'success',
					  success () {
					    setTimeout(() => {
					      uni.navigateBack({
					        delta: 1
					      })
					    }, 2000)
					  }
					})
				}
				
				if (type === 'pay') {
					const res = await request(apiArr.payPass, "POST", {
						mobile: cellPhone,
						pay_password: passWord,
					});
					
					uni.showToast({
					  title: '设置支付密码成功',
					  icon: 'success',
					  success () {
					    setTimeout(() => {
					      uni.navigateBack({
					        delta: 1
					      })
					    }, 2000)
					  }
					})
			  };
			},
			
			
			
			
		},
		onLoad(options) {
			// 基于父页面传递参数设置页面名称
			uni.setNavigationBarTitle({
				title: options.title
			});
			
			// 根据父页面传递type参数映射页面渲染参数
			this.content = pageOptionType[options.type];
			this.type = options.type;
		},
		onShow() {
			
		}
	}
</script>

<style>
	@import url("./index.css");
</style>