<template>
  <el-dialog v-model="visible" title="检查照片">
    <el-descriptions border :column="1">
      <el-descriptions-item label="检查照片">
        <img
          v-for="item in file"
          :key="item.url"
          v-viewer
          :src="item.url"
          alt=""
          class="ml-10"
          width="100"
          height="100"
        />
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModel } from "@vueuse/core";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  file: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
</script>

<style scoped lang="scss"></style>
