<template>
    <div class="preview-container">
        <!-- 图片预览 -->
        <div v-if="fileType === 'image' && filePath" class="preview-item">
            <a-image :width="200" :src="getFullPath(filePath)" />
        </div>

        <!-- 视频预览 -->
        <div v-if="fileType === 'video' && filePath" class="preview-item">
            <video controls :src="getFullPath(filePath)" style="width: 200px; height: auto;"></video>
        </div>

        <!-- 音频预览 -->
        <div v-if="fileType === 'audio' && filePath" class="preview-item">
            <audio controls :src="getFullPath(filePath)"></audio>
        </div>

        <!-- 文档预览 -->
        <div v-if="fileType === 'document' && filePath" class="preview-item">
            <a-button @click="handlePreviewDocument">预览文档</a-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';

const props = defineProps({
    fileType: {
        type: String,
        default: ''
    },
    filePath: {
        type: String,
        default: ''
    }
});

const getFullPath = (path) => {
    return getFileAccessHttpUrl(path);
};

const handlePreviewDocument = () => {
    window.open(getFullPath(props.filePath), '_blank');
};
</script>

<style scoped>
.preview-container {
    margin-top: 10px;
}

.preview-item {
    margin-bottom: 10px;
}
</style>