<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar
            :front-color="$theme.navColor"
            :background-color="$theme.navBgColor"
        />
        <!-- #endif -->
    </page-meta>
    <view class="pre-registration min-h-full pb-[env(safe-area-inset-bottom)]">
        <!-- 基本信息 -->
        <view class="px-[30rpx] py-[30rpx]">
            <view class="flex items-center mb-[30rpx]">
                <view class="w-[6rpx] h-[32rpx] bg-blue-500 rounded-[3rpx] mr-[16rpx]"></view>
                <view class="text-lg font-medium">基本信息</view>
            </view>
            <view class="form-item">
                <view class="label required">姓名</view>
                <u-input
                    v-model="formData.name"
                    placeholder="请输入真实姓名"
                    :border="false"
                    :custom-style="inputStyle"
                />
            </view>
            <view class="form-item">
                <view class="label required">性别</view>
                <u-radio-group v-model="formData.gender" direction="row">
                    <u-radio :name="1" active-color="#3B82F6">男</u-radio>
                    <u-radio :name="2" class="ml-[60rpx]" active-color="#3B82F6">女</u-radio>
                </u-radio-group>
            </view>
            <view class="form-item">
                <view class="label required">身份证号</view>
                <u-input
                    v-model="formData.idCard"
                    placeholder="请输入18位身份证号"
                    maxlength="18"
                    :border="false"
                    :custom-style="inputStyle"
                />
            </view>
        </view>

        <!-- 学业信息 -->
        <view class="px-[30rpx] py-[30rpx]">
            <view class="flex items-center mb-[30rpx]">
                <view class="w-[6rpx] h-[32rpx] bg-green-500 rounded-[3rpx] mr-[16rpx]"></view>
                <view class="text-lg font-medium">学业信息</view>
            </view>
            <view class="form-item">
                <view class="label required">毕业学校</view>
                <u-input
                    v-model="formData.school"
                    placeholder="请输入毕业学校全称"
                    :border="false"
                    :custom-style="inputStyle"
                />
            </view>
            <view class="form-item">
                <view class="label required">中考成绩</view>
                <u-input
                    v-model="formData.score"
                    placeholder="请输入中考成绩"
                    type="digit"
                    maxlength="6"
                    :border="false"
                    :custom-style="inputStyle"
                />
            </view>
        </view>

        <!-- 身体信息 -->
        <view class="px-[30rpx] py-[30rpx]">
            <view class="flex items-center mb-[30rpx]">
                <view class="w-[6rpx] h-[32rpx] bg-orange-500 rounded-[3rpx] mr-[16rpx]"></view>
                <view class="text-lg font-medium">身体信息</view>
            </view>
            <view class="form-row">
                <view class="form-item flex-1 mr-[20rpx]">
                    <view class="label required">身高(cm)</view>
                    <u-input
                        v-model="formData.height"
                        placeholder="如: 175"
                        type="digit"
                        maxlength="5"
                        :border="false"
                        :custom-style="inputStyle"
                    />
                </view>
                <view class="form-item flex-1">
                    <view class="label required">体重(kg)</view>
                    <u-input
                        v-model="formData.weight"
                        placeholder="如: 60"
                        type="digit"
                        maxlength="5"
                        :border="false"
                        :custom-style="inputStyle"
                    />
                </view>
            </view>
            <view class="form-item">
                <view class="label required">鞋码</view>
                <u-input
                    v-model="formData.shoeSize"
                    placeholder="请输入鞋码，如: 42"
                    type="number"
                    maxlength="3"
                    :border="false"
                    :custom-style="inputStyle"
                />
            </view>
        </view>

        <view class="h-[2rpx] bg-gray-200 mx-[30rpx]"></view>

        <!-- 报名信息 -->
        <view class="px-[30rpx] py-[30rpx]">
            <view class="flex items-center mb-[30rpx]">
                <view class="w-[6rpx] h-[32rpx] bg-purple-500 rounded-[3rpx] mr-[16rpx]"></view>
                <view class="text-lg font-medium">报名信息</view>
            </view>
            <view class="form-item">
                <view class="label required">报名专业</view>
                <u-input
                    v-model="formData.major"
                    placeholder="请输入意向专业名称"
                    :border="false"
                    :custom-style="inputStyle"
                />
            </view>
            <view class="form-item">
                <view class="label required">招生老师</view>
                <u-input
                    v-model="formData.teacher"
                    placeholder="请输入招生老师姓名"
                    :border="false"
                    :custom-style="inputStyle"
                />
            </view>
        </view>

        <!-- 提交按钮 -->
        <view class="px-[30rpx] py-[40rpx]">
            <u-button
                type="primary"
                @click="submit"
                :loading="submitting"
                :custom-style="submitBtnStyle"
            >
                {{ submitting ? '提交中...' : '提交报名' }}
            </u-button>
            <view class="text-center mt-[20rpx] text-xs text-gray-400">
                提交即表示您同意我们的服务条款
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const formData = reactive({
    name: '',
    gender: 1,
    idCard: '',
    school: '',
    score: '',
    height: '',
    weight: '',
    shoeSize: '',
    major: '',
    teacher: ''
})

const submitting = ref(false)

const inputStyle = {
    background: '#F5F5F5',
    padding: '24rpx',
    borderRadius: '12rpx',
    fontSize: '28rpx'
}

const submitBtnStyle = {
    height: '100rpx',
    fontSize: '32rpx',
    borderRadius: '50rpx',
    background: 'linear-gradient(135deg, #3B82F6 0%, #2563EB 100%)',
    boxShadow: '0 8rpx 24rpx rgba(59, 130, 246, 0.3)'
}

const validateForm = () => {
    if (!formData.name.trim()) {
        uni.$u.toast('请输入姓名')
        return false
    }
    if (!formData.idCard.trim()) {
        uni.$u.toast('请输入身份证号')
        return false
    }
    if (!/^\d{17}[\dXx]$/.test(formData.idCard)) {
        uni.$u.toast('请输入正确的18位身份证号')
        return false
    }
    if (!formData.school.trim()) {
        uni.$u.toast('请输入毕业学校')
        return false
    }
    if (!formData.score) {
        uni.$u.toast('请输入中考成绩')
        return false
    }
    if (Number(formData.score) < 0 || Number(formData.score) > 750) {
        uni.$u.toast('请输入正确的中考成绩')
        return false
    }
    if (!formData.height) {
        uni.$u.toast('请输入身高')
        return false
    }
    if (Number(formData.height) < 50 || Number(formData.height) > 250) {
        uni.$u.toast('请输入正确的身高')
        return false
    }
    if (!formData.weight) {
        uni.$u.toast('请输入体重')
        return false
    }
    if (Number(formData.weight) < 20 || Number(formData.weight) > 200) {
        uni.$u.toast('请输入正确的体重')
        return false
    }
    if (!formData.shoeSize) {
        uni.$u.toast('请输入鞋码')
        return false
    }
    if (Number(formData.shoeSize) < 15 || Number(formData.shoeSize) > 55) {
        uni.$u.toast('请输入正确的鞋码')
        return false
    }
    if (!formData.major.trim()) {
        uni.$u.toast('请输入报名专业')
        return false
    }
    if (!formData.teacher.trim()) {
        uni.$u.toast('请输入招生老师姓名')
        return false
    }
    return true
}

const submit = async () => {
    if (!validateForm()) return
    
    submitting.value = true
    
    try {
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        uni.showModal({
            title: '提交成功',
            content: '您的预报名信息已提交，我们将尽快与您联系！',
            showCancel: false,
            confirmText: '知道了',
            success: () => {
                uni.navigateBack()
            }
        })
    } catch (error) {
        uni.$u.toast('提交失败，请重试')
    } finally {
        submitting.value = false
    }
}
</script>

<style lang="scss" scoped>
.pre-registration {
    background-color: #FFFFFF;
}

.form-item {
    margin-bottom: 30rpx;
    
    &:last-child {
        margin-bottom: 0;
    }
}

.form-row {
    display: flex;
    flex-direction: row;
}

.label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    font-weight: 500;
    
    &.required::before {
        content: '*';
        color: #FF4D4F;
        margin-right: 6rpx;
    }
}

.bg-blue-500 {
    background-color: #3B82F6;
}

.bg-green-500 {
    background-color: #22C55E;
}

.bg-orange-500 {
    background-color: #F97316;
}

.bg-purple-500 {
    background-color: #A855F7;
}


</style>
