<!-- 搜索表单 -->
<template>
  <div class="hello-card">
    <img class="chat-image" :src="imgSrc" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';

  const props = defineProps<{
    // 勾选的项目
    src: string;
  }>();

  const imgSrc = ref<string>('');

  const calcImage = (src: string, maxWaitLoad = 6000) => {
    return new Promise((resolve, reject) => {
      let img = new Image();
      img.src = src;
      if (img.complete) {
        const { width, height } = img;
        resolve({
          width,
          height
        });
      } else {
        let timeOut = setTimeout(() => {
          reject('图片加载失败！');
        }, maxWaitLoad);
        img.onload = function () {
          const { width, height } = img;
          window.clearTimeout(timeOut);
          resolve({
            width,
            height
          });
        };
      }
    });
  };
  calcImage(props.src);
  watch(
    () => props.src,
    (src) => {
      if (src) {
        calcImage(src);
      }
    }
  );
</script>
<style>
  .chat-image {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
  }
</style>
