<template>
    <div class="px-[30px] py-5 user-info min-h-full flex flex-col">
        <div class="border-b border-br pb-5">
            <span class="text-2xl font-medium">新生报名</span>
        </div>
        <el-card class="!border-none mb-4" shadow="never">
            <div class="lg:flex gap-6">
                <!-- 基本信息表单 -->
                <el-card class="!border-none flex-1" shadow="never">
                    <el-form
                        layout="vertical"
                        :model="studentData.baseInfo"
                        class="mt-4"
                    >
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <el-form-item label="学生姓名">
                                <el-input
                                    v-model="studentData.baseInfo.name"
                                    placeholder="请输入姓名"
                                />
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-radio-group
                                    v-model="studentData.baseInfo.gender"
                                >
                                    <el-radio label="male">男</el-radio>
                                    <el-radio label="female">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="身份证号">
                                <el-input
                                    v-model="studentData.baseInfo.idCard"
                                    placeholder="请输入18位身份证号"
                                />
                            </el-form-item>
                            <el-form-item label="联系方式">
                                <el-input
                                    v-model="studentData.baseInfo.phone"
                                    placeholder="请输入手机号码"
                                />
                            </el-form-item>
                            <el-form-item
                                label="家庭住址"
                                class="md:col-span-2"
                            >
                                <el-input
                                    v-model="studentData.baseInfo.address"
                                    placeholder="请输入详细家庭住址"
                                    type="textarea"
                                    rows="3"
                                />
                            </el-form-item>
                            <el-form-item label="紧急联系人">
                                <el-input
                                    v-model="
                                        studentData.baseInfo.emergencyContact
                                    "
                                    placeholder="请输入紧急联系人姓名"
                                />
                            </el-form-item>
                            <el-form-item label="紧急联系电话">
                                <el-input
                                    v-model="
                                        studentData.baseInfo.emergencyPhone
                                    "
                                    placeholder="请输入紧急联系人电话"
                                />
                            </el-form-item>
                        </div>
                    </el-form>
                </el-card>
            </div>
        </el-card>
        <!-- 注册状态信息 -->
        <el-card class="!border-none mb-4 flex-1" shadow="never">
            <template #header>
                <span>注册状态</span>
            </template>
            <div class="status-info mt-4">
                <div class="mb-6">
                    <div class="text-tx-secondary text-sm mb-2">当前状态</div>
                    <el-tag :type="statusConfig.type">{{
                        statusConfig.label
                    }}</el-tag>
                </div>
                <div class="mb-6">
                    <div class="text-tx-secondary text-sm mb-2">状态进度</div>
                    <el-progress
                        :percentage="statusConfig.progress"
                        :stroke-width="6"
                    />
                </div>
                <div class="space-y-3">
                    <div class="flex items-center">
                        <el-checkbox
                            v-model="statusConfig.steps[0].completed"
                            disabled
                        >
                            已报名
                        </el-checkbox>
                        <span> {{ statusConfig.steps[0].time }} </span>
                    </div>
                    <div class="flex items-center">
                        <el-checkbox
                            v-model="statusConfig.steps[1].completed"
                            disabled
                        >
                            材料审核
                        </el-checkbox>
                        <span>
                            {{ statusConfig.steps[1].time || '待完成' }}
                        </span>
                    </div>
                    <div class="flex items-center">
                        <el-checkbox
                            v-model="statusConfig.steps[2].completed"
                            disabled
                        >
                            已录取
                        </el-checkbox>
                        <span>
                            {{ statusConfig.steps[2].time || '待完成' }}
                        </span>
                    </div>
                    <div class="flex items-center">
                        <el-checkbox
                            v-model="statusConfig.steps[3].completed"
                            disabled
                        >
                            已入学
                        </el-checkbox>
                        <span>
                            {{ statusConfig.steps[3].time || '待完成' }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="mt-6">
                <el-button type="primary" block>保存信息</el-button>
                <el-button type="default" block class="mt-2"
                    >提交审核</el-button
                >
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { ElButton } from 'element-plus'

definePageMeta({
    module: 'personal',
    auth: true
})

// 学生信息数据
const studentData = reactive({
    baseInfo: {
        name: '',
        gender: 'male',
        idCard: '',
        phone: '',
        address: '',
        emergencyContact: '',
        emergencyPhone: ''
    },
    additionalInfo: {
        enrollYear: '',
        major: '',
        education: ''
    }
})

// 状态配置
type TagType = '' | 'info' | 'success' | 'warning' | 'danger'
const statusConfig = reactive<{
    label: string
    type: TagType
    progress: number
    steps: { completed: boolean; time: string }[]
}>({
    label: '已报名',
    type: 'info',
    progress: 25,
    steps: [
        { completed: true, time: '2024-03-15' },
        { completed: false, time: '' },
        { completed: false, time: '' },
        { completed: false, time: '' }
    ]
})
</script>
<style lang="scss" scoped></style>
