<template>
    <div>
        <el-form
            :model="addAndEditForm"
            :rules="addAndEditRules"
            ref="addAndEditFormRef"
            label-width="0px"
            label-position="top"
            :disabled="formType === 2"
        >
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="姓名" prop="userName">
                        <el-input
                            clearable
                            maxlength="10"
                            show-word-limit
                            placeholder="请输入姓名"
                            v-model="addAndEditForm.userName"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="身份证号" prop="idCard">
                        <el-input v-model="addAndEditForm.idCard" placeholder="请输入身份证号" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="年龄" prop="age">
                        <el-input clearable placeholder="请输入年龄" v-model="addAndEditForm.age" />
                    </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="1"
                                    :file-size="10"
                                    @deleteFile="deleteFile"
                                    :file-type="['jpg', 'png', 'jpeg']"
                                    :upload-file-url="uploadFileUrl"
                                    :file-list.sync="addAndEditForm.idCardFront"
                                >
                                    <template #upload-img-box> 身份证正面 </template>
                                </UploadImg>
                            </el-form-item>
                            <el-form-item prop="idCardBack">
                                <UploadImg
                                    :limit="1"
                                    :file-size="10"
                                    @deleteFile="deleteFile"
                                    :file-type="['jpg', 'png', 'jpeg']"
                                    :upload-file-url="uploadFileUrl"
                                    :file-list.sync="addAndEditForm.idCardBack"
                                >
                                    <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="education">
                        <el-input
                            clearable
                            maxlength="20"
                            show-word-limit
                            placeholder="请输入学历"
                            v-model="addAndEditForm.education"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item label="毕业日期及院校" prop="almaMater">
                        <template #label>
                            <span>毕业日期及院校</span>
                            <span style="color: #999; font-size: 12px">(示例：xxxx年xx月毕业于xxxx大学xxxx专业)</span>
                        </template>
                        <el-input
                            clearable
                            maxlength="50"
                            show-word-limit
                            placeholder="请输入毕业日期及院校"
                            v-model="addAndEditForm.almaMater"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="职称" prop="title">
                        <el-input
                            clearable
                            maxlength="20"
                            show-word-limit
                            placeholder="请输入职称"
                            v-model="addAndEditForm.title"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="职务" prop="position">
                        <el-input
                            clearable
                            maxlength="20"
                            show-word-limit
                            placeholder="请输入职务"
                            v-model="addAndEditForm.position"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="专业" prop="major">
                        <el-input
                            clearable
                            maxlength="20"
                            show-word-limit
                            placeholder="请输入专业"
                            v-model="addAndEditForm.major"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="资格证书" prop="diploma">
                        <el-input
                            clearable
                            maxlength="30"
                            show-word-limit
                            placeholder="请输入资格证书"
                            v-model="addAndEditForm.diploma"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="证书编号" prop="diplomaNum">
                        <el-input
                            clearable
                            maxlength="30"
                            show-word-limit
                            placeholder="请输入证书编号"
                            v-model="addAndEditForm.diplomaNum"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="级别" prop="level">
                        <el-input
                            clearable
                            maxlength="20"
                            show-word-limit
                            placeholder="请输入级别"
                            v-model="addAndEditForm.level"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="养老保险" prop="isNormal">
                        <el-radio-group v-model="addAndEditForm.isNormal">
                            <el-radio label="0">正常</el-radio>
                            <el-radio label="1">异常</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item prop="diplomaImg">
                        <template #label>
                            <span>上述资格证书照片</span>
                            <span style="color: #999; font-size: 12px">(最多上传5张，仅支持jpg、png格式)</span>
                        </template>
                        <UploadImg
                            :limit="5"
                            :file-size="10"
                            :multiple="true"
                            @deleteFile="deleteFile"
                            :file-type="['jpg', 'png', 'jpeg']"
                            :upload-file-url="uploadFileUrl"
                            :file-list.sync="addAndEditForm.diplomaImg"
                        />
                    </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"
                            :multiple="true"
                            :file-type="['jpg', 'png', 'jpeg']"
                            @deleteFile="deleteFile"
                            :upload-file-url="uploadFileUrl"
                            :file-list.sync="addAndEditForm.otherImg"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-row style="text-align: right; border-top: 1px solid #e5e5e5; padding-top: 10px">
            <el-button @click="onCancel">{{ formType !== 2 ? '取消' : '关闭' }}</el-button>
            <el-button type="primary" @click="onConfirm" v-if="formType !== 2">确定</el-button>
        </el-row>
    </div>
</template>

<script>
import UploadImg from '@/components/UploadImg'
import { addKeyPersonAPI, editKeyPersonAPI } from '@/api/company-manage/key-person'
import { deleteImgAPI } from '@/api/common'
export default {
    components: {
        UploadImg,
    },
    props: {
        // 1新增 2详情 3编辑
        formType: {
            type: Number,
            default: 1,
        },
        // 编辑行
        editRow: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            uploadFileUrl: process.env.VUE_APP_BASE_API + '/system/file/uploadFiles',
            deleteFileList: [],
            uploadOuterVisible: false,
            addAndEditForm: {
                userName: '', // 姓名
                idCard: '', // 身份证号码
                age: '', // 年龄
                education: '', // 学历
                almaMater: '', // 毕业日期
                title: '', // 职称
                position: '', // 职务
                major: '', // 专业
                diploma: '', // 资格证书
                diplomaNum: '', // 证书编码
                level: '', // 级别
                isNormal: '0', // 养老保险
                idCardFront: [], // 身份证正面
                idCardBack: [], // 身份证反面
                diplomaImg: [], // 上述资格证书照片
                otherImg: [], // 其他资质照片
                id: '',
            },
            addAndEditRules: {
                userName: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur',
                    },
                ],
                idCard: [
                    {
                        required: true,
                        message: '请输入身份证号码',
                        trigger: 'blur',
                    },
                    {
                        pattern:
                            /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                        message: '请输入正确的身份证号码',
                        trigger: 'blur',
                    },
                ],
                age: [
                    {
                        required: true,
                        message: '请输入年龄',
                        trigger: 'blur',
                    },
                    {
                        pattern: /^(1[01][0-9]|120|[1-9][0-9]?)$/,
                        message: '请输入正确的年龄',
                        trigger: 'blur',
                    },
                ],
                education: [
                    {
                        required: true,
                        message: '请输入学历',
                        trigger: 'blur',
                    },
                ],
                almaMater: [
                    {
                        required: true,
                        message: '请输入毕业日期及院校',
                        trigger: 'blur',
                    },
                ],
                title: [
                    {
                        required: true,
                        message: '请输入职称',
                        trigger: 'blur',
                    },
                ],
                diploma: [
                    {
                        required: true,
                        message: '请输入资格证书',
                        trigger: 'blur',
                    },
                ],
                diplomaNum: [
                    {
                        required: true,
                        message: '请输入证书编码',
                        trigger: 'blur',
                    },
                ],
                isNormal: [
                    {
                        required: true,
                        message: '请选择养老保险',
                        trigger: 'blur',
                    },
                ],
                diplomaImg: [
                    {
                        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(async (valid) => {
                if (valid) {
                    // 组装参数
                    const {
                        userName, // 姓名
                        idCard, // 身份证号码
                        age, // 年龄
                        education, // 学历
                        almaMater, // 毕业日期
                        title, // 职称
                        position, // 职务
                        major, // 专业
                        diploma, // 资格证书
                        diplomaNum, // 证书编码
                        level, // 级别
                        isNormal, // 养老保险
                        idCardFront, // 身份证正面
                        idCardBack, // 身份证反面
                        diplomaImg, // 上述资格证书照片
                        otherImg, // 其他资质照片
                        id,
                    } = this.addAndEditForm

                    const tbFileSourceVoList = []
                    // fileType 1.身份证正面 2.身份证反面 3.资格证书照片 4.其他资质照片
                    if (idCardFront.length > 0) {
                        idCardFront.forEach((item) => {
                            if (item.response && item.response.code === 200) {
                                const { data } = item.response
                                const { fileSuffix, filePath, fileName } = data[0]
                                tbFileSourceVoList.push({
                                    fileSuffix,
                                    filePath,
                                    fileName,
                                    fileType: 1,
                                })
                            } else {
                                tbFileSourceVoList.push({
                                    fileSuffix: item.fileSuffix,
                                    filePath: item.filePath,
                                    fileName: item.fileName,
                                    fileType: 1,
                                })
                            }
                        })
                    }
                    if (idCardBack.length > 0) {
                        idCardBack.forEach((item) => {
                            if (item.response && item.response.code === 200) {
                                const { data } = item.response
                                const { fileSuffix, filePath, fileName } = data[0]
                                tbFileSourceVoList.push({
                                    fileSuffix,
                                    filePath,
                                    fileName,
                                    fileType: 2,
                                })
                            } else {
                                tbFileSourceVoList.push({
                                    fileSuffix: item.fileSuffix,
                                    filePath: item.filePath,
                                    fileName: item.fileName,
                                    fileType: 2,
                                })
                            }
                        })
                    }
                    if (diplomaImg.length > 0) {
                        diplomaImg.forEach((item) => {
                            if (item.response && item.response.code === 200) {
                                const { data } = item.response
                                const { fileSuffix, filePath, fileName } = data[0]
                                tbFileSourceVoList.push({
                                    fileSuffix,
                                    filePath,
                                    fileName,
                                    fileType: 3,
                                })
                            } else {
                                tbFileSourceVoList.push({
                                    fileSuffix: item.fileSuffix,
                                    filePath: item.filePath,
                                    fileName: item.fileName,
                                    fileType: 3,
                                })
                            }
                        })
                    }
                    if (otherImg.length > 0) {
                        otherImg.forEach((item) => {
                            if (item.response && item.response.code === 200) {
                                const { data } = item.response
                                const { fileSuffix, filePath, fileName } = data[0]
                                tbFileSourceVoList.push({
                                    fileSuffix,
                                    filePath,
                                    fileName,
                                    fileType: 4,
                                })
                            } else {
                                tbFileSourceVoList.push({
                                    fileSuffix: item.fileSuffix,
                                    filePath: item.filePath,
                                    fileName: item.fileName,
                                    fileType: 4,
                                })
                            }
                        })
                    }

                    const params = {
                        userName,
                        idCard,
                        age,
                        education,
                        almaMater,
                        title,
                        position,
                        major,
                        diploma,
                        diplomaNum,
                        level,
                        isNormal,
                        tbFileSourceVoList,
                    }

                    if (this.formType === 3) {
                        params.id = id
                    }
                    const filePaths = this.deleteFileList.map((item) => item.filepath)
                    if (filePaths.length > 0) {
                        deleteImgAPI({ filePaths: filePaths.join(',') })
                    }
                    const API = this.formType === 1 ? addKeyPersonAPI : editKeyPersonAPI
                    const res = await API(params)
                    if (res.code === 200) {
                        this.$modal.msgSuccess(this.formType === 1 ? '新增成功' : '编辑成功')
                        this.$emit('closeDialogOuter', true)
                    }
                }
            })
        },
        deleteFile(filePath) {
            this.deleteFileList.push(filePath)
        },
        deleteFileListFun() {
            const { idCardFront, idCardBack, diplomaImg, otherImg } = this.addAndEditForm
            const fileList = [...idCardFront, ...idCardBack, ...diplomaImg, ...otherImg]
            const deleteFileList = []
            this.deleteFileList.forEach((item) => {
                if (item.isNew) {
                    deleteFileList.push(item.filepath)
                }
            })

            fileList.forEach((item) => {
                if (item.response && item.response.code === 200) {
                    const { data } = item.response
                    const { filePath } = data[0]

                    deleteFileList.push(filePath)
                }
            })

            if (deleteFileList.length > 0) {
                deleteImgAPI({ filePaths: deleteFileList.join(',') })
            }
        },
    },

    watch: {
        editRow: {
            handler(newVal) {
                if (newVal && Object.keys(newVal).length > 0) {
                    Object.assign(this.addAndEditForm, { ...newVal })
                    this.addAndEditForm.idCardFront = this.addAndEditForm.tbFileSourceVoList
                        .filter((item) => item.fileType == 1)
                        .map((e) => {
                            return {
                                ...e,
                                url: e.filePath,
                            }
                        })
                    this.addAndEditForm.idCardBack = this.addAndEditForm.tbFileSourceVoList
                        .filter((item) => item.fileType == 2)
                        .map((e) => {
                            return {
                                ...e,
                                url: e.filePath,
                            }
                        })
                    this.addAndEditForm.diplomaImg = this.addAndEditForm.tbFileSourceVoList
                        .filter((item) => item.fileType == 3)
                        .map((e) => {
                            return {
                                ...e,
                                url: e.filePath,
                            }
                        })
                    this.addAndEditForm.otherImg = this.addAndEditForm.tbFileSourceVoList
                        .filter((item) => item.fileType == 4)
                        .map((e) => {
                            return {
                                ...e,
                                url: e.filePath,
                            }
                        })
                }
            },
            deep: true,
            immediate: true,
        },
    },
}
</script>
