<!--文件上传组件-->
<template>
    <div :key="uploadKey" style="width: 100%;">
        <div style="height: calc(100% - 80px);margin-top: 10px">
            <div class="file-item" v-for="(item, index) in newFiles">
                <div class="slt">
                    <template v-if="ifName(item) === 'img'">
                        <el-image ref="imageViewer" :hide-on-click-modal="true"
                            style="width: 30px; height: 30px;padding-top: 4px; margin-right: 8px;" :src="item.lsUrl"
                            :preview-src-list="[item.lsUrl]" :preview-teleported="true"></el-image>
                        <!-- <el-icon size="28" style="cursor: pointer;">
                            <Picture @click="showFile(item)" />
                        </el-icon> -->
                    </template>
                    <template v-else>
                        <el-icon size="28" style="cursor: pointer;">
                            <Document @click="showFile(item)" />
                        </el-icon>
                    </template>
                </div>

                <el-tooltip effect="dark" :content="item.name" placement="top">
                    <div class="filename">
                        {{ item.name }}
                    </div>
                </el-tooltip>
                <div>
                    <el-divider direction="vertical"></el-divider>
                </div>
                <div class="file-btn" key="index">

                    <el-tooltip effect="dark" content="预览" placement="top">
                        <el-icon size="20" style="margin-right: 10px;cursor: pointer;">
                            <View @click="showFile(item)" />
                        </el-icon>
                    </el-tooltip>

                    <el-tooltip effect="dark" content="下载" placement="top">
                        <el-icon size="20" style="margin-right: 10px;cursor: pointer;">
                            <Download @click="toHref(item)" />
                        </el-icon>
                    </el-tooltip>

                </div>
            </div>

        </div>
        <el-image-viewer v-if="showViewer" @close="closeViewer" :url-list="[url]" :zIndex="9999"></el-image-viewer>
    </div>
</template>

<script>
import OSSSerivce, {
    openWindowOnUrl,
    toHref
} from '@/api/sys/OSSService'
export default {
    props: {
        fileList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            uploadKey: '',
            url: '',
            newFiles: [],
            showViewer: false,
            ossService: null,
            delFlag: false,
            createBy: '',
            loading: false,
        }
    },
    watch: {
        fileList(newVal) {
            this.newFiles = []
            this.fileList.forEach(item => {
                this.ossService.getFileSizeByUrl(item.url).then((data) => {
                    let obj = { ...item, size: data.size, lsUrl: data.url }
                    this.newFiles.push(obj)
                    this.uploadKey = Date.now().toString();
                })
            })
        },
    },
    created() {
        this.ossService = new OSSSerivce()
        this.fileList.forEach(item => {
            this.ossService.getFileSizeByUrl(item.url).then((data) => {
                item.lsUrl = data.url
                item.size = data.size
                this.newFiles.push(item)
            })
        })
    },
    mounted() {
        window.onPreview = this.onPreview
    },
    methods: {
        showFile(row) {
            if (this.ifName(row) == "img") {
                this.ossService.getTemporaryUrl(row.url).then((data) => {
                    this.onPreview(data)
                })
            } else {

                openWindowOnUrl(row)
            }
        },
        onPreview(url) {
            this.url = url
            this.showViewer = true
        },
        // 关闭查看器
        closeViewer() {
            this.url = ''
            this.showViewer = false
        },
        toHref(row) {
            toHref(row)
        },
        ifName(row) {
            if (this.commonJS.isEmpty(row.name)) {
                row.name = '---'
                return "file"
            }
            let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
            if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
                return "img"
            } else {
                return "file"
            }
        },

    }
}
</script>
<style>
.el-divider__text {
    font-size: 16px;
    font-weight: bold;
}

.file-item {
    height: 40px;
    display: flex;
    width: 250px;
    align-items: center;
    border-radius: 10px;
    background-color: #f7f9fa;
    padding: 0 10px;
    margin-bottom: 10px;

    .slt {
        height: 100%;
        width: 40px;
        display: flex;
        align-items: center;
    }

    .filename {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        line-height: 40px;
    }

    .file-btn {
        display: flex;
        align-items: center;
    }

    .el-icon:hover {
        color: #2d8cf0;

    }
}
</style>
