<template>
    <div>
        <ul>
            <li v-for="(item, index) in list" :key="index">
                <div class="name" :title="item.name">{{item.name}}</div>
                <div class="handle">
                    <el-link
                        type="primary"
                        icon="el-icon-search"
                        @click="preview(item)"
                        v-if="item.type !== 'other'"
                    >预览</el-link>
                    <el-link
                        type="primary"
                        icon="el-icon-download"
                        @click="download(item)"
                        v-if="item.type !== 'image'"
                    >下载</el-link>
                </div>
            </li>
        </ul>
        <template v-if="!value.length">-</template>

        <!-- 图片预览 -->
        <el-image
            class="preview"
            ref="preview"
            :preview-src-list="imgList"
        ></el-image>

        <!-- 音视频弹窗 -->
        <el-dialog width="680px" :title="title" :visible.sync="visible" append-to-body>
            <video :src="mediaSrc" autoplay controls v-if="visible && mediaType === 'video'"></video>
            <audio :src="mediaSrc" autoplay controls v-else-if="visible"></audio>
        </el-dialog>

        <!-- 文本弹窗 -->
        <el-dialog width="680px" :title="title" :visible.sync="textVisible" append-to-body>
            <div class="text">
                <iframe :src="textSrc" frameborder="0"></iframe>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getFileHost } from '@/assets/utils/host.js'
export default {
    name: 'FormFile',
    components: {
        FormImg: () => import('./FormImg')
    },
    props: {
        value: { type: Array, default: () => [] }
    },
    data () {
        return {
            list: [], // 文件列表
            title: '', // 弹窗标题
            mediaSrc: '', // 音视频链接
            mediaType: '', // 视频或音频
            visible: false, // 是否显示弹窗
            imgList: [], // 预览的图片
            textSrc: '', // 文本链接
            textVisible: false, // 是否显示文本弹窗

            mediaReg: /^(image|video|audio)\//,
            textReg: /\.txt$/i,
            officeReg: /\.(docx?|xlsx?|pptx?)$/i,
            pdfReg: /\.pdf$/i
        }
    },
    created () {
        this.format()
    },
    methods: {
        // 解析文件
        format () {
            this.list = this.value.map(item => {
                const file = JSON.parse(item)
                return {
                    name: file.fullName,
                    url: getFileHost(file.url),
                    type: this.type(file.type, file.suffix)
                }
            })
        },
        // 匹配格式
        type (type, suffix) {
            return this.mediaReg.test(type) ? type.replace(/\/.+/, '')
                : this.textReg.test(suffix) ? 'text'
                    : this.officeReg.test(suffix) ? 'office'
                        : this.pdfReg.test(suffix) ? 'pdf'
                            : 'other'
        },
        // 预览
        preview (item) {
            if (item.type === 'image') {
                this.imgList = [item.url]
                this.$nextTick(() => {
                    this.$refs.preview.showViewer = true
                    this.$refs.preview.$children[0].index = 0
                })
            } else if (item.type === 'video' || item.type === 'audio') {
                this.title = item.name
                this.mediaSrc = item.url
                this.mediaType = item.type
                this.visible = true
            } else if (item.type === 'text') {
                this.title = item.name
                this.textSrc = item.url
                this.textVisible = true
            } else if (item.type === 'office') {
                open('https://view.officeapps.live.com/op/view.aspx?src=' + item.url) // 微软在线预览
            } else if (item.type === 'pdf' && 'ActiveXObject' in window) {
                open(getFileHost('/pdfjs/web/viewer.html?file=' + item.url)) // IE 浏览器 pdf.js 在线预览
            } else {
                open(item.url) // 其中 pdf 文件在非 IE 浏览器打开即在线预览
            }
        },
        // 下载（图片直接右键下载，获取图片流会跨域，原链接下载会变成浏览器预览）
        download (item) {
            this.$api.commonApi.formGetFile(item.url).then(res => {
                const a = document.createElement('a')
                a.href = URL.createObjectURL(res.data)
                a.download = item.name
                a.click()
            })
        }
    }
}
</script>

<style lang="less" scoped>
ul {
    max-width: 600px;
    margin: 0 -10px;
    display: flex;
    flex-direction: column;
    li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 20px;
        border-radius: 4px;
        padding: 3px 10px;
        &:hover {
            background-color: #F5F7FA;
        }
        .name {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .handle {
            flex-shrink: 0;
            margin-left: 20px;
            .el-link + .el-link {
                margin-left: 10px;
            }
        }
    }
}
.preview /deep/ .el-image__error {
    display: none;
}
video, audio {
    width: 640px;
    vertical-align: top;
}
iframe {
    min-width: 100%;
    height: 500px;
    vertical-align: top;
}
</style>
