<template>
  <el-image-viewer
    v-if="visible && urlList.length"
    :url-list="urlList"
    :initial-index="initialIndex"
    teleported
    :z-index="zIndex"
    @close="handleClose"
  />
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    /** 与 v-model:visible 同步 */
    visible: boolean;
    urlList: string[];
    initialIndex?: number;
    /** 高于 el-table fixed 列、侧栏等，避免预览被盖住 */
    zIndex?: number;
  }>(),
  { initialIndex: 0, zIndex: 5000 }
);

const emit = defineEmits<{
  "update:visible": [boolean];
}>();

function handleClose() {
  emit("update:visible", false);
}
</script>
