<template>
    <ProDialog ref="proDialogRef" @handle-cancel="handleCancel" @handle-confirm="handleConfirm">
        <el-form ref="formRef" :rules="rules" :model="form" label-postion="right" :label-width="100">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="学生名字" prop="studentName">
                        <el-input v-model="form.studentName" placeholder="请输入" maxlength="20" show-word-limit />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="form.sex">
                            <el-radio v-for="option in sexOptions" :key="option.value" :label="option.value">{{ option.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="身份证号码" prop="idCard">
                        <el-input v-model="form.idCard" placeholder="请输入" maxlength="18" show-word-limit />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="报读专业" prop="major">
                        <el-input v-model="form.major" placeholder="请输入" maxlength="50" show-word-limit />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="毕业院校" prop="graduationSchool">
                        <el-input v-model="form.graduationSchool" placeholder="请输入" maxlength="50" show-word-limit />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="家庭地址" prop="homeAddress">
                        <el-input v-model="form.homeAddress" placeholder="请输入" maxlength="100" show-word-limit />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="家长姓名" prop="parentName">
                        <el-input v-model="form.parentName" placeholder="请输入" maxlength="20" show-word-limit />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="家长电话" prop="parentPhone">
                        <el-input v-model="form.parentPhone" placeholder="请输入" maxlength="11" show-word-limit />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="负责电销老师">
                        <el-input v-model="form.telemarketingTeacherName" placeholder="请输入" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="负责招生老师">
                        <el-input v-model="form.recruitTeacherName" placeholder="请输入" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="数据来源">
                        <el-select v-model="form.listSource" placeholder="请选择" style="width: 100%" disabled>
                            <el-option v-for="option in clueSourceOptions" :key="option.value" :label="option.label" :value="option.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </ProDialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import ProDialog, { type IParams } from '@/components/ProDialog/index.vue'
import { customerDetail, customerEdit } from '@/api/customer'
import { clueSourceOptions, sexOptions } from '@/enums'
import { validateIdCard } from '@/utils/validate'
import feedback from '@/utils/feedback'

const emit = defineEmits(['refreshList'])

const proDialogRef = ref<InstanceType<typeof ProDialog>>()
const formRef = ref<FormInstance>()
const form = ref({
    id: '',
    studentName: '',
    sex: 1,
    idCard: '',
    major: '',
    graduationSchool: '',
    homeAddress: '',
    parentName: '',
    parentPhone: '',
    telemarketingTeacherName: '',
    recruitTeacherName: '',
    listSource: 0
})
const rules = reactive({
    idCard: { validator: validateIdCard, trigger: 'blur' }
})
const fetchDetail = async (id: number) => {
    try {
        const result = await customerDetail({ id })
        setFormData(result)
    } catch (error) {}
}
const setFormData = result => {
    for (const key in result) {
        if ((Object.prototype.hasOwnProperty.call(form.value, key) && result[key] !== null) || result[key] !== undefined) {
            form.value[key] = result[key] as any
        }
    }
}
const openDialog = (params: IParams) => {
    proDialogRef.value?.openDialog(params)
    fetchDetail(params.data.id)
}
const handleCancel = (callback: () => void) => {
    callback()
}
const handleConfirm = (callback: () => void) => {
    formRef.value?.validate(async valid => {
        if (!valid) return
        try {
            await customerEdit(form.value)
            feedback.msgSuccess('编辑成功')
            callback()
            emit('refreshList')
        } catch (error) {}
    })
}
defineExpose({
    openDialog
})
</script>
<style scoped></style>
