<template>
  <!-- 图片查看弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="查看发票图片"
    :width="`600px`"
    :close-on-click-modal="false">
    <div class="flex justify-center p-4">
      <img
          :src="formData.invoiceUrl"
          alt="发票图片"
          class="max-w-[500px] max-h-[400px] object-contain border rounded"
          @error="handleImageError"
      />
    </div>
  </el-dialog>
</template>
<script setup lang="ts">

const dialogVisible = ref(false) // 弹窗是否展示

const formData = ref({
  id: undefined, // 订单编号
  invoiceStatus: undefined,
  invoiceUrl: ''
})


const open = async (row) => {
  resetForm()
  // 设置数据
  formData.value.id = row.id
  formData.value.invoiceStatus = row.invoiceStatus
  formData.value.invoiceUrl = row.invoiceUrl
  dialogVisible.value = true
}

defineExpose({open}) // 提供 open 方法，用于打开弹窗

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined, // 订单编号
    invoiceStatus: undefined,
    invoiceUrl: ''
  }
}

const handleImageError = (e) => {
  e.target.src = 'https://picsum.photos/600/400?grayscale&blur=2'; // 占位图
  e.target.alt = '图片加载失败';
};

</script>


<style scoped lang="scss">

</style>
