<template>
	<view class="content">
		<view class="container">
			<view class="my-header">
				<view class="my-icons" @click="goBack"> <uni-icons type="left" size="16"></uni-icons> </view>
				<view class="my-text">{{title}}</view>
				<view class="my-icons"></view>
			</view>
			
			<!-- 修改用户昵称 -->
			<view v-if="editType == 0" class="pBox">
				<u-form :model="form" ref="uForm">
					<u-form-item label="昵称" prop="name">
						<u-input v-model="form.name" clearable :border="false" placeholder="请填写昵称"/>
					</u-form-item>
				</u-form>
				<view class="but-sub" @click="submit">提交保存</view>
			</view>
			
			<!-- 修改用户手机号 -->
			<view v-if="editType == 1" class="pBox">
				<u-form :model="form" ref="uForm">
					<u-form-item label="手机号" prop="mobile" label-width="70px">
						<u-input v-model="mobile" clearable :border="false" placeholder="请填写手机号"/>
					</u-form-item>
					<u-form-item label="验证码" prop="code" label-width="70px">
						<u-input v-model="code" clearable :border="false" placeholder="请填写验证码"/>
						<u-button slot="right" :disabled="isCode" size="mini" type="success" @click="getCode">{{codeText}}</u-button>
					</u-form-item>
				</u-form>
				<view class="but-sub" @click="submit">保存变更</view>
			</view>
			
			<!-- 修改用户车牌号 -->
			<view v-if="editType == 2" class="pBox">
				<view></view>
				<u-form :model="form" ref="uForm">
					<u-form-item label="车牌号" prop="mobile" label-width="70px">
						<u-input v-model="form.carNo" @focus="show = true" clearable :border="false" placeholder="请输入车牌号"/>
					</u-form-item>
				</u-form>
				<view class="but-sub" @click="submit">保存</view>
			</view>
			<!-- <u-keyboard ref="uKeyboard" :tips="value" mode="number" @cancel="show = false" @confirm="submitAmount" -->
				<!-- @change="valChange" @backspace="backspace" v-model="pic" :show="show" mode="car"></u-keyboard> -->
			<u-keyboard ref="uKeyboard" mode="car" v-model="value" :show="show" @cancel="show = false" 
				@confirm="submitAmount" @change="valChange" @backspace="backspace" :tips="value"></u-keyboard>
		</view>
	</view>
</template>

<script>
	import request from "../../utils/request";
	export default {
		data() {
			return {
				pic:0,
				value:"",
				show:false,
				// 标题
				title: '修改昵称',
				// 修改类型
				editType:2,
				// 提交表单
				form:{},
				// 手机号
				mobile: "",
				// 验证码
				code:"",
				codeText: '获取验证码',
				// 是否正在获取验证码
				isCode:false,
				timestamp:60,
				rules: {
					name: [
						{
							required: true,message: '请填写昵称',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						}
					],
					mobile: [
						{ required: true, message: '请输入手机号', trigger: ['change','blur'], },
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		onLoad(e) {
			this.editType = e.editType
			if (this.editType == 0){
				this.title = "修改昵称"
			}else if(this.editType == 1){
				this.title = "修改手机号"
			}else if(this.editType == 2){
				this.title = "我的车"
			}else{
				this.title = "支付密码"
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			this.getUser()
		},
		components: {

		},
		methods: {
			// 数字键盘确定按钮
			submitAmount(){
				if (this.value!=""){
					this.show = false
				}else{
					uni.showToast({
						title:"请输入车牌号",
						icon:"error"
					})
				}
			},
			valChange(val) {
				// 按键震动
				uni.vibrateShort({
					success: function () {}
				});
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.value += val;
				this.form.carNo += val;
			},
			// 退格键被点击
			backspace() {
				uni.vibrateShort({
					success: function () {}
				});
				// 删除value的最后一个字符
				if (this.value.length) {
					this.value = this.value.substr(0, this.value.length - 1);
					this.form.carNo = this.value
				}
			},
			// 倒计时60s
			countdown(){
				let _this = this
				setInterval(() => {
				    // countdown减1
				    _this.timestamp--;
					_this.codeText = _this.timestamp+"秒重新获取"
				    // 如果倒计时为0，清除定时器
				    if(_this.timestamp === 0) {
						_this.isCode = false
						_this.timestamp = 60
				    }
				}, 1000);
			},
			// 获取验证码
			getCode() {
				this.isCode = true
				// 调用后端接口
				this.countdown()
			},
			// 查询当前登录用户信息
			getUser(){
				request({
					url: 'business/userManager/user/getUser',
					method: 'get',
				}).then(res => {
					if (res.data != null && res.data != "" && res.data != undefined) {
						this.form = res.data
					}
				})
			},
			// 提交表单
			submit(){
				// this.$refs.uForm.validate(valid => {
				// 	if (valid) {
				// 		console.log('验证通过');
						request({
							url: 'business/userManager/user/edit',
							method: 'put',
							data:this.form,
						}).then(res => {
							if (res.code == 200) {
								uni.navigateTo({
									url:"/pagesMy/setup/index"
								})
							}
						})
				// 	} else {
				// 		console.log('验证失败');
				// 	}
				// });
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.pBox{
		width: 90%;
		margin: 0 auto;
	}
	.but-sub{
		width: 100%;
		height: 45px;
		line-height: 45px;
		margin: 0 auto;
		margin-top: 20px;
		background-color: #2b7aff;
		color: white;
		border-radius: 10px;
		text-align: center;
	}
	.content {
		background: white;
	}

	.container {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.my-header {
		width: 100%;
		height: 88px;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		box-sizing: border-box;
		padding: 0px 15px;
		padding-top: 40px;

		.my-icons {
			width: 20px;

		}

		position: fixed;
		top: 0px;
	}

	.box-hang {
		background-color: white;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15px 10px;
		border-bottom: 1px solid #f4f5f6;
	}

	.touxiang {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;
		// background-color: #f4f5f6;
	}

	.dis {
		color: #a69999;
	}
</style>