<template>
    <div>
        <el-form
            :model="addAndEditForm"
            :rules="addAndEditRules"
            ref="addAndEditFormRef"
            label-width="0px"
            label-position="top"
        >
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="addAndEditForm.name" placeholder="请输入姓名" clearable> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="身份证号" prop="idCard">
                        <el-input v-model="addAndEditForm.idCard" placeholder="请输入身份证号" clearable> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属分包商" prop="age">
                        <el-input v-model="addAndEditForm.age" placeholder="请输入所属分包商" clearable> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="身份证照片" prop="idCardFront">
                        <div style="display: flex">
                            <el-form-item prop="idCardFront">
                                <UploadImg
                                    :limit="4"
                                    :file-size="10"
                                    :file-list="fileList"
                                    :file-type="['jpg', 'png']"
                                    :upload-file-url="uploadFileUrl"
                                >
                                    <template #upload-img-box> 身份证正面 </template>
                                </UploadImg>
                            </el-form-item>
                            <el-form-item prop="idCardBack">
                                <UploadImg
                                    :limit="4"
                                    :file-size="10"
                                    :file-list="fileList"
                                    :file-type="['jpg', 'png']"
                                    :upload-file-url="uploadFileUrl"
                                >
                                    <template #upload-img-box> 身份证反面 </template>
                                </UploadImg>
                            </el-form-item>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="职称" prop="title">
                        <el-input v-model="addAndEditForm.title" placeholder="请输入职称" clearable> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="资格证书" prop="credentials">
                        <el-input v-model="addAndEditForm.credentials" placeholder="请输入资格证书" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="证书编号" prop="code">
                        <el-input v-model="addAndEditForm.code" placeholder="请输入证书编号" clearable> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item prop="credentialsImg">
                        <template #label>
                            <span>上传资格证照片</span>
                            <span style="color: #999; font-size: 12px">(最多上传5张，仅支持jpg、png格式)</span>
                        </template>
                        <UploadImg
                            :limit="5"
                            :file-size="10"
                            :file-list="fileList"
                            :file-type="['jpg', 'png']"
                            :upload-file-url="uploadFileUrl"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item prop="otherImg">
                        <template #label>
                            <span>其他资质照片</span>
                            <span style="color: #999; font-size: 12px">(最多上传5张，仅支持jpg、png格式)</span>
                        </template>
                        <UploadImg
                            :limit="5"
                            :file-size="10"
                            :file-list="fileList"
                            :file-type="['jpg', 'png']"
                            :upload-file-url="uploadFileUrl"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item>
                <el-row style="text-align: right; border-top: 1px solid #e5e5e5; padding-top: 10px">
                    <el-button size="mini" @click="onCancel">取消</el-button>
                    <el-button type="primary" size="mini" @click="onConfirm">确定</el-button>
                </el-row>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import UploadImg from '@/components/UploadImg'
export default {
    components: {
        UploadImg,
    },
    props: {
        // 1新增 2详情 3编辑
        formType: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {
            uploadOuterVisible: false,
            addAndEditForm: {
                name: '', // 姓名
                idCard: '', // 身份证号码
                age: '', // 年龄
                idCardFront: '', //身份证正面
                idCardBack: '', // 身份证反面
                qualification: '', // 学历
                endTime: '', // 毕业日期
                title: '', // 职称
                position: '', // 职务
                major: '', // 专业
                credentials: '', // 资格证书
                code: '', // 证书编码
                level: '', // 级别
                pensionInsurance: '', // 养老保险
                credentialsImg: '', // 上述资格证书照片
                otherImg: '', // 其他资质照片
            },
            addAndEditRules: {
                name: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur',
                    },
                ],
                idCard: [
                    {
                        required: true,
                        message: '请输入身份证号码',
                        trigger: 'blur',
                    },
                ],
                age: [
                    {
                        required: true,
                        message: '请输入年龄',
                        trigger: 'blur',
                    },
                ],
                qualification: [
                    {
                        required: true,
                        message: '请输入学历',
                        trigger: 'blur',
                    },
                ],
                endTime: [
                    {
                        required: true,
                        message: '请输入毕业日期',
                        trigger: 'blur',
                    },
                ],
                title: [
                    {
                        required: true,
                        message: '请输入职称',
                        trigger: 'blur',
                    },
                ],
                credentials: [
                    {
                        required: true,
                        message: '请输入资格证书',
                        trigger: 'blur',
                    },
                ],
                code: [
                    {
                        required: true,
                        message: '请输入证书编码',
                        trigger: 'blur',
                    },
                ],
                pensionInsurance: [
                    {
                        required: true,
                        message: '请选择养老保险',
                        trigger: 'blur',
                    },
                ],
                credentialsImg: [
                    {
                        required: true,
                        message: '请上传上述资格证书照片',
                        trigger: 'blur',
                    },
                ],
                idCardFront: [
                    {
                        required: true,
                        message: '请上传身份证正面照片',
                        trigger: 'blur',
                    },
                ],
                idCardBack: [
                    {
                        required: true,
                        message: '请上传身份证反面照片',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        onCancel() {
            this.$emit('closeDialogOuter')
        },
        onConfirm() {
            this.$refs.addAndEditFormRef.validate((valid) => {
                if (valid) {
                    console.log(this.addAndEditForm)
                }
            })
        },
    },
}
</script>
