<template>
	<view class="fe-page">
		<FeMpNavBar title="临时工登记" @back="goBack" />

		<scroll-view scroll-y class="page-scroll" :show-scrollbar="false">
			<view class="page-body">
			<view class="reg-card">
				<view class="reg-head">
					<view class="reg-head__icon">👤</view>
					<text class="reg-head__desc">请填写您的个人信息完成登记</text>
				</view>

				<view class="fe-form-group">
					<text class="fe-form-label">真实姓名 <text style="color:#EF4444;">*</text></text>
					<input class="fe-form-input" v-model="form.realName" placeholder="请输入身份证上的姓名" />
				</view>
				<view class="fe-form-group">
					<text class="fe-form-label">身份证号 <text style="color:#EF4444;">*</text></text>
					<input class="fe-form-input" v-model="form.idCardNo" placeholder="请输入18位身份证号码" />
				</view>
				<view class="fe-form-group">
					<text class="fe-form-label">银行卡号 <text style="color:#EF4444;">*</text></text>
					<input class="fe-form-input" v-model="form.bankAccount" type="number" placeholder="请输入银行卡号" />
				</view>
				<view class="fe-form-group">
					<text class="fe-form-label">开户银行 <text style="color:#EF4444;">*</text></text>
					<input class="fe-form-input" v-model="form.bankName" placeholder="请输入开户银行" />
				</view>
				<view class="fe-form-group">
					<text class="fe-form-label">支行名称</text>
					<input class="fe-form-input" v-model="form.bankBranch" placeholder="请输入支行名称（选填）" />
				</view>

				<label class="reg-agree">
					<checkbox :checked="agreed" @tap="agreed = !agreed" color="#7C3AED" />
					<text>我已阅读并同意 《电子劳动合同》 和 《隐私政策》</text>
				</label>

				<view
					class="fe-btn fe-btn--primary fe-btn--lg fe-btn--full"
					:class="{ 'fe-btn--disabled': submitting }"
					@tap="submit"
				>{{ submitting ? '提交中...' : '✓ 提交登记' }}</view>
				<text class="reg-note">您的信息将被加密存储，仅用于本次用工服务</text>
			</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import FeMpNavBar from '@/components/FeMpNavBar.vue'
import store from '@/common/store.js'
import { showToast } from '@/common/chat-data.js'
import { registerWorker } from '@/api/worker.js'
import { validateForm } from '@/utils/formRules.js'

export default {
	components: { FeMpNavBar },
	data() {
		return {
			agreed: false,
			submitting: false,
			redirectUrl: '',
			draftId: '',
			form: {
				realName: '',
				idCardNo: '',
				bankAccount: '',
				bankName: '',
				bankBranch: ''
			}
		}
	},
	onLoad(options) {
		const opts = options || {}
		if (opts.redirect) {
			try {
				this.redirectUrl = decodeURIComponent(opts.redirect)
			} catch (e) {
				this.redirectUrl = opts.redirect
			}
		}
		if (opts.draftId != null && opts.draftId !== '') {
			this.draftId = String(opts.draftId)
		}
	},
	onShow() {
		const s = store.getState()
		if (!s.loggedIn || s.role !== 'worker') {
			const q = []
			q.push('role=worker')
			if (this.redirectUrl) q.push(`redirect=${encodeURIComponent(this.redirectUrl)}`)
			uni.redirectTo({ url: `/packageA/auth/login?${q.join('&')}` })
			return
		}
		if (store.isWorkerRegistered()) {
			uni.reLaunch({ url: this.redirectUrl || store.getHomeUrl() })
		}
	},
	methods: {
		goBack() {
			if (this.redirectUrl) {
				uni.reLaunch({ url: this.redirectUrl })
				return
			}
			store.logout()
			uni.redirectTo({ url: '/packageA/auth/login?role=worker' })
		},
		submit() {
			if (this.submitting) return

			const validation = validateForm(this.form, {
				realName: { label: '真实姓名', rules: ['realName'] },
				idCardNo: { label: '身份证号', rules: ['idCard'] },
				bankAccount: { label: '银行卡号', rules: ['bankCard'] },
				bankName: { label: '开户银行', rules: ['required'] }
			})
			if (!validation.valid) {
				showToast(validation.message)
				return
			}
			if (!this.agreed) {
				showToast('请先同意《电子劳动合同》和《隐私政策》')
				return
			}

			const payload = {
				realName: this.form.realName.trim(),
				idCardNo: this.form.idCardNo.trim().toUpperCase(),
				bankAccount: this.form.bankAccount.trim(),
				bankName: this.form.bankName.trim(),
				bankBranch: this.form.bankBranch.trim(),
				agreedLaborContract: true,
				agreedPrivacyPolicy: true
			}

			this.submitting = true
			registerWorker(payload)
				.then((res) => {
					store.registerWorker({
						name: (res && res.realName) || payload.realName,
						phone: (res && res.mobileMask) || store.getState().worker.phone
					})
					showToast('登记成功！')
					const nextUrl = this.redirectUrl || store.getHomeUrl()
					setTimeout(() => {
						uni.reLaunch({ url: nextUrl })
					}, 800)
				})
				.catch(() => {})
				.finally(() => {
					this.submitting = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.fe-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
	box-sizing: border-box;
}

.page-scroll {
	flex: 1;
	height: 0;
}

.page-body {
	padding: 32rpx 40rpx 40rpx;
}

.reg-card {
	background: #fff;
	border-radius: $fe-radius-xl;
	padding: 48rpx;
	box-shadow: 0 20rpx 30rpx rgba(0, 0, 0, 0.08);
}

.reg-head {
	text-align: center;
	margin-bottom: 48rpx;
}

.reg-head__icon {
	width: 128rpx;
	height: 128rpx;
	border-radius: 50%;
	background: $fe-primary-bg;
	margin: 0 auto 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 56rpx;
}

.reg-head__desc {
	display: block;
	font-size: 28rpx;
	color: $fe-muted;
	margin-top: 8rpx;
}

.reg-agree {
	display: flex;
	align-items: flex-start;
	gap: 16rpx;
	margin-bottom: 32rpx;
	font-size: 26rpx;
	color: $fe-gray-600;
}

.reg-note {
	display: block;
	text-align: center;
	margin-top: 24rpx;
	font-size: 24rpx;
	color: $fe-gray-400;
}

.fe-btn--disabled {
	opacity: 0.6;
	pointer-events: none;
}
</style>
