<!-- 图片预览弹窗 -->
<script lang="ts" setup name="ImagePreviewDialog">
import { getPhotoUrl } from '@/api/file'

const props = defineProps({
  width: {
    type: [Number, String],
    default: '',
  },
  height: {
    type: [Number, String],
    default: '',
  },
})

const dialogVisible = ref(false) // 弹窗显示状态
const loading = ref<boolean>(true)
const imageUrl = ref('')

const realWidth = computed(() => {
  return typeof props.width === 'string' ? props.width : `${props.width}px`
})

const realHeight = computed(() => {
  return typeof props.height === 'string' ? props.height : `${props.height}px`
})

/**
 * 初始化审批弹窗
 * @param printFileName 文件名
 */
function initDialog(printFileName: string) {
  dialogVisible.value = true
  imageUrl.value = ''
  loading.value = true

  getPhotoUrl(printFileName).then((res) => {
    imageUrl.value = res.data
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

// 关闭弹窗
function handleClose() {
  dialogVisible.value = false
}

// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="图片预览"
    :before-close="handleClose"
    append-to-body
  >
    <!-- pdf预览 -->
    <div v-loading="loading" class="imagePreviewer">
      <el-image :src="imageUrl" fit="contain" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[imageUrl]">
        <template #error>
          <div class="image-slot">
            <el-icon>
              <svg-icon name="image-load-fail" />
            </el-icon>
          </div>
        </template>
      </el-image>
    </div>
    <template #footer>
      <el-button type="info" @click="handleClose">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang=scss scoped>
.imagePreviewer {
  display: flex;
  justify-content: center;
}
</style>