<template>
  <!-- 使用原生 scroll-view 实现滚动 -->
  <scroll-view
    class="scroll-container"
    :scroll-y="true"
    :style="{ height: height, backgroundColor: backgroundColor }"
    @scroll="onScroll"
  >
    <!-- 顶部自定义区域 -->
    <slot name="top"></slot>
    
    <!-- 图片网格列表 -->
    <view class="video-grid" :style="gridStyle">
      <view 
        class="video-item" 
        mode="aspectFit"
        v-for="(item, index) in imageList" 
        :key="index"
        :style="itemStyle"
      >
        <!-- 视频播放器 -->
        <image
          :src="item.src"
          class="video-player"
          @click="onImageClick(item)"
        />
      </view>
    </view>
    
    <!-- 空数据提示 -->
    <view class="empty-container" v-if="imageList.length === 0">
      <slot name="empty" v-if="$slots.empty"></slot>
      <view v-else class="empty-content">
        <image 
          src="/static/images/empty-image.png" 
          mode="aspectFit" 
          class="empty-img"
        />
        <text class="empty-text">暂无数据</text>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: 'image-grid-enhanced',
  props: {
    // 视频数据列表
    imageList: {
      type: Array,
      required: true,
      default: () => []
    },
    // 每行列数
    columns: {
      type: Number,
      default: 2
    },
    // 间距
    gap: {
      type: String,
      default: '10px'
    },
    // 容器高度
    height: {
      type: String,
      default: '100vh'
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: '#FFFFFF'
    }
  },
  data() {
    return {
      scrollTop: 0, // 当前滚动位置
    };
  },
  computed: {
    gridStyle() {
      return {
        display: 'grid',
        gridTemplateColumns: `repeat(${this.columns}, 1fr)`,
        gap: this.gap,
        padding: '10px',
        backgroundColor: this.backgroundColor
      };
    },
    itemStyle() {
      const aspectRatio = 0.75; // 4:3比例
      return {
        position: 'relative',
        overflow: 'hidden',
        borderRadius: '8px',
        backgroundColor: this.backgroundColor,
        aspectRatio: aspectRatio
      };
    }
  },
  mounted() {
  },
  methods: {
    // 视频点击事件 - 通过蒙版层触发
    onImageClick(item) {
      console.log("拦截事件",item)
      this.$emit('image-click', item);
    },
    
    // 滚动事件处理
    onScroll(e) {
      this.scrollTop = e.detail.scrollTop;
      this.$emit('scroll', e);
    }
  }
};
</script>

<style scoped lang="scss">
.scroll-container {
  width: 100%;
  overflow: hidden;
}

.video-grid {
  padding: 8px;
}

.video-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.video-player {
  width: 100%;
  height: 100%;
  display: block;
  background: #f7f7f7;
}

/* 蒙版层样式 - 覆盖整个视频项 */
.video-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.video-meta {
  padding: 12px;
}

.video-title {
  font-size: 14px;
  line-height: 1.5;
  color: white;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.action-btn {
  display: flex;
  align-items: center;
  margin-left: 15px;
  
  text {
    font-size: 12px;
    margin-left: 4px;
    color: white;
  }
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-img {
  width: 150px;
  height: 150px;
  opacity: 0.5;
}

.empty-text {
  font-size: 16px;
  color: #999;
  margin-top: 20px;
}
</style>