<!-- 人员详情 -->
<template>
    <div class="app-container">
        <div class="content-header">
            <el-button class="reset-btn" @click="handleClose">返回</el-button>
            <el-button class="edit-btn" @click="handleEdit">编辑</el-button>
        </div>
        <div class="content-body">
            <el-row :gutter="24" class="content-row">
                <!-- 基本信息 -->
                <el-col :span="6" class="pane-left">
                    <BasicInfoPersonnelDetail 
                        ref="basicInfoPersonnel"
                        :detail-data="detailData" 
                        :personnel-position="personnelPosition"
                        @handle-personnel-position="handlePersonnelPosition" 
                    />
                </el-col>
                
            </el-row>

            <el-row :gutter="24" class="content-row">
                
                <!-- 资质信息 -->
                <el-col v-if="!isProjectChiefEngineer" :span="6" class="pane-center">
                    <QualificationInfoPersonnelDetail 
                        ref="qualificationInfoPersonnel"
                        :personnel-position="personnelPosition" 
                        :detail-data="detailData" 
                    />
                </el-col>
            </el-row>

            <el-row :gutter="24" class="content-row">
                <!-- 其他信息 -->
                <el-col :span="6" class="pane-right">
                    <OtherInfoPersonnelDetail 
                        ref="otherInfoPersonnel" 
                        :detail-data="detailData" 
                    />
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { encryptWithSM4, decryptWithSM4 } from '@/utils/sm'
import BasicInfoPersonnelDetail from './child/BasicInfoDetail.vue'
import QualificationInfoPersonnelDetail from './child/QualificationInfoDetail.vue'
import OtherInfoPersonnelDetail from './child/OtherInfoDetail.vue'
import { getDetailDataAPI } from '@/api/enterpriseLibrary/personnel/personnel'

export default {
    name: 'PersonnelDetail',
    components: {
        BasicInfoPersonnelDetail,
        QualificationInfoPersonnelDetail,
        OtherInfoPersonnelDetail
    },
    dicts: ['personnel_position'],
    data() {
        return {
            type: '',
            enterpriseId: '',
            personnelId: '',
            // 人员职位
            personnelPosition: {
                label: '项目经理',
                value: 'project_manager',
                qualification: '建造师证书、安全考核B证'
            },
            detailData: {},
        }
    },
    computed: {
        // 是否为项目总工
        isProjectChiefEngineer() {
            return this.personnelPosition.value === 'project_chief_engineer'
        }
    },
    watch: {
        'dict.type.personnel_position': {
            handler(newVal) {
                if (newVal && newVal.length > 0) {
                    this.getDetail()
                }
            },
        }
    },
    created() {
        this.initRouteParams()
    },
    methods: {
        // 初始化路由参数
        initRouteParams() {
            const query = this.$route.query
            this.type = decryptWithSM4(query.type || '')
            this.enterpriseId = decryptWithSM4(query.enterpriseId || '')
            this.personnelId = decryptWithSM4(query.personnelId || '')
        },
        
        // 返回
        handleClose() {
            const obj = {
                path: "/personnel/index",
                query: {
                    enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
                }
            }
            this.$tab.closeOpenPage(obj)
        },
        
        // 获取详情
        async getDetail() {
            try {
                const res = await getDetailDataAPI({
                    personnelId: this.personnelId,
                    enterpriseId: this.enterpriseId
                })
                
                this.detailData = res.data
                this.getPersonnelPosition()
            } catch (error) {
                console.error('获取详情失败:', error)
                this.$message.error('获取详情失败')
            }
        },
        
        // 获取人员职位-回显
        getPersonnelPosition() {
            const positionData = this.detailData.enterprisePersonnel
            if (!positionData || !positionData.personnelPosition) return
            
            const positionObj = this.dict.type.personnel_position.find(
                item => item.value === positionData.personnelPosition
            )
            
            if (positionObj) {
                this.personnelPosition = {
                    label: positionObj.label,
                    value: positionObj.value,
                    qualification: positionObj.raw?.remark || ''
                }
            }
        },
        // 编辑
        handleEdit() {
            this.$router.push({
                name: 'PersonnelEditForm',
                query: {
                    type: encryptWithSM4('edit'),
                    enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
                    personnelId: encryptWithSM4(this.personnelId + '' || '0'),
                }
            })
        },
        // 人员职位
        handlePersonnelPosition(data) {
            this.personnelPosition = data
        },

    }
}
</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;
}

.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 16px 16px 16px;
    min-height: 400px;
    box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
    // border: 1px solid #e8f4ff;
    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;
}

.edit-btn {
    width: 98px;
    height: 36px;
    background: #EAA819;
    box-shadow: 0px 4px 8px 0px rgba(255,156,51,0.5);
    border-radius: 4px 4px 4px 4px;
    border-color: #EAA819;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 14px;
    transition: all 0.3s ease;

    &:hover {
        background: #ffb733;
        border-color: #ffb733;
        box-shadow: 0px 6px 12px 0px rgba(255,156,51,0.6);
        transform: translateY(-1px);
    }
}

.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>