<template>
	<view class="password-page">
		<view class="form-list">
			<view class="form-row">
				<text class="row-label">手机号</text>
				<text class="row-value">{{ phoneDisplay }}</text>
			</view>

			<view class="form-row">
				<text class="row-label">验证码</text>
				<input
					class="row-input"
					v-model="code"
					type="number"
					maxlength="6"
					placeholder="请输入验证码"
					placeholder-class="placeholder"
				/>
				<text
					class="code-btn"
					:class="{ disabled: !canSendCode }"
					@click="sendCode"
				>{{ codeBtnText }}</text>
			</view>

			<view class="form-row">
				<text class="row-label">新密码</text>
				<input
					class="row-input"
					v-model="newPassword"
					:password="!showPassword"
					maxlength="20"
					placeholder="8-20位数字/字母组合"
					placeholder-class="placeholder"
				/>
				<view class="eye-btn" @click="showPassword = !showPassword">
					<u-icon :name="showPassword ? 'eye-fill' : 'eye-off'" size="40rpx" color="#999"></u-icon>
				</view>
			</view>
		</view>

		<view
			class="submit-btn"
			:class="{ active: canSubmit }"
			@click="onSubmit"
		>确定</view>
	</view>
</template>

<script>
import { getInfo } from '@/api/index'

export default {
	data() {
		return {
			phone: '18576065113',
			code: '',
			newPassword: '',
			showPassword: false,
			countdown: 0,
			timer: null,
			isSending: false,
			isSubmitting: false,
		}
	},
	computed: {
		phoneDisplay() {
			if (!this.phone) return '+86 '
			const pure = String(this.phone).replace(/\D/g, '')
			if (pure.length === 11) {
				return `+86 ${pure.slice(0, 3)} ${pure.slice(3, 7)} ${pure.slice(7)}`
			}
			return `+86 ${this.phone}`
		},
		canSendCode() {
			return this.phone && this.countdown === 0 && !this.isSending
		},
		codeBtnText() {
			return this.countdown > 0 ? `${this.countdown}s后重发` : '发送验证码'
		},
		canSubmit() {
			return (
				this.phone &&
				this.code.length === 6 &&
				this.validatePassword(this.newPassword) &&
				!this.isSubmitting
			)
		},
	},
	onShow() {
		this.loadPhone()
	},
	beforeDestroy() {
		this.clearTimer()
	},
	methods: {
		loadPhone() {
			const cached = uni.getStorageSync('wx_phone')
			if (cached) {
				this.phone = cached
				return
			}
			getInfo().then(res => {
				if (res.data.code == 200 && res.data.data) {
					const phone = res.data.data.cphone || res.data.data.cPhone || ''
					this.phone = phone
					if (phone) uni.setStorageSync('wx_phone', phone)
				}
			})
		},
		validatePassword(val) {
			return /^[A-Za-z0-9]{8,20}$/.test(val)
		},
		sendCode() {
			if (!this.canSendCode) return
			this.isSending = true
			// 验证码接口待对接
			uni.showToast({ title: '验证码已发送', icon: 'none' })
			this.countdown = 60
			this.timer = setInterval(() => {
				this.countdown--
				if (this.countdown <= 0) this.clearTimer()
			}, 1000)
			this.isSending = false
		},
		clearTimer() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
			this.countdown = 0
		},
		onSubmit() {
			if (!this.canSubmit) return
			if (!this.validatePassword(this.newPassword)) {
				uni.showToast({ title: '8-20位数字/字母组合', icon: 'none' })
				return
			}
			this.isSubmitting = true
			// 修改密码接口待对接
			uni.showToast({ title: '修改密码功能待对接', icon: 'none' })
			this.isSubmitting = false
		},
	},
}
</script>

<style lang="scss" scoped>
.password-page {
	min-height: 100vh;
	background: #fff;
	padding: 0 32rpx;
	box-sizing: border-box;
}

.form-list {
	padding-top: 8rpx;
}

.form-row {
	display: flex;
	align-items: center;
	min-height: 100rpx;
	border-bottom: 1rpx solid #eee;
}

.row-label {
	width: 140rpx;
	flex-shrink: 0;
	font-size: 30rpx;
	color: #333;
}

.row-value {
	flex: 1;
	font-size: 30rpx;
	color: #333;
}

.row-input {
	flex: 1;
	font-size: 30rpx;
	color: #333;
	height: 100rpx;
}

.placeholder {
	color: #ccc;
	font-size: 30rpx;
}

.code-btn {
	flex-shrink: 0;
	font-size: 28rpx;
	color: #0879ff;
	padding-left: 16rpx;

	&.disabled {
		color: #999;
	}
}

.eye-btn {
	flex-shrink: 0;
	padding: 8rpx 0 8rpx 16rpx;
	display: flex;
	align-items: center;
}

.submit-btn {
	margin-top: 80rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	border-radius: 12rpx;
	font-size: 32rpx;
	color: #999;
	background: #f0f0f0;

	&.active {
		color: #333;
		background: #e8e8e8;
	}
}
</style>
