<template>
    <Dialog v-bind="attrs" v-model="isShowDialog" :width="width" :top="top" v-if="isShowDialog">
        <div class="preview-container">
            <FilePreview :file="file" />
        </div>
    </Dialog>
</template>
<script lang="ts" setup name="FilePreviewDialog">
import { computed, defineProps, defineEmits } from 'vue'
import Dialog from '@/components/Dialog/index.vue'
import FilePreview from '@/components/FilePreview/index.vue'

const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
    file: {
        type: Object,
        default: () => {}
    },
    top: {
        type: String,
        default: '10vh'
    },
    width: {
        type: String,
        default: '1200px'
    }
})
const emit = defineEmits(['update:isShow'])

const isShowDialog = computed({
    get: () => {
        return props.isShow
    },
    set: (val) => {
        emit('update:isShow', val)
    }
})
const attrs = computed(() => {
    return {
        title: '预览：' + props.file.name
    }
})
</script>
<style lang="scss" scoped>
.preview-container {
    width: 100%;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
