<template>
	<s-layout title="注册骑手" class="set-userinfo-wrap">
		<view class="page">
			<up-form ref="riderForm" :model="form" :rules="rules" labelPosition="left" labelWidth="90">
				<view class="section-title">基础信息</view>

				<up-form-item label="真实姓名" prop="realName" :required="true">
					<up-input v-model="form.realName" placeholder="请输入您的姓名" />
				</up-form-item>

				<up-form-item label="身份证号" prop="idNo" :required="true">
					<up-input v-model="form.idNo" placeholder="数字开头18位号码" maxlength="18" />
				</up-form-item>

				<up-form-item label="生效日期" prop="birthDate" :required="true">
					<up-datetime-picker hasInput v-model="form.birthDate" mode="date" placeholder="请选择身份证生效日期" />
				</up-form-item>

				<up-form-item label="失效日期" prop="expiryDate" :required="true">
					<view class="expiry-row">
						<up-radio-group v-model="form.expiryMode" direction="horizontal">
							<up-radio name="long" label="长期有效"></up-radio>
							<up-radio name="date" label="选择失效日期"></up-radio>
						</up-radio-group>
						<up-datetime-picker v-if="form.expiryMode === 'date'" hasInput
						 v-model="form.expiryDate" mode="date" placeholder="选择失效日期" />
					</view>
				</up-form-item>

				<up-form-item label="性别" prop="gender" :required="true">
					<up-radio-group v-model="form.gender" direction="horizontal">
						<up-radio name="male" label="男"></up-radio>
						<up-radio name="female" label="女"></up-radio>
					</up-radio-group>
				</up-form-item>

				<up-form-item label="紧急联系人姓名" prop="emergencyName" :required="true">
					<up-input v-model="form.emergencyName" placeholder="请输入" />
				</up-form-item>

				<up-form-item label="紧急联系人手机" prop="emergencyPhone" :required="true">
					<up-input v-model="form.emergencyPhone" placeholder="请输入" type="tel" maxlength="11" />
				</up-form-item>

				<up-form-item label="上传身份证正反面" prop="idImages">
					<view class="upload-row">
						<view class="upload-box">
							<up-upload :max-count="1" :show-file-list="false" @change="onUploadFront">
								<view class="upload-placeholder" v-if="!frontImage">
									<up-icon name="+" />
								</view>
								<up-image v-else :src="frontImage" mode="aspectFill" class="thumb" />
							</up-upload>
							<text class="hint">国徽面</text>
						</view>
						<view class="upload-box">
							<up-upload :max-count="1" :show-file-list="false" @change="onUploadBack">
								<view class="upload-placeholder" v-if="!backImage">
									<up-icon name="+" />
								</view>
								<up-image v-else :src="backImage" mode="aspectFill" class="thumb" />
							</up-upload>
							<text class="hint">人像面</text>
						</view>
					</view>
				</up-form-item>
				
				<view class="section-title">接单选择</view>
				<up-form-item label="职业身份" prop="occupation" :required="true">
					<up-radio-group v-model="form.occupation" direction="horizontal">
						<up-radio name="student" label="在校学生"></up-radio>
						<up-radio name="worker" label="社会人员/职工"></up-radio>
					</up-radio-group>
				</up-form-item>

				<!-- 学生视图：兼职意愿、可兼职时段、健康证 -->
				<template v-if="form.occupation === 'student'">
					<up-form-item label="兼职意愿" prop="partTimeIntent" :required="true">
						<up-picker hasInput :columns="partTimeOptions" v-model="partTimeLabel" @confirm="onPartTimeConfirm"></up-picker>
					</up-form-item>

					<up-form-item label="请选择可兼职时段" prop="partTimePeriods">
						<view class="choose-row" @click="timeShow1 = true">
							<text class="muted">{{ partTimePeriodsLabel }}</text>
							<text class="status" :class="{empty: form.partTimePeriods.length===0}">{{ form.partTimePeriods.length===0 ? '待完善 >' : '已完善' }}</text>
						</view>
					</up-form-item>

					<up-popup :show="timeShow1" mode="bottom" @close="timeShow1 = false">
						<view class="popup-content">
							<view class="popup-header">
								<text>选择可兼职时段</text>
							</view>
						<view class="popup-body">
							<!-- 网格：每行为一天，三段时段按钮可切换选中 -->
							<view class="time-grid">
								<view class="time-row" v-for="(day, dayIndex) in days" :key="dayIndex">
									<view class="day-label">{{ day }}</view>
									<view class="slots">
										<view
											class="slot-btn"
											:class="{selected: isSlotSelected(dayIndex, 0)}"
											@click="toggleSlot(dayIndex, 0)"
											key="m"
										>08:00~13:00</view>
										<view
											class="slot-btn"
											:class="{selected: isSlotSelected(dayIndex, 1)}"
											@click="toggleSlot(dayIndex, 1)"
											key="a"
										>13:00~17:30</view>
										<view
											class="slot-btn"
											:class="{selected: isSlotSelected(dayIndex, 2)}"
											@click="toggleSlot(dayIndex, 2)"
											key="e"
										>17:00~22:30</view>
									</view>
								</view>
							</view>
						</view>
						<view class="popup-footer">
							<up-button plain @click="onCancelTime">取消</up-button>
							<up-button type="primary" @click="onSaveTime">保存</up-button>
						</view>
						</view>
					</up-popup>
				</template>

				<!-- 社会人员/职工视图：类别、意向城市、健康证 -->
				<template v-else>
					<up-form-item label="类别" prop="category" :required="true">
						<up-picker hasInput :columns="categoryOptions" @confirm="onCategoryConfirm">
							<template #trigger>
								<up-input readonly v-model="categoryLabel" placeholder="请选择类别" />
							</template>
						</up-picker>
					</up-form-item>

					<up-form-item label="意向城市" prop="city" :required="true">
						<up-input readonly v-model="cityLabel" placeholder="请选择" @tap="regionShow = true" />
					</up-form-item>
				</template>

				<!-- 健康证（学生/社会人员皆可上传） -->
				<up-form-item label="健康证" prop="healthCert">
					<view class="health-row" @click="openHealthPopup">
						<view class="health-left">上传健康证</view>
						<view class="health-right">
							<up-icon name="arrow-right" color="#6c6c6c" size="21"></up-icon>
						</view>
					</view>
				</up-form-item>

				<view class="submit-row">
					<up-button type="primary" @click="onSubmit">保存并下一步，完善工资结算信息</up-button>
				</view>
			</up-form>
		</view>
		
		<!-- 健康证信息弹框 -->
		<up-popup :show="popupShow" mode="bottom" @close="onCancelHealth" :round="16" safeAreaInsetBottom>
			<view class="health-popup">
				<view class="health-popup-header">
					<text class="title">上传健康证</text>
				</view>
				<view class="health-popup-body">
					<view class="field-row">
						<text class="label">编号：</text>
						<up-input v-model="healthNumber" placeholder="请输入健康证编号" class="field-input" />
					</view>
					<view class="field-row">
						<text class="label">类别：</text>
						<up-input v-model="healthCategory" placeholder="请输入健康证类别" class="field-input" />
					</view>
					<view class="field-row date-row">
						<text class="label">有效日期：</text>
						<up-datetime-picker hasInput v-model="healthValidStart" mode="date" placeholder="年/月/日" class="date-input" />
						<text class="dash"> — </text>
						<up-datetime-picker hasInput v-model="healthValidEnd" mode="date" placeholder="年/月/日" class="date-input" />
					</view>

					<view class="upload-list">
						<text class="upload-title">上传健康证：</text>
						<view class="upload-row-inner">
							<view v-for="(img, idx) in healthImages" :key="idx" class="upload-item">
								<up-image :src="img" class="upload-thumb" mode="aspectFill" />
								<view class="remove-btn" @click.stop="removeHealthImage(idx)">×</view>
							</view>
							<up-upload :max-count="1" :show-file-list="false" @change="onUploadHealth">
								<view class="upload-add" v-if="healthImages.length < 4">
									<up-icon name="+" />
								</view>
							</up-upload>
						</view>
					</view>
				</view>
				<view class="health-popup-footer">
					<up-button plain @click="onCancelHealth">取消</up-button>
					<up-button type="primary" class="save-btn" @click="onSaveHealth">保存</up-button>
				</view>
			</view>
		</up-popup>
		<su-region-picker :show="regionShow" @confirm="onRegionConfirm" @cancel="regionShow = false" />
	</s-layout>
</template>

<script setup>
import { reactive, ref, computed, watch, onBeforeMount } from 'vue'
import AreaApi from '@/sheep/api/system/area';
// import SuRegionPicker from 'sheep/ui/su-region-picker/su-region-picker.vue'

const form = reactive({
	realName: '',
	idNo: '',
	birthDate: '',
	expiryMode: 'long',
	expiryDate: '',
	gender: 'male',
	emergencyName: '',
	emergencyPhone: '',
	idImages: [],
	// 接单选择相关字段
	occupation: 'student',
	partTimeIntent: '',
	partTimePeriods: [],
	healthCert: '',
	// 健康证详情字段（弹窗保存到这里）
	healthCertNumber: '',
	healthCertCategory: '',
	healthCertValidStart: '',
	healthCertValidEnd: '',
	category: '',
	city: '',
})

const timeShow1 = ref(false)
const partTimeOptions = reactive([
	['长期（至少1学期）', '非长期(临时/偶尔兼职)']
])
const partTimeLabel = ref([])
const categoryOptions = [
	['全职', '兼职']
]
const categoryLabel = ref([])
const cityOptions = [
	{ text: '请选择城市', value: '' },
	{ text: '北京市', value: 'beijing' },
	{ text: '上海市', value: 'shanghai' },
]
const cityLabel = ref('')
const regionShow = ref(false)
// 可选时段网格数据与选择状态
const days = ['周日','周一','周二','周三','周四','周五','周六']
const timeSlots = ['08:00~13:00','13:00~17:30','17:00~22:30']
// 使用二维布尔数组表示选择状态：selectedGrid[dayIndex][slotIndex] = true/false
const selectedGrid = reactive(Array.from({ length: days.length }, () => [false, false, false]))
// 弹窗临时副本，打开时拷贝 selectedGrid 到 tempSelected，用于取消恢复
const tempSelected = reactive(Array.from({ length: days.length }, () => [false, false, false]))

const popupShow = ref(false)

function isSlotSelected(dayIndex, slotIndex) {
	return tempSelected[dayIndex][slotIndex]
}

function toggleSlot(dayIndex, slotIndex) {
	tempSelected[dayIndex][slotIndex] = !tempSelected[dayIndex][slotIndex]
}

function onCancelTime() {
	// 恢复原选中状态并关闭弹窗
	for (let i = 0; i < days.length; i++) {
		for (let j = 0; j < timeSlots.length; j++) {
			tempSelected[i][j] = selectedGrid[i][j]
		}
	}
	timeShow1.value = false
}

function onSaveTime() {
	// 将 tempSelected 同步到 selectedGrid 和 form.partTimePeriods（保存为可读文本）
	const selections = []
	for (let i = 0; i < days.length; i++) {
		for (let j = 0; j < timeSlots.length; j++) {
			selectedGrid[i][j] = tempSelected[i][j]
			if (tempSelected[i][j]) {
				selections.push(`${days[i]} ${timeSlots[j]}`)
			}
		}
	}
	form.partTimePeriods = selections
	timeShow1.value = false
}

// 打开弹窗时将当前选择拷贝到 tempSelected
watch(timeShow1, (val) => {
	if (val) {
		for (let i = 0; i < days.length; i++) {
			for (let j = 0; j < timeSlots.length; j++) {
				tempSelected[i][j] = selectedGrid[i][j]
			}
		}
	}
})

const rules = {
	realName: [{ required: true, message: '请输入真实姓名' }],
	idNo: [
		{ required: true, message: '请输入身份证号' },
		{ pattern: /^[0-9A-Za-z]{15,18}$/, message: '请输入正确的身份证号' },
	],
	birthDate: [{ required: true, message: '请选择生效日期' }],
	expiryDate: [
		{
			validator(value) {
				if (form.expiryMode === 'date' && !value) {
					return false
				}
				return true
			},
			message: '请选择失效日期',
		},
	],
	gender: [{ required: true, message: '请选择性别' }],
	emergencyName: [{ required: true, message: '请输入紧急联系人姓名' }],
	emergencyPhone: [
		{ required: true, message: '请输入紧急联系人手机' },
		{ pattern: /^1\d{10}$/, message: '请输入正确的手机号码' },
	],
}

const riderForm = ref(null)
const frontImage = ref('')
const backImage = ref('')
const healthCert = ref('')
// 健康证弹窗临时状态
const healthImages = reactive([])
const healthNumber = ref('')
const healthCategory = ref('')
const healthValidStart = ref('')
const healthValidEnd = ref('')
const partTimePeriodsLabel = computed(() => {
	return form.partTimePeriods.length ? form.partTimePeriods.join('、') : ''
})

function onUploadFront(event) {
	const file = Array.isArray(event) ? event[0] : (event.detail || event)
	const url = file?.url || file?.path || file?.thumb || ''
	frontImage.value = url
	form.idImages = [url, form.idImages[1] || '']
}

function onUploadBack(event) {
	const file = Array.isArray(event) ? event[0] : (event.detail || event)
	const url = file?.url || file?.path || file?.thumb || ''
	backImage.value = url
	form.idImages = [form.idImages[0] || '', url]
}

function onUploadHealth(event) {
	const file = Array.isArray(event) ? event[0] : (event.detail || event)
	const url = file?.url || file?.path || file?.thumb || ''
	if (url) {
		// 限制最多 4 张预览图
		if (healthImages.length < 4) {
			healthImages.push(url)
		}
		healthCert.value = url
		// 保持兼容：form.healthCert 存首张图片（若需要可改为数组）
		form.healthCert = url
	}
}

function onPartTimeConfirm(selected) {
	const first = Array.isArray(selected) ? selected[0] : selected
	if (first && (first.value || first.text)) {
		form.partTimeIntent = first.value || first.text
		partTimeLabel.value = first.text || first.value
	}
}

function onCategoryConfirm(selected) {
	const first = Array.isArray(selected) ? selected[0] : selected
	if (first && (first.value || first.text)) {
		form.category = first.value || first.text
		categoryLabel.value = first.text || first.value
	}
}

function onCityConfirm(selected) {
	const first = Array.isArray(selected) ? selected[0] : selected
	if (first && (first.value || first.text)) {
		form.city = first.value || first.text
		cityLabel.value = first.text || first.value
	}
}

function onRegionConfirm(result) {
	// result: { province_name, province_id, city_name, city_id, district_name, district_id }
	form.city = result
	cityLabel.value = `${result.province_name || ''} ${result.city_name || ''} ${result.district_name || ''}`.trim()
	regionShow.value = false
}

function openHealthPopup() {
	// 从表单恢复到弹窗临时状态
	healthImages.splice(0, healthImages.length)
	if (form.healthCert) {
		healthImages.push(form.healthCert)
	}
	healthNumber.value = form.healthCertNumber || ''
	healthCategory.value = form.healthCertCategory || ''
	healthValidStart.value = form.healthCertValidStart || ''
	healthValidEnd.value = form.healthCertValidEnd || ''
	popupShow.value = true
}

function removeHealthImage(index) {
	if (index >= 0 && index < healthImages.length) {
		healthImages.splice(index, 1)
	}
}

function onCancelHealth() {
	// 直接关闭弹窗，放弃临时更改
	popupShow.value = false
}

function onSaveHealth() {
	// 保存弹窗数据回表单
	form.healthCert = healthImages.length ? healthImages[0] : ''
	healthCert.value = form.healthCert
	form.healthCertNumber = healthNumber.value
	form.healthCertCategory = healthCategory.value
	form.healthCertValidStart = healthValidStart.value
	form.healthCertValidEnd = healthValidEnd.value
	popupShow.value = false
}

async function onSubmit() {
	try {
		await riderForm.value.validate()
		console.log('提交表单', JSON.parse(JSON.stringify(form)))
		// 将已填写的注册信息临时存储，供结算页继续使用
		try {
			uni.setStorageSync('riderFormData', JSON.parse(JSON.stringify(form)))
		} catch (err) {
			console.warn('存储注册信息失败', err)
		}
		// 跳转到工资结算账户信息页面
		uni.navigateTo({ url: '/pages/registered/accountInfo' })
	} catch (e) {
		console.warn('表单校验未通过', e)
	}
}

onBeforeMount(() => {
    if (!!uni.getStorageSync('areaData')) {
      return;
    }
    // 提前加载省市区数据
    AreaApi.getAreaTree().then((res) => {
      if (res.code === 0) {
        uni.setStorageSync('areaData', res.data);
      }
    });
});

</script>

<style lang="scss" scoped>
.page {
	padding: 38rpx;
	background: #fff;
}
.section-title {
	padding: 10px 0;
	color: #666;
	font-weight: 600;
}
.expiry-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.upload-row {
	display: flex;
	gap: 12px;
}
.upload-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.upload-placeholder {
	width: 88px;
	height: 60px;
	border: 1px dashed #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
}
.thumb {
	width: 88px;
	height: 60px;
	border-radius: 4px;
}
.hint {
	margin-top: 6px;
	color: #999;
	font-size: 12px;
}
.submit-row {
	margin-top: 20px;
	display: flex;
	justify-content: center;
}
.time-grid {
	padding: 10px 0;
}
.time-row {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}
.day-label {
	width: 90rpx;
	color: #333;
}
.slots {
	display: flex;
	gap: 10px;
	flex: 1;
}
.slot-btn {
	padding: 8px 12px;
	border-radius: 6px;
	background: #f5f5f5;
	color: #333;
	font-size: 24rpx;
}
.slot-btn.selected {
	background: #09aaff;
	color: #fff;
}
.popup-footer {
	display: flex;
	gap: 10px;
	padding: 12px;
	justify-content: space-between;
}
.popup-content {
	padding: 50rpx 20rpx 20rpx;
}
.popup-body {
	padding: 10rpx 15rpx 20rpx;
}
/* 健康证相关样式 */
.health-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding-right: 10rpx;
}
.health-left {
	color: #333;
}
.health-right {
	display: flex;
	align-items: center;
	gap: 10rpx;
}
.health-thumbs {
	display: flex;
	gap: 10rpx;
	align-items: center;
}
.health-thumb-wrap {
	width: 88px;
	height: 88px;
}
.health-thumb {
	width: 88px;
	height: 88px;
	border-radius: 6px;
}
.health-add {
	width: 88px;
	height: 88px;
	border: 1px dashed #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	color: #999;
}
.health-popup {
	padding: 30rpx 30rpx 30rpx;
	background: #fff;
}
.health-popup-header .title {
	font-weight: 700;
	font-size: 32rpx;
	text-align: center;
	margin-bottom: 10px;
}
.health-popup-body {
	padding: 10rpx 0 20rpx;
}
.field-row {
	display: flex;
	align-items: center;
	gap: 38rpx;
	margin-bottom: 12px;
}
.label {
	width: 90rpx;
	color: #666;
}
.field-input {
	flex: 1;
}
.date-row .date-input {
	width: 35%;
}
.dash {
	width: 10rpx;
	text-align: center;
	color: #999;
}
.upload-list {
	margin-top: 10px;
}
.upload-title {
	color: #333;
	margin-bottom: 8px;
	display: block;
}
.upload-row-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.upload-item {
	position: relative;
	width: 88px;
	height: 88px;
}
.upload-thumb {
	width: 88px;
	height: 88px;
	border-radius: 6px;
}
.remove-btn {
	position: absolute;
	top: -6px;
	right: -6px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	text-align: center;
	line-height: 24px;
	font-size: 18px;
}
.upload-add {
	width: 88px;
	height: 88px;
	border: 1px dashed #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	color: #999;
}
.health-popup-footer {
	display: flex;
	justify-content: space-between;
	padding-top: 16px;
	gap: 12px;
}
.save-btn {
	width: 240rpx;
	align-self: center;
}

</style>