<template>
  <div class="ml-23px box-border min-h-930px w-516px border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-33px py-22px">
    <div class="flex items-center">
      <img src="@/assets/images/preview.png" alt="" srcset="" width="16px" height="19px" /><span class="ml-7px text-18px text-[#333333] font-normal"
        >预览</span
      ></div
    >
    <div class="mt-20px">
      <el-image :src="previewUrl" class="mb-16px max-h-320px max-w-460px min-h-200px" fit="contain"></el-image>
      <span class="text-16px text-[#333333] font-normal">{{ previewName || '图纸标题' }}</span></div
    >
    <div class="my-30px h-1px w-460px rounded-1px bg-[#EEEEEE]"></div>
    <div class="flex items-center"
      ><img src="@/assets/images/tip.png" width="20px" height="20px" /><span class="ml-7px text-18px text-[#333333] font-normal"
        >上传遇到问题可以咨询</span
      ></div
    >
    <div class="mt-20px text-center"><el-image src="https://picsum.photos/290/290?_t" alt="" srcset="" class="h-290px w290" /></div>
    <div class="mt-30px text-center text-16px text-[#333333] font-normal">
      <div>TEL：13315189735 </div>
      <div class="mt-4px">在线时间：8:30-18:00</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  const previewUrl = defineModel<string>('previewUrl', {
    required: true,
  })
  const previewName = defineModel<string>('previewName', {
    required: true,
  })
</script>
