<template>
  <div class="" style="display: flex; align-items: center;" :style="{ ...containerStyle }">
    <div
      class="img-container"
      :style="{ 
        width: computedWidth, 
        height: computedHeight, 
        marginRight: '10px', 
        border: '1px solid rgb(220 223 231)', 
        borderRadius: computedRadius, 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'center', 
        overflow: 'hidden',
        ...imgContainerStyle
      }"
    >
      <img
        :src="url"
        class="card-img"
        :style="{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }"
      />
    </div>

    <div class="text-container"  style="flex-grow: 1; min-width: 50px; line-height: 25px;" :style="{ ...textContainerStyle }">
      <slot name="label"></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick, onBeforeUnmount } from 'vue';

// 接收 props
const props = defineProps({
  url: {
    type: String,
    required: true,
  },
  width: {
    type: [String, Number],
    required: true,
  },
  height: {
    type: [String, Number],
    required: true,
  },
  radius:{
    type: [String, Number],
    default: 5
  },
  containerStyle:{
    type: Object, 
    default: () => ({}),
  },
  imgContainerStyle:{
    type: Object, 
    default: () => ({})
  },
  textContainerStyle:{
    type: Object, 
    default: () => ({})
  }
});

// 动态宽度使用 `vw` 单位
const computedWidth = computed(() => {
  return `min(${props.width}px, 80vw)` // 最大宽度为80%视口宽度
});

// 计算高度
const computedHeight = computed(() => {
  return typeof props.height === 'number' ? `${props.height}px` : props.height;
});

// 计算圆角
const computedRadius = computed(() => {
  return typeof props.radius === 'number' ? `${props.radius}px` : props.radius;
});


// 计算最小图片宽度
const calculateMinWidth = () => {
  nextTick(() => {
    const images = document.querySelectorAll('.card-img');
    let minWidthVal = Infinity;

    images.forEach((img) => {
      const imgWidth = img.clientWidth;
      if (imgWidth < minWidthVal) {
        minWidthVal = imgWidth;
      }
    });

    if (minWidthVal !== Infinity) {
      minWidth.value = minWidthVal;
    }
  });
};

// 挂载后计算最小宽度
onMounted(() => {
  calculateMinWidth();
  window.addEventListener('resize', calculateMinWidth);
});

// 组件卸载前移除事件监听
onBeforeUnmount(() => {
  window.removeEventListener('resize', calculateMinWidth);
});
</script>

<style scoped>

.img-container {
  border: 1px solid #dcdfe7;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* 针对不同设备的媒体查询 */
@media screen and (min-width: 1200px) {
  .img-container {
    max-width: 300px; /* 限制高分辨率设备上的最大宽度 */
    max-height: 168px; /* 按照16:9比例 */
  }
}

@media screen and (max-width: 768px) {
  .img-container {
    max-width: 80vw; /* 视口宽度的80% */
    max-height: 45vw; /* 视口宽度的45% 以保持16:9比例 */
  }
}

/* 针对高分辨率设备，通过缩放比例调节 */
@media (min-resolution: 2dppx) and (max-width: 1200px) {
  .img-container {
    max-width: 60vw; /* 限制图片在高分辨率设备上的占比 */
    max-height: 45vw; /* 保持16:9比例 */
  }
}

@media (min-resolution: 3dppx) and (max-width: 1200px) {
  .img-container {
    max-width: 40vw; /* 限制图片在非常高分辨率设备上的占比 */
    max-height: 45vw; /* 保持16:9比例 */
  }
}
</style>
