<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  src: {
    type: String,
    required: true
  },
  alt: {
    type: String,
    default: '图片'
  },
  maxHeight: {
    type: Number,
    default: 500
  }
})

const isExpanded = ref(false)
const showExpand = ref(false)

const handleImageLoad = (event) => {
  const img = event.target
  console.log(props.alt,img.naturalHeight,'img.naturalHeight')
  showExpand.value = img.naturalHeight > props.maxHeight
  console.log(showExpand.value,'showExpand.value')
}

const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}
</script>

<template>
  <div class="image-container">
    <div
      class="image-wrapper"
      :class="{ 'expanded': isExpanded }"
      :style="{ maxHeight: !isExpanded ? `${maxHeight}px` : 'none' }"
    >
      <img
        :src="src"
        :alt="alt"
        @load="handleImageLoad"
        class="responsive-image"
      >
    </div>

    <div v-if="showExpand && !isExpanded" class="expand-hint" @click="toggleExpand">
      <span>点击查看完整图片</span>
    </div>

    <div v-if="isExpanded" class="collapse-hint" @click="toggleExpand">
      <span>收起图片</span>
    </div>
  </div>
</template>

<style scoped>
.image-container {
  position: relative;
  width: 100%;
}

.image-wrapper {
  width: 100%;
  overflow: hidden;
  transition: max-height 0.3s ease;
  position: relative;
}

.image-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  //background: linear-gradient(transparent, rgba(255,255,255,0.9));
  pointer-events: none;
}

.image-wrapper.expanded::after {
  display: none;
}

.responsive-image {
  width: 100%;
  height: auto;
  display: block;
}

.expand-hint {
  text-align: center;
  padding: 8px;
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
  cursor: pointer;
  margin-top: 8px;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.3s;
}

.expand-hint:hover {
  background: rgba(64, 158, 255, 0.2);
}

.collapse-hint {
  text-align: center;
  padding: 8px;
  background: rgba(103, 194, 58, 0.1);
  color: #67c23a;
  cursor: pointer;
  margin-top: 8px;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.3s;
}

.collapse-hint:hover {
  background: rgba(103, 194, 58, 0.2);
}
</style>
