<!-- 新增人员表单 -->
<template>
    <div class="app-container" :class="{ 'no-pointer-events': showUploadAnimation || showSaveAnimation }">
        <!-- 全局上传动画 -->
        <GlobalUploadAnimation v-if="showUploadAnimation" :text="animationText" subtext="正在处理文件，请稍候..." />

        <!-- 保存动画 -->
        <GlobalUploadAnimation v-if="showSaveAnimation" text="数据上传中" subtext="请稍后，正在保存数据..." />

        <div class="content-header">
            <el-button class="reset-btn" @click="handleClose">返回</el-button>
            <el-button class="search-btn" :loading="isSaving" @click="handleSave">
                保存
            </el-button>
        </div>

        <div class="content-body">
            <el-row :gutter="24" class="content-row">
                <!-- 基本信息 -->
                <el-col :span="6" class="pane-left">
                    <BasicInfoPersonnel ref="basicInfoPersonnel" @handlePersonnelPosition="handlePersonnelPosition"
                        :detailData="detailData" />
                </el-col>
            </el-row>
            <el-row :gutter="24" class="content-row">
                <!-- 资质信息 -->
                <el-col :span="6" class="pane-center" v-show="!isProjectChiefEngineer">
                    <QualificationInfoPersonnel ref="qualificationInfoPersonnel" :personnelPosition="personnelPosition"
                        :detailData="detailData" />
                </el-col>
            </el-row>
            <el-row :gutter="24" class="content-row">
                <!-- 其他信息 -->
                <el-col :span="6" class="pane-right">
                    <OtherInfoPersonnel ref="otherInfoPersonnel" :detailData="detailData"
                        :personnelPosition="personnelPosition" />
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { encryptWithSM4, decryptWithSM4 } from '@/utils/sm'
import BasicInfoPersonnel from './child/BasicInfo.vue'
import QualificationInfoPersonnel from './child/QualificationInfo.vue'
import OtherInfoPersonnel from './child/OtherInfo.vue'
import GlobalUploadAnimation from '@/views/common/GlobalUploadAnimation.vue'
import { addDataAPI, editDataAPI, getDetailDataAPI } from '@/api/enterpriseLibrary/personnel/personnel'

// 常量定义
const PERSONNEL_POSITION_DEFAULT = {
    label: '项目经理',
    value: 'project_manager',
    qualification: '建造师证书、安全考核B证'
}

const CERTIFICATE_TYPES = {
    CONSTRUCTOR: 'constructor_certificate',
    TITLE: 'professional_title_certificate'
}

// 空对象常量，避免重复创建
const EMPTY_OBJECT = Object.freeze({})

export default {
    name: 'PersonnelForm',
    components: {
        BasicInfoPersonnel,
        QualificationInfoPersonnel,
        OtherInfoPersonnel,
        GlobalUploadAnimation
    },
    dicts: ['personnel_position'],
    data() {
        return {
            enterpriseId: decryptWithSM4(this.$route.query.enterpriseId),
            personnelId: decryptWithSM4(this.$route.query.personnelId),
            type: decryptWithSM4(this.$route.query.type),
            personnelPosition: { ...PERSONNEL_POSITION_DEFAULT },
            showUploadAnimation: false,
            showSaveAnimation: false,
            uploadQueue: 0,
            animationText: '识别中',
            isSaving: false,
            detailData: {}
        }
    },
    computed: {
        isProjectChiefEngineer() {
            return this.personnelPosition.value === 'project_chief_engineer'
        },
        isEditMode() {
            return this.type === 'edit'
        },
        // 计算属性安全获取ref
        qualificationInfoRef() {
            return this.$refs.qualificationInfoPersonnel
        }
    },
    watch: {
        'dict.type.personnel_position': {
            handler(newVal) {
                if (newVal && newVal.length > 0) {
                    this.getDetail();
                }
            },
        }
    },
    created() {

    },
    mounted() {
        this.$bus.$on('startUpload', this.handleStartUpload)
        this.$bus.$on('endUpload', this.handleEndUpload)
    },
    beforeDestroy() {
        this.cleanup()
    },
    methods: {
        // 清理资源
        cleanup() {
            this.$bus.$off('startUpload', this.handleStartUpload)
            this.$bus.$off('endUpload', this.handleEndUpload)
            this.resetAnimationState()
        },

        // 重置动画状态
        resetAnimationState() {
            this.showUploadAnimation = false
            this.showSaveAnimation = false
            this.uploadQueue = 0
            this.animationText = '识别中'
            this.isSaving = false
        },

        // 返回
        handleClose() {
            const obj = {
                path: "/personnel/index",
                query: {
                    enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
                }
            }
            this.$tab.closeOpenPage(obj)
        },

        // 获取详情
        async getDetail() {
            if (!this.isEditMode) return
            try {
                const res = await getDetailDataAPI({
                    personnelId: this.personnelId,
                    enterpriseId: this.enterpriseId
                })
                console.log('res', res);

                this.detailData = res.data
                this.getPersonnelPosition();
            } catch (error) {
                console.error('获取详情失败:', error)
                // this.$message.error('获取详情失败')
            }
        },
        // 获取人员职位-回显
        getPersonnelPosition() {
            const obj = this.dict.type.personnel_position.find(item => item.value === this.detailData.enterprisePersonnel.personnelPosition)
            this.personnelPosition = {
                label: obj.label,
                value: obj.value,
                qualification: obj.raw.remark
            }
        },

        // 人员职位
        handlePersonnelPosition(data) {
            this.personnelPosition = data
        },

        // 获取资源文件
        getResourceFilePo(fileList) {
            if (!fileList || !Array.isArray(fileList)) return null

            const resourceFiles = fileList
                .map(file => file?.response?.fileRes ? { ...file.response.fileRes } : null)
                .filter(Boolean)

            return resourceFiles.length > 0 ? resourceFiles[0] : null
        },

        // 获取建造师证书数据
        getBuilderCertificateData(raw) {
            if (!raw) return null

            return {
                personnelCertificateId: this.isEditMode && this.qualificationInfoRef ?
                    this.qualificationInfoRef.personnelCertificateId?.[0] : null,
                professionalType: raw.professionalType,
                certificateCode: raw.certificateCode,
                certificateLevel: raw.certificateLevel,
                certificateValidityPeriod: this.formatDateRange(raw.certificateValidityPeriod),
                useValidityPeriod: this.formatDateRange(raw.useValidityPeriod),
                certificateType: CERTIFICATE_TYPES.CONSTRUCTOR
            }
        },

        // 获取证书类型
        getCertificateType(fileList) {
            if (!fileList || !Array.isArray(fileList) || fileList.length === 0) return ''

            const firstFile = fileList[0]
            console.log(firstFile);

            return firstFile?.response?.fileRes?.businessType || firstFile?.businessType || ''
        },

        // 获取 B证、C证、其他证书数据
        getOtherCertificateData(raw) {
            if (!raw) return null

            return {
                personnelCertificateId: this.isEditMode && this.qualificationInfoRef ?
                    this.qualificationInfoRef.personnelCertificateId?.[1] : null,
                certificateCode: raw.certificateCode2,
                certificateValidityPeriod: this.formatDateRange(raw.certificateValidityPeriod2),
                registerProfessional: raw.registerProfessional,
                certificateType: this.getCertificateType(raw.fileList2)
            }
        },

        // 获取职称证书数据
        getTitleData(raw) {
            if (!raw) return null

            return {
                personnelCertificateId: this.isEditMode ? this.$refs.otherInfoPersonnel.personnelCertificateId?.[0] : null,
                titleName: raw.titleName,
                professionalName: raw.professionalName,
                certificateCode: raw.certificateCode,
                certificateType: CERTIFICATE_TYPES.TITLE
            }
        },

        // 格式化日期范围
        formatDateRange(dateArray) {
            return dateArray && Array.isArray(dateArray) && dateArray.length === 2 ? dateArray.join(' - ') : ''
        },

        // 安全获取数组
        safeGetArray(value) {
            return Array.isArray(value) ? value : []
        },

        // 处理证书文件数据
        processCertificateFiles(qualificationData = EMPTY_OBJECT, otherData = EMPTY_OBJECT) {
            const personnelCertificateFiles = []

            // 建造师证书 - 安全访问qualificationData属性
            const qualificationFileList = this.safeGetArray(qualificationData.fileList)
            if (qualificationFileList.length > 0) {
                const builderCert = {
                    personnelCertificate: this.getBuilderCertificateData(qualificationData),
                    resourceFilePo: this.getResourceFilePo(qualificationFileList),
                }
                // 确保数据有效才添加
                if (builderCert.personnelCertificate) {
                    personnelCertificateFiles.push(builderCert)
                }
            }

            // B证、C证、其他证书 - 安全访问qualificationData属性
            const qualificationFileList2 = this.safeGetArray(qualificationData.fileList2)
            if (qualificationFileList2.length > 0) {
                const otherCert = {
                    personnelCertificate: this.getOtherCertificateData(qualificationData),
                    resourceFilePo: this.getResourceFilePo(qualificationFileList2),
                }
                if (otherCert.personnelCertificate) {
                    personnelCertificateFiles.push(otherCert)
                }
            }

            // 职称证书 - 安全访问otherData属性
            const otherFileList = this.safeGetArray(otherData.fileList)
            if (otherFileList.length > 0) {
                const titleCert = {
                    personnelCertificate: this.getTitleData(otherData),
                    resourceFilePo: this.getResourceFilePo(otherFileList),
                }
                if (titleCert.personnelCertificate) {
                    personnelCertificateFiles.push(titleCert)
                }
            }

            return personnelCertificateFiles
        },

        // 组装表单数据
        assembleFormData(basicInfoData, qualificationData = EMPTY_OBJECT, otherData = EMPTY_OBJECT) {
            console.log(qualificationData);
            console.log(otherData);

            // 安全合并所有文件列表
            const allFiles = [
                ...this.safeGetArray(basicInfoData.fileList),
                ...this.safeGetArray(basicInfoData.fileList2),
                ...this.safeGetArray(basicInfoData.fileList3),
                ...this.safeGetArray(basicInfoData.fileList4),
            ].map(file => JSON.parse(JSON.stringify(file)))

            const formData = {
                ...basicInfoData,
                files: allFiles.map(file =>
                    file?.response?.fileRes ? { ...file.response.fileRes } : null
                ).filter(Boolean),
                delFiles: this.safeGetArray(basicInfoData.delFileList),
                delCertificateFiles: [
                    ...this.safeGetArray(qualificationData.delFileList),
                    ...this.safeGetArray(otherData.delFileList)
                ],
                enterpriseId: this.enterpriseId,
                personnelCertificateFiles: this.processCertificateFiles(qualificationData, otherData),
                personnelIntroduction: otherData.personnelIntroduction || ''
            }

            // 删除临时属性
            const tempProps = ['fileList', 'fileList2', 'fileList3', 'fileList4', 'delFileList', 'allFiles']
            tempProps.forEach(prop => delete formData[prop])

            return formData
        },

        // 保存
        async handleSave() {
            if (this.isSaving) return

            this.isSaving = true
            this.showSaveAnimation = true

            try {
                // 并行校验所有表单，安全处理可能不存在的组件
                const [basicInfoData, qualificationData, otherData] = await Promise.all([
                    this.$refs.basicInfoPersonnel.validate(),
                    this.isProjectChiefEngineer ? Promise.resolve(EMPTY_OBJECT) : this.qualificationInfoRef?.validate?.() || Promise.resolve(EMPTY_OBJECT),
                    this.$refs.otherInfoPersonnel.validate()
                ])
                console.log(basicInfoData, qualificationData, otherData);
                
                // 组装完整数据
                const formData = this.assembleFormData(basicInfoData, qualificationData, otherData)

                console.log('所有表单校验通过，完整数据:', formData)

                // 保存请求
                const res = await this.savePersonnel(formData)
                if (res.code === 200) {
                    this.$message.success('保存成功')
                    this.handleClose()
                }
            } catch (error) {
                if (error instanceof Error && error.message.includes('未填写完整')) {
                    this.$message.error(error.message)
                }
            } finally {
                this.isSaving = false
                this.showSaveAnimation = false
            }
        },

        // 保存接口
        async savePersonnel(formData) {
            const apiParams = this.isEditMode
                ? { ...formData, personnelId: this.personnelId }
                : formData

            const apiMethod = this.isEditMode ? editDataAPI : addDataAPI

            return await apiMethod(apiParams)
        },

        // 开始上传
        handleStartUpload(text) {
            this.animationText = text
            this.uploadQueue++
            this.showUploadAnimation = true
        },

        // 结束上传
        handleEndUpload() {
            if (this.uploadQueue > 0) {
                this.uploadQueue--
            }

            if (this.uploadQueue === 0) {
                this.showUploadAnimation = false
            }
        }
    }
}
</script>

<style scoped lang="scss">
.app-container {
    height: calc(100vh - 84px);
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    margin: 0;

    &.no-pointer-events {
        pointer-events: none;

        * {
            pointer-events: none;
        }
    }
}

.content-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 20px;
    min-height: 0; // 确保 flex 子元素可以正确收缩
}

.content-row {
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
}

.pane-left,
.pane-center,
.pane-right {
    background: #fff;
    border-radius: 16px;
    min-height: 400px;
    box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
    padding: 0;
    margin-bottom: 10px;
    flex: 1;
    min-width: 0;
}

.content-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.search-btn {
    width: 98px;
    height: 36px;
    background: #1F72EA;
    box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
    border-radius: 4px;
    border: none;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;

    &:hover {
        background: #4A8BFF;
        box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
    }

    &.is-loading {
        opacity: 0.7;
        pointer-events: none;
    }
}

.reset-btn {
    width: 98px;
    height: 36px;
    background: #FFFFFF;
    box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
    border-radius: 4px;
    border: none;
    color: #666;
    font-size: 14px;
    transition: all 0.3s ease;

    &:hover {
        background: #f5f5f5;
        color: #409EFF;
        box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
    }
}
</style>