<template>
  <view class="image-preview-container">
    <view class="preview-title" v-if="title">{{ title }}</view>
    <view class="image-list" v-if="imageList && imageList.length > 0">
      <view 
        class="image-item"
        v-for="(image, index) in imageList"
        :key="index"
        @click="previewImages(index)"
        :style="{ width: width + 'rpx', height: height + 'rpx' }"
      >
        <image 
          :src="getImageUrl(image)"
          class="preview-image"
          mode="aspectFill"
        />
        <view class="image-overlay" v-if="showOverlay">
          <uni-icons type="eye" size="24" color="#fff"></uni-icons>
        </view>
      </view>
    </view>
    <view class="no-image" v-else>
      {{ emptyText || '暂无图片' }}
    </view>
  </view>
</template>

<script setup lang="ts">
import { imagUrl } from '@/utils'

const props = defineProps({
  imageList: {
    type: Array as () => string[],
    default: () => []
  },
  title: {
    type: String,
    default: ''
  },
  emptyText: {
    type: String,
    default: '暂无图片'
  },
  showOverlay: {
    type: Boolean,
    default: true
  },
  width: {
    type: Number,
    default: 120
  },
  height: {
    type: Number,
    default: 120
  }
})

const getImageUrl = (url: string) => {
  if (url && (url.startsWith('http://') || url.startsWith('https://'))) {
    return url
  }
  return imagUrl(url)
}

const previewImages = (currentIndex: number) => {
  if (!props.imageList || props.imageList.length === 0) return
  
  const urls = props.imageList.map(item => getImageUrl(item))
  
  uni.previewImage({
    current: currentIndex,
    urls: urls as string[]
  })
}
</script>

<style scoped>
.image-preview-container {
  padding: 20rpx;
  background-color: #fff;
}

.preview-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.image-item {
  position: relative;
  border-radius: 10rpx;
  overflow: hidden;
  border: 1rpx solid #eee;
}

.image-item:hover .image-overlay {
  opacity: 1;
}

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

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.no-image {
  text-align: center;
  color: #999;
  padding: 40rpx 0;
  font-size: 28rpx;
}

</style>