<template>
    <div>
        <slot></slot>

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

        <!-- 图片预览 -->
        <div v-transfer-dom>
            <previewer :list="imgList" ref="previewer"></previewer>
        </div>

        <!-- 音视频弹窗 -->
        <x-dialog :show.sync="visible" hide-on-blur>
            <div class="dialog-title">
                <span class="ellipsis">{{ title }}</span>
                <x-icon type="ios-close-empty" size="30" @click="visible = false"></x-icon>
            </div>
            <video :src="mediaSrc" autoplay controls v-if="visible && mediaType === 'video'"></video>
            <audio :src="mediaSrc" autoplay controls v-else-if="visible"></audio>
        </x-dialog>

        <!-- 文本弹窗 -->
        <div v-transfer-dom>
            <popup v-model="textVisible" height="calc(100% - 100px)" should-scroll-top-on-show>
                <div class="text">
                    <iframe :src="textSrc" frameborder="0"></iframe>
                </div>
                <div class="close">
                    <x-button plain type="primary" @click.native="textVisible = false">关闭</x-button>
                </div>
            </popup>
        </div>
    </div>
</template>

<script>
import { TransferDom, XDialog, Previewer, Popup, XButton } from 'vux'
import { getFileHost } from '@/assets/utils/host.js'
export default {
    name: 'FormFile',
    directives: { TransferDom },
    components: {
        Previewer,
        XDialog,
        Popup,
        XButton,
        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 = [{ src: item.url }]
                this.$nextTick(() => {
                    this.$refs.previewer.show(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.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') {
                open(getFileHost('/pdfjs/web/viewer.html?file=' + item.url)) // pdf.js 在线预览
            } else {
                open(item.url)
            }
        },
        // 下载（图片直接长按下载，获取图片流会跨域，原链接下载会变成浏览器预览）
        download (item, download) {
            if (item.type !== 'other' || download) {
                const a = document.createElement('a')
                a.href = item.url
                a.download = item.name
                a.click()
            } else {
                this.$vux.confirm.show({
                    title: '提示',
                    content: '当前环境可能不支持下载该文件格式，若无法下载，请尝试长按复制文件链接在浏览器中打开下载：' + item.url,
                    confirmText: '继续下载',
                    onConfirm: () => {
                        this.download(item, true)
                    }
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
ul {
    width: 100%;
    overflow: hidden;
    li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 20px;
        border-radius: 4px;
        padding: 5px 10px;
        background-color: #f2f2f2;
        & + li {
            margin-top: 5px;
        }
        .handle {
            flex-shrink: 0;
            margin-left: 15px;
            font-size: 0;
            min-width: 95px;
            text-align: right;
            span {
                font-size: 12px;
                padding: 3px 8px;
                border-radius: 12px;
                vertical-align: top;
                background-color: #fff;
                color: #909399;
                border: 1px solid #DCDFE6;
                &:active {
                    color: #409EFF;
                    border-color: #409EFF;
                }
                & + span {
                    margin-left: 10px;
                }
            }
        }
    }
}
/deep/ .weui-dialog {
    max-width: none;
    min-width: 300px;
    padding: 0 10px 10px;
    .dialog-title {
        min-height: 44px;
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        span {
            text-align: left;
            padding: 5px 0;
            margin-right: 10px;
            line-height: 20px;
        }
        .vux-x-icon {
            flex-shrink: 0;
        }
    }
    video, audio {
        width: 100%;
        vertical-align: top;
    }
}
.text {
    height: calc(100% - 55px);
    padding: 10px 15px;
    background-color: #fff;
    overflow-x: auto;
    iframe {
        min-width: 100%;
        height: 100%;
        vertical-align: top;
    }
}
.close {
    padding: 10px 15px;
    .weui-btn {
        padding: 0;
    }
}
</style>
