<template>
    <div class="enrollment-detail">
        <popup
            ref="popupRef"
            title="预报名详情"
            :async="true"
            width="700px"
            :clickModalClose="true"
            :confirm-button-text="false"
            cancel-button-text="关闭"
        >
            <div v-loading="loading" class="p-4">
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="姓名">{{ detailData.name || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="性别">{{ formatGender(detailData.gender) }}</el-descriptions-item>
                    <el-descriptions-item label="身份证号" :span="2">{{ detailData.idCard || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="毕业学校" :span="2">{{ detailData.previousSchool || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="身高 (cm)">{{ detailData.height || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="体重 (kg)">{{ detailData.weight || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="鞋码">{{ detailData.shoeSize || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="中考成绩">{{ detailData.highSchoolScore || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="报名专业">{{ detailData.majorName || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="招生老师">{{ detailData.recruitmentTeacherName || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="预报名金额" :span="2">
                        <span class="text-red-500 font-bold" v-if="detailData.preRegistrationAmount">
                            ¥{{ detailData.preRegistrationAmount }}
                        </span>
                        <span v-else>-</span>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </popup>
    </div>
</template>

<script lang="ts" setup>
import { enrollmentDetail } from '@/api/enrollment'
import Popup from '@/components/popup/index.vue'

const popupRef = shallowRef<InstanceType<typeof Popup>>()
const loading = ref(false)
const detailData = ref<any>({})

const formatGender = (gender: number | string | undefined) => {
    if (gender === 1 || gender === '1') return '男'
    if (gender === 0 || gender === '0') return '女'
    return '-'
}

const open = async (id: number) => {
    loading.value = true
    popupRef.value?.open()
    try {
        detailData.value = await enrollmentDetail({ id })
    } catch (e) {
        console.error('获取预报名详情失败', e)
    } finally {
        loading.value = false
    }
}

defineExpose({
    open
})
</script>

<style scoped>
.enrollment-detail :deep(.el-descriptions__label) {
    width: 120px;
    background-color: #f5f7fa;
    font-weight: bold;
}
</style>
