<template>
	<view>
		<u-navbar :placeholder="true" @leftClick="goHome" title="审核结果" bgColor="#fff"></u-navbar>
		<view class="flex flex-center icon_wrapper" v-if="formData.status != null">
			<text v-if="formData.status == 0" class="zyhs zyhs-shenhezhong"></text>
			<text v-if="formData.status == 1" class="zyhs zyhs-chenggong"></text>
			<text v-if="formData.status == 2" class="zyhs zyhs-shibai"></text>
			<text v-if="formData.status == 3" class="zyhs zyhs-shenhezhong"></text>
		</view>
		<view class="flex flex-center">
			<text v-if="formData.status == 0">您的申请已提交正在审核</text>
			<text v-if="formData.status == 1">实名认证已通过</text>
			<text v-if="formData.status == 2">
				认证失败，请及时修改
				<text class="color-red flex f-b font28 flex-center reason">{{ formData.why }}</text>
			</text>
			<text v-if="formData.status == 3">您的申请{{ formData.why }}不合格，请及时修改</text>
		</view>
		<view class="realname-Info">
			<view class="form-container">
				<!-- 姓名 -->
				<view class="form-item">
					<view class="form-label">姓名</view>
					<view class="form-input-container">
						<view class="form-value"
						:style="{color: formData.status == 2 ? '#333' : '#9b9b9b'}">{{ formData.realName || '--' }}</view>
					</view>
				</view>
				
				<!-- 身份证号 -->
				<view class="form-item">
					<view class="form-label">身份证号</view>
					<view class="form-input-container">
						<view class="form-value"
						:style="{color: formData.status == 2 ? '#333' : '#9b9b9b'}">{{ formData.idCard || '--' }}</view>
					</view>
				</view>
				
				<!-- 手机号 -->
				<view class="form-item">
					<view class="form-label">手机号</view>
					<view class="form-input-container phone-container">
						<view class="form-value"
						:style="{color: formData.status == 2 ? '#333' : '#9b9b9b'}">{{ formData.phone || '--' }}</view>
						<button 
							v-if="formData.status == 1" 
							class="modify-btn" 
							@click="modifyPhone"
							size="mini"
							type="primary"
						>
							修改
						</button>
					</view>
				</view>
				
				<!-- 地址 -->
				<view class="form-item address-item">
					<view class="form-label">地址</view>
					<view class="form-input-container">
						<view class="form-value"
						:style="{color: formData.status == 2 ? '#333' : '#9b9b9b'}">{{ formData.address || '--' }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-gap height="50rpx"></u-gap>
		<view class="confirm-btn">
			<u-button v-if="formData.status == 2" @click="handlerEdit" text="点击修改" type="primary"></u-button>
			<!-- <u-button v-else @click="goHome" text="返回" type="primary"></u-button> -->
		</view>

		<!-- 修改实名手机号弹窗 -->
		<u-popup 
			:show="showModifyPhonePopup" 
			mode="center" 
			width="600rpx" 
			border-radius="20" 
			@close="closePopup" 
			@open="openPopup"
			:round="15"
			:closeable="true"
			>
			<view class="modify-phone-popup">
				<view class="popup-header">
					<view class="popup-title">修改实名手机号</view>
				</view>
				
				<view class="popup-content">
					<!-- 原手机号 -->
					<view class="form-item">
						<view class="form-label">原手机号</view>
						<view class="form-input-container">
							<input 
								type="number" 
								:maxlength="11" 
								placeholder="请输入原手机号" 
								v-model="modifyPhoneForm.oldPhone"
								class="form-input"
								disabled="true"
								style="color: #9b9b9b;"
							/>
						</view>
					</view>
					
					<!-- 原手机号验证码 -->
					<view class="form-item">
						<view class="form-label">验证码</view>
						<view class="form-input-container flex flex-center">
							<input 
								type="number" 
								:maxlength="6" 
								placeholder="请输入短信验证码" 
								v-model="modifyPhoneForm.oldCode"
								class="form-input code-input"
							/>
							<sms :phone="modifyPhoneForm.oldPhone" typeCode="5"></sms>
						</view>
					</view>
					
					<!-- 新手机号 -->
					<view class="form-item">
						<view class="form-label">新手机号</view>
						<view class="form-input-container">
							<input 
								type="number" 
								:maxlength="11" 
								placeholder="请输入新手机号" 
								v-model="modifyPhoneForm.phone"
								class="form-input"
							/>
						</view>
					</view>
					
					<!-- 新手机号验证码 -->
					<view class="form-item">
						<view class="form-label">验证码</view>
						<view class="form-input-container flex flex-center">
							<input 
								type="number" 
								:maxlength="6" 
								placeholder="请输入短信验证码" 
								v-model="modifyPhoneForm.code"
								class="form-input code-input"
							/>
							<sms :phone="modifyPhoneForm.phone" typeCode="0"></sms>
						</view>
					</view>
				</view>
				
				<view class="popup-footer">
					<u-button 
						type="primary" 
						text="提交修改" 
						@click="submitModifyPhone"
						:custom-style="{width: '70%', borderRadius: '10rpx'}"
					></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import sms from "@/components/sms.vue";
	import url from '@/common/http/url.js';
	import { regIdCard, regCn } from '@/utils/regular.js';
	import { getApplyAuth } from "@/api/system/user"
	
	export default {
		components: { sms },
		data() {
			return {
				// formData: {
				// 	realName: '',
				// 	idCard: '',
				// 	phone: '',
				// 	address: ''
				// },
				// 修改手机号弹窗相关
				showModifyPhonePopup: false,
				modifyPhoneForm: {
					oldPhone: '',
					oldCode: '',
					phone: '',
					code: ''
				},
				formData: {},
				status: null
			};
		},
		onLoad(e) {
			// this.formData = JSON.parse(e.result);
			// this.getVerifyInfo();
			this.applyAuth()
		},
		methods: {
			applyAuth() {
				getApplyAuth({}).then(res => {
					this.formData = res.data;
					this.status = res.data.status;
				})
			},
			getVerifyInfo() {
				this.$http('GET', url.user.getVerifyInfo).then(({ code, data }) => {
					if (code == 200) {
						if (data) {
							this.formData = data;
							this.status = data.status;
						}
					}
				})
			},
			handlerEdit () {
				uni.setStorageSync('auth-result', this.formData)
				// let path = '/pages/user/authentication/authentication?result=' + JSON.stringify(this.formData)
				let path = '/pages/user/authentication/authentication'
				this.$navigateTo(path)
			},
			goHome () {
				// uni.reLaunch({
				// 	url: '/pages/user/index'
				// })
				uni.navigateBack();
			},
			modifyPhone() {
				// 初始化表单数据
				this.modifyPhoneForm = {
					oldPhone: this.formData.phone || '',
					oldCode: '',
					phone: '',
					code: ''
				};
				this.showModifyPhonePopup = true;
			},
			openPopup() {
				console.log('修改手机号弹窗已打开');
			},
			closePopup() {
				this.showModifyPhonePopup = false;
				// 重置表单数据
				this.modifyPhoneForm = {
					oldPhone: '',
					oldCode: '',
					phone: '',
					code: ''
				};
			},
			// 提交修改手机号
			submitModifyPhone() {
				// 表单验证
				if (!this.modifyPhoneForm.oldPhone) return this.$msg('请输入原手机号')
				if (!this.modifyPhoneForm.oldCode) return this.$msg('请输入原手机号验证码')
				if (!this.modifyPhoneForm.phone) return this.$msg('请输入新手机号')
				if (!this.modifyPhoneForm.code) return this.$msg('请输入新手机号验证码')
				
				// 显示加载状态
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				
				// 构建请求参数
				const requestData = {
					oldPhone: this.modifyPhoneForm.oldPhone,
					oldCode: this.modifyPhoneForm.oldCode,
					phone: this.modifyPhoneForm.phone,
					code: this.modifyPhoneForm.code
				};

				this.$httpJson('POST', url.user.modifyVerifyMobile, requestData).then(({ code, msg }) => {
					// 成功场景：拦截器不会主动关闭loading，这里手动关闭
					uni.hideLoading();
					// this.$msg(msg);
					if (code == 200) {
						this.formData.phone = this.modifyPhoneForm.phone;
						// 修改成功，刷新页面数据并关闭弹窗
						this.closePopup();
						setTimeout(() => {
							this.$msg('手机号修改成功');
						}, 500);
					}
				}).catch(error => {
					uni.hideLoading();
					console.error('修改手机号失败:', error);
					this.$msg(error.msg || '修改失败，请重试');
				});
			},
		}
	}
</script>

<style lang="scss">
	.icon_wrapper {
		padding: 45rpx 15rpx;
	}
	.zyhs {
		font-size: 90rpx;
	}
	.zyhs-shibai {
		color: rgb(234, 57, 48);
	}
	.zyhs-chenggong {
		color: #28A745;
	}
	.zyhs-shenhezhong {
		color: #3c9cff;
	}

	.reason {
		padding-top: 20rpx;
	}

	.realname-Info {
		padding: 20rpx;
		background-color: #fff;
		margin: 24rpx;
		border-radius: 16rpx;
		margin-top: 45rpx;
	}
	
	.form-container {
		padding: 0;
	}
	
	.form-item {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1px solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
	}
	
	.form-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		width: 140rpx;
		flex-shrink: 0;
	}
	
	.form-input-container {
		flex: 1;
	}
	
	.form-input {
		width: 100%;
		height: 60rpx;
		border: none;
		padding: 0;
		font-size: 28rpx;
		color: #333;
		background-color: transparent;
		
		&::placeholder {
			color: #c0c4cc;
		}
	}
	
	.form-textarea {
		width: 100%;
		min-height: 80rpx;
		border: none;
		padding: 0;
		font-size: 28rpx;
		color: #333;
		background-color: transparent;
		resize: none;
		
		&::placeholder {
			color: #c0c4cc;
		}
	}
	
	.form-value {
		font-size: 28rpx;
		// color: #333;
		padding: 10rpx 0;
		min-height: 40rpx;
		min-width: 400rpx;
		line-height: 1.4;
	}
	
	.phone-container {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}
	
	/* 地址项特殊处理，让textarea与其他输入框对齐 */
	.address-item {
		align-items: flex-start;
		
		.form-label {
			padding-top: 10rpx;
		}
		
		.form-value {
			word-break: break-all;
			white-space: pre-wrap;
		}
	}
	
	.phone-input {
		flex: 1;
	}
	
	.modify-btn {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
		padding: 0;
	}

	.confirm-btn {
		display: flex;
		align-items: center;
		margin: 0 20%;
		height: 84upx;
		line-height: 84rpx;
	}

	.modify-phone-popup {
		padding: 40rpx;
		width: 600rpx;
		
		.popup-header {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 40rpx;
			
			.popup-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
		}
		
		.popup-content {
			.form-group {
				margin-bottom: 30rpx;
				
				.form-label {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 16rpx;
					font-weight: 500;
				}
				
				.form-item {
					background-color: #f5f5f5;
					border-radius: 12rpx;
					padding: 20rpx;
					
					.form-input {
						width: 100%;
						height: 60rpx;
						border: none;
						background: transparent;
						font-size: 28rpx;
						color: #333;
						
						&::placeholder {
							color: #999;
						}
					}
				}
			}
		}
		
		.popup-footer {
			margin-top: 40rpx;
		}
	}
</style>
