<template>
    <div class="file-preview-container flex-center">
        <template v-if="type === 'image'">
            <div class="image-preview-loading flex-center" v-if="imageLoading">
                <el-progress
                    :percentage="50"
                    :stroke-width="15"
                    striped
                    :indeterminate="true"
                    :show-text="false"
                />
            </div>
            <el-image
                v-if="!imageLoading && imgUrl"
                :src="imgUrl"
                :preview-src-list="[imgUrl]"
                fit="cover"
                class="image-preview"
            />
        </template>
        <template v-else-if="type === 'doc'">
            <PDFPreview v-if="pdfUrl_" :pdfUrl="pdfUrl_" :fileSize="fileSize_"></PDFPreview>
            <div v-else>抱歉，该文件获取失败！</div>
        </template>
        <template v-else-if="type === 'video'">
            <VideoFlowPlayer
                v-if="videoUrl_"
                :src="videoUrl_"
                class="video-preview"
            ></VideoFlowPlayer>
            <div v-else>抱歉，该文件获取失败！</div>
        </template>
        <div v-else>抱歉，该文件暂不支持预览！</div>
    </div>
</template>

<script lang="ts" setup name="FilePreview">
import { getImgUrlById, onlinePreview } from '@/api/system/file'
import { computed, defineProps, watch, ref } from 'vue'
import PDFPreview from '@/components/PDFPreview/index.vue'
import VideoFlowPlayer from '@/components/VideoPlayer/VideoFlowPlayer.vue'
const props = defineProps({
    file: {
        type: Object,
        default: () => {}
    }
})

const type = computed(() => props.file.type)
const baseUrl = computed(() => {
    return window.config.API_BASE_URL
})

const imageLoading = ref(false)

const imgUrl = ref('')

const pdfUrl_ = ref('')

const fileSize_ = ref(0)

watch(
    type,
    () => {
        if (type.value === 'image') {
            getImage()
        } else if (type.value === 'doc' || type.value === 'video') {
            getPdfOrVideo()
        }
    },
    { immediate: true }
)

async function getImage() {
    if (props.file.id) {
        imageLoading.value = true
        try {
            const userPhotoData = (await getImgUrlById(props.file.id)) as any
            if (userPhotoData) {
                imgUrl.value = userPhotoData
            }
        } catch (error) {
            console.log(error)
        } finally {
            imageLoading.value = false
        }
    }
}

const videoUrl_ = ref('')

async function getPdfOrVideo() {
    if (props.file.id) {
        const { pdfUrl, fileSize = 0, mediaUrl } = (await onlinePreview(props.file.id)) as any
        if (pdfUrl && props.file.type === 'doc') {
            pdfUrl_.value = baseUrl.value + pdfUrl
            fileSize_.value = fileSize
        } else if (mediaUrl && props.file.type === 'video') {
            videoUrl_.value = baseUrl.value + mediaUrl
        }
    }
}
</script>

<style lang="scss" scoped>
.file-preview-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.image-preview-loading {
    width: 400px;
    height: 200px;
    .el-progress {
        width: 100%;
    }
}
.image-preview {
    max-height: 100%;
    max-width: 100%;
    overflow: auto;
}
.video-preview {
    width: 100%;
    height: 100%;
    max-width: 1200px;
}
</style>
