<template>
    <div>
        <a-button type="text" size="small" @click="show = true">查看</a-button>
        <a-drawer
            :mask-closable="false"
            :header="false"
            width="80%"
            v-model:visible="show"
        >
            <div v-if="file">
                <div class="font-18 bold">{{ file.fileName }}</div>
                <a-divider />
                <div>
                    <iframe
                        v-if="file.suffix === '.pdf'"
                        style="width: 100%; height: 100vh"
                        :src="`/api/file/` + file.id"
                    >
                    </iframe>
                    <vue-office-docx
                        v-else-if="['.docx'].includes(file.suffix)"
                        :src="`/api/file/` + file.id"
                        style="width: 100%; height: 100vh"
                    />
                    <vue-office-excel
                        v-else-if="['.xlsx', '.xls'].includes(file.suffix)"
                        :src="`/api/file/` + file.id"
                        style="width: 100%; height: 100vh"
                    />
                    <div v-else-if="file.fileType.indexOf('image') > -1">
                        <a-image
                            :src="`/api/file/` + file.id"
                            :fit="'contain'"
                            height="960px"
                            width="100%"
                        />
                    </div>
                    <div
                        v-else
                        class="flex flex-center flex-col"
                        style="margin-top: 20%"
                    >
                        <a-button
                            type="primary"
                            status="danger"
                            @click="download"
                            >立即下载
                        </a-button>
                        <div class="grey-6 mt-20">
                            该类型的文件不支持在线预览，请点击 立即下载
                            后使用对应软件查看
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="flex flex-center flex-col"
                v-else
                style="margin-top: 20%"
            >
                <icon-loading :size="32" />
                <div class="mt-20">加载中，请稍后</div>
            </div>
            <template #footer>
                <div>
                    <a-button type="primary" @click="download">下载</a-button>
                </div>
            </template>
        </a-drawer>
    </div>
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

export default {
    components: {
        VueOfficeDocx,
        VueOfficeExcel
    },
    props: {
        fileId: {
            required: true,
            type: String,
            default: ''
        }
    },
    watch: {
        show: {
            handler(val) {
                if (val) {
                    this.fetchFile()
                }
            }
        }
    },
    data() {
        return {
            show: false,
            file: null
        }
    },
    methods: {
        fetchFile() {
            this.$api.file.info(this.fileId).then(res => {
                if (res.code === 200) {
                    this.file = res.data
                }
            })
        },
        download() {
            this.$api.file.download({ fileId: this.file.id }).then(res => {
                if (res.hasOwnProperty('code')) {
                    this.$message.error(res.msg)
                    return
                }
                this.downloadFile(res)
            })
        },
        downloadFile(res) {
            const url = window.URL.createObjectURL(new Blob([res]))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            const excelName = this.file.fileName
            link.setAttribute('download', excelName)
            document.body.appendChild(link)
            link.click()
            link.remove()
            this.$notification.success('下载成功')
        }
    }
}
</script>

<style lang="scss" scoped></style>
