<template>
    <el-dialog title="请选择要发送的文件" v-model="modelValue" width="600px" :close-on-click-modal="false" @close="handleClose">
        <div v-if="fileList.length" class="file-list">
            <div v-for="(item, index) in fileList" :key="index" class="file-item" @click="selectItem(item)"
                :class="{ selected: selectedResume && selectedResume.attachmentAddress === item.attachmentAddress }">
                <img class="file-icon" src="../../../public/icon-pdf.png" alt="icon" />
                <div class="file-info">
                    <div class="file-name">{{ item.attachmentName }}</div>
                    <div class="file-desc">{{ item.attachmentSize }}kb 更新于 {{ item.createTime }}</div>
                </div>
                <el-button size="mini" @click.stop="previewDoc(item)">预览</el-button>
            </div>
        </div>
        <div v-else class="empty-list">暂无附件</div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="goToManage">管理附件</el-button>
            <el-button type="primary" :disabled="!selectedResume" @click="confirmSelect">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>

export default {
    name: "AttachmentSelectDialog",
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            fileList: [],
            selectedResume: null,
            modelValue: false
        }
    },
    mounted() {
        this.modelValue = this.showDialog;
        this.loadAttachmentList()
    },
    methods: {
        async loadAttachmentList() {
            try {
                const res = await this.$Request.get('/app/resumes/getAttachment')
                if (res.code === 0 && Array.isArray(res.data)) {
                    res.data.forEach(item => {
                        const ext = item.attachmentName.split('.').pop().toLowerCase()
                        item.fileType = ext
                    })
                    this.fileList = res.data;
                }
            } catch (err) {
                console.error('获取附件列表失败:', err)
            }
        },
        previewDoc(item) {
            window.open(item.attachmentAddress, '_blank')
        },
        goToManage() {
            this.$router.push('addResume')
        },
        selectItem(item) {
            this.selectedResume = item
        },
        confirmSelect() {
            this.$emit('select', this.selectedResume)
            this.handleClose()
        },
        handleClose() {
            this.selectedResume = null
            this.$emit('closePostPush', false)
        },
    }
}
</script>

<style scoped>
.file-list {
    max-height: 400px;
    overflow-y: auto;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.file-item.selected {
    background-color: #f0f5ff;
}

.file-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.file-info {
    flex: 1;
    margin: 0 10px;
}

.file-name {
    font-weight: 500;
    color: #222;
}

.file-desc {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.empty-list {
    text-align: center;
    color: #999;
    padding: 20px 0;
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
}
</style>