<template>
    <el-dialog class="preview" v-model="showDialog" style=""  @close="closeView">
        <iframe v-if="isPDF" ref="pdfRef" width="100%" :height="frameHeight" :src="pdfUrl" frameborder="0"></iframe>
        <el-carousel justify="center" v-else indicator-position="outside">
            <el-carousel-item class="carousel-item" v-for="url in imageArray" :key="url">
                    <el-image style="border:1px solid red;height:100%" fit="contain" :src="url" loading="lazy" />
            </el-carousel-item>
        </el-carousel>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const showDialog = ref(false) // 弹窗控制
const message = useMessage() // 消息弹窗
const isPDF = ref(false) // 是否是pdf
const pdfUrl = ref<string>('') // pdf地址
const pdfRef = ref() // pdf组件
const frameHeight = ref(0)
const imageArray = ref<string[]>([]) // 图片数组
const closeView = () => {
  showDialog.value = false
}
// 打开预览
const openPreview = async (data:string[]|string)=>{
    showDialog.value = true
    if(Array.isArray(data)){
        //图片数组
        isPDF.value = false
        pdfUrl.value = ''
        imageArray.value = data.filter(item=>(item.replace('/get/','/show/')))
    }else{
        isPDF.value = true
        pdfUrl.value = data.replace('/get/','/show/')
        nextTick(()=>{
            frameHeight.value = window.innerHeight - 2*pdfRef.value.getBoundingClientRect().top
        })
    }
}

defineExpose({openPreview})

</script>

<style>
/* .preview .el-dialog__headerbtn .el-dialog__close{
    color: white !important;
    font-size: 20px !important;
}
.preview.el-dialog {
    --el-dialog-box-shadow:null;
} */
</style>
<style lang="scss" scoped>
.carousel-item{
    display: flex;
    justify-content: center;
    align-items: center;
}

</style>