<template>
	<view class="edit-mobile" :style="vuex_theme">
		<view class="form input_warp">
			<u-form :model="form" :error-type="errorType" ref="uForm">
				<u-form-item prop="phone">
					<u-input v-model="form.phone" @input="handleInput" placeholderStyle="color:rgba(0,0,0,0.45)" placeholder="请输入手机号码" />
				</u-form-item>
				<u-form-item prop="code">
					<u-input v-model="form.code" @input="handleInput" placeholderStyle="color:rgba(0,0,0,0.45)" placeholder="请输入验证码" />
					<u-button type="default" size="mini" slot="right" :hair-line="false"
						:custom-style="{color:'var(--primary-color)', border:'none',fontSize:'34rpx'}" @click="getCode">{{codeText}}
					</u-button>
					<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
				</u-form-item>
			</u-form>
			<view class="tips">*变更成功后需重新登录</view>
			<view class="button_warp">
				<c-button type="confirm" shape="circle" @click="submit" :disabled="disabled" text="提交"></c-button>
			</view>
		</view>

		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType: ['toast'],
				disabled: true,
				codeText: '发送验证码',
				detailObj: {},
				form: {
					phone: '',
					code: '',

				},
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '请输入正确的手机号'
						},
					],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.code(value, '4');
						},
						message: '请输入正确的验证码'
					}, ],
				},
			}
		},

		onLoad(option) {

		},

		onShow() {
			this.getResumeDetail()
			this.isReqing()
		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		methods: {
			
			isReqing() {
				let that = this
				this.$u.api.getappealsaveMsgUrl().then(res => {
					if (res) {
						uni.showModal({
							title: '您已提交申诉',
							content: '预计1~3个工作日处理完毕，请耐心等待~',
							confirmText: "撤销申诉",
							cancelText: "取消",
							success: function(res1) {
								if (res1.confirm) {
									that.cancleappeal(res.id)
								} else if (res1.cancel) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
					}
				})
			},
			
			cancleappeal(e) {
				this.$u.api.putcancleappealUrl(e).then(res => {
					if (res) {
						this.$u.toast('申诉撤销成功');
					}
				})
				
			},
			
			handleInput(value) {
				const {
					phone = '', code = ''
				} = this.form;
			
				if (phone && code) {
					this.disabled = false;
				} else {
					this.disabled = true;
				}
			},
			
			codeChange(text) {
				this.codeText = text;
			},
			
			getCode() {
				const {
					phone = ''
				} = this.form;
				
				if (!(phone && /^1[0-9]{10}$/.test(phone))) {
					this.$refs.uToast.show({
						title: '请填写正确手机号',
						type: 'error',
						duration: 1500,
					})

				} else {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();

							this.$u.api.getSmsCodeApi({
								phone: phone
							})

						}, 1000);
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				}
			},
			
			getResumeDetail() {
				this.$u.api.getResumeDetailApi().then(res => {
					this.detailObj = res;
					console.log(res, '------')
				})
			},
			
			submit() {
				let that = this
				
				if (this.detailObj && this.detailObj.id) {
					this.form.resumeId = this.detailObj.id
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.api.updateUserInfoApi({
							...this.form,
							type: 'phone',
							userType:'student'
						}).then(async res => {
							console.log(res,'123')
							if (res) {
								
								if (res.code == 500 && res.msg == '该手机号已注册') {
									uni.showModal({
										title: '提示',
										content: '该手机号已被占用',
										confirmText: "立即申诉",
										cancelText: "取消",
										// showCancel: false,
										success: function(res) {
											if (res.confirm) {
												that.$u.route({
													url: "/pages/student/my/edit-mobileDetail/edit-mobileDetail",
													params: {
														phone: that.form.phone,
														type: '1'
													},
												});
											} else if (res.cancel) {
											}
										}
									});
									return
								}
						
								uni.showToast({
									title: '修改手机号码成功',
									icon: 'success',
									duration: 2000
								});
						
								const {
									dispatch
								} = this.$store;
								
								await dispatch(`user/loginOut`).then(res => {
									uni.$u.route({
										url: 'pages/student/tabBar/home/home',
										// type: 'switchTab',
									})
								});
							}
						})
					} else {
						console.log('验证失败');
					}
				});		
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edit-mobile /deep/ .u-input__input {
		font-size: 34rpx;
	}
	
	.edit-mobile {
		padding: 0 28rpx;

		.form {
			.tips {
				font-size: 34rpx;
				color: rgba(0, 0, 0, 0.45);
				margin: 36rpx 0 78rpx 0;
			}
		}
	}
</style>