<template>
    <div>
        <el-dialog title="预览"
            :visible="true"
            width="1050px"
            append-to-body
            @close="handleClose" >
            <div slot="title">
                <TitleBar title="预览"></TitleBar>
            </div>
            <div  style="height: 800px; text-align: center; " class="c-flex-center">
                   <!-- svg -->
                   <svgViewer :src="previewUrl" v-if="isSvg"></svgViewer>
                   <!-- 其他图片 -->
                   <el-image  :src="previewUrl" fit="scale-down" v-else style="height: 100%;width: 100%;"></el-image>
            </div>
        
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">关闭</el-button>
            </span>
        </el-dialog>
        
    </div>
</template>

<script>
    export default {
        components: {
            svgViewer: () => import('./svg-viewer'),
        },
        props: {
            previewUrl: {
                type: String,
                default: () => {
                    return ''
                },
            },
            isSvg:{
               type: Boolean,
               default: false
            }
        },
        data() {
            return {
                
            };
        },
        computed:{
            
        },
        async created() {
            
        },
        mounted(){
            
        },
        beforeDestroy() {
            
        },
        methods: {
            handleClose() {
                this.$emit('update:visible', false)
            },
        }
    };
</script>
<style lang="scss" scoped>

</style>