<template class="file-style">
    <div element-loading-text="附件删除中..." element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255,255,255, 0.5)" v-loading.fullscreen.lock="markLoading">
        <div class="file-item" v-for="(file, index) in fileList" :key="index">
            <span class="file_name" :title="file.name || file.fileName + '.' + file.extensionName">{{
                file.name || file.fileName + '.' + file.extensionName
            }}</span>
            <span>
                <el-link type="primary" v-if="fileTypeArr.includes(
                            file.fileType
                                ? file.fileType.toLowerCase()
                                : file.extensionName
                                    ? file.extensionName.toLowerCase()
                                    : file.name.split('.')[1].toLowerCase()
                        )
                        " :underline="false" @click="handlePreview(file)">预览</el-link>
                <el-link type="primary" :underline="false" @click="handleDownloadFile(file)">下载</el-link>
                <el-link type="danger" v-if="isDelete" :underline="false" @click="beforeRemove(file)">删除</el-link>
            </span>
        </div>
        <div class="classified" v-if="classified">文件涉密，已通过内网邮件上传。</div>
        <filePreview ref="filePreview"> </filePreview>
    </div>
</template>

<script>
import sat from '@/api/satisfaction/satisfaction'
import filePreview from '@/components/FilePreview/filePreview.vue'
const portal = window.context.portal
export default {
    name: 'FileList',
    components: {
        filePreview,
    },
    props: {
        fileList: {
            type: Array,
            default: function () {
                return []
            },
        },
        isDelete: {
            type: Boolean,
            default: false,
        },
        // 文件是否涉密
        classified: {
            type: Boolean,
            default: false,
        },
        isRequest: {
            type: Boolean,
            default: true,
        }
    },
    data() {
        return {
            markLoading: false,
            // 可预览文件类型
            fileTypeArr: [
                'png',
                'jpg',
                'jpeg',
                'bmp',
                'gif',
                'webp',
                'psd',
                'svg',
                'tiff',
                'docx',
                'pdf',
            ],
            // 文件是否支持预览
            isFilePreview: true,
            previewUrl: `${portal}/file/onlinePreviewController/v1/getFileById_`,
        }
    },
    methods: {
        // 文件删除
        beforeRemove(file, fileList) {
            this.$emit('idExist', file.id || file.response.fileId)
            let name = file.name
                ? file.name
                : file.fileName + '.' + file.extensionName
            this.$confirm(`确定删除 ${name}？`, this.$t('common.tips'), {
                confirmButtonText: this.$t('common.confirm'),
                cancelButtonText: this.$t('common.cancel'),
                type: 'error',
            })
                .then(() => {
                    
                    let id = file.fileId
                        ? file.fileId
                        : file.id
                            ? file.id
                            : file.response.fileId
                    if (this.isRequest) {
                        this.markLoading = true
                        sat.deleteFileById(id, (res) => {
                            if (res.state) {
                                this.$message.success('附件删除成功')
                                let arr = this.fileList.filter((item) => {
                                    let fileId = item.id || item.response.fileId
                                    if (fileId !== id) {
                                        return item
                                    }
                                })
                                this.markLoading = false
                                this.$emit('changeFileList', arr)
                            } else {
                                this.markLoading = false
                                this.$message.error('附件删除失败')
                            }
                        })
                    } else {
                        let arr = this.fileList.filter((item) => {
                            let fileId = item.id || item.response.fileId
                            if (fileId !== id) {
                                return item
                            }
                        })
                        this.$emit('changeFileList', arr)
                    }

                })
                .catch(() => {
                    this.markLoading = false
                })
        },
        // 文件预览
        handlePreview(file) {
            let id = file.fileId
                ? file.fileId
                : file.id
                    ? file.id
                    : file.response.fileId
            let type = file.fileType || (file.extensionName
                ? file.extensionName
                : file.name.split('.')[1])
            this.$refs.filePreview.previewUrl = this.previewUrl + id
            this.$refs.filePreview.open(type)
        },
        // 文件下载
        handleDownloadFile(file) {
            let id = file.fileId
                ? file.fileId
                : file.id
                    ? file.id
                    : file.response.fileId
            window.open(portal + `/file/v1/downloadFile?fileId=${id}`, '_self')
        },
    },
}
</script>

<style lang="scss" scoped>
.file-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 5PX 0 5PX 8PX;
    margin-left: -5PX;
    border-bottom: 1PX solid #f5f5f5;

    >* {
        font-size: 14PX !important;
    }

    a {
        margin: 0 10PX;
        user-select: none;

    }

    .file_name {
        max-width: 220PX;
        height: 22PX;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.file-item:hover {
    background-color: #f5f5f5;
    border-radius: 5PX;
    color: #2761ff;
}
</style>
