<template>
  <div class="image-list-container">
    <!-- 卡片列表 -->
    <div class="image-grid">
      <el-card
        v-for="item in props.imageList"
        :key="item.id"
        class="image-card"
        shadow="hover"
        :class="{ 'selected': selectedItems.includes(item.id) }"
      >
        <!-- 复选框 -->
        <!-- <div class="checkbox-container">
          <el-checkbox-group v-model="selectedItems">
            <el-checkbox :value="item.id" size="large"></el-checkbox>
          </el-checkbox-group>
        </div> -->

        <!-- 图片预览 -->
        <div class="image-container">
          <ImagePreview :src="item.analyseCoordUrl" width="100%" height="180px" />
        </div>

        <!-- 卡片内容 -->
        <div class="card-content">
          <div class="card-info">
            <div class="info-item">
              <span class="label">设备编号:</span>
              <span class="value">{{ item.deviceNo }}</span>
            </div>
            <div class="info-item">
              <span class="label">拍摄时间:</span>
              <span class="value">{{ formatDate(item.createTime) }}</span>
            </div>
            <div class="info-item">
              <span class="label">害虫数量:</span>
              <span class="value">{{ item.value || 0 }}</span>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="action-buttons">
            <el-button
              size="small"
              type="primary"
              @click="handleReport(item)"
              icon="view"
            >
            查看
            </el-button>
            <!-- <el-button
              type="primary"
              size="small"
              @click="handleAnalyze(item.id)"
              icon="Search"
            >
              分析
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(item.id)"
              icon="Delete"
            >
              删除
            </el-button> -->
          </div>
        </div>
      </el-card>
    </div>

    <!-- 分页组件 -->
    <div class="pagination">
      <Pagination
        v-model:page="currentPage"
        v-model:limit="pageSize"
        :total="total"
        @pagination="handlePagination"
      />
    </div>
  </div>
</template>

// 确保已正确导入ImagePreview组件
<script setup>
import ImagePreview from '@/components/ImagePreview/index.vue'
import { formatDate } from '@/utils/index'

// 定义props
const props = defineProps({
  imageList: {
    type: Array,
    default: () => []
  }
})

// 定义emits
const emit = defineEmits(['handleAnalyze', 'handleDelete', 'handleReport'])

// 响应式数据
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const loading = ref(false)
// 添加多选相关数据
const selectedItems = ref([])
const selectAll = ref(false)

// 监听选中项变化，更新全选状态
watch(selectedItems, (newVal) => {
  selectAll.value = newVal.length === props.imageList.length && newVal.length > 0

})

// 处理分页
function handlePagination(data) {
  currentPage.value = data.page
  pageSize.value = data.limit
  emit('pageChange', data)
}

function handleReport(item) {
  emit('handleReport', item)
}

// 处理分析
function handleAnalyze(item) {
  emit('handleAnalyze', item)
}
</script>

// 所有样式统一移到这里
<style lang="scss" scoped>
.image-list-container {
  @apply w-full;
}

.image-grid {
  @apply grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4;
}

// 卡片样式
.image-card {
  @apply rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg relative bg-gray-50;
  &.selected {
    @apply border-2 border-primary shadow-lg;
  }
  // 移除内联样式，在这里统一设置
  .el-card__body {
    @apply p-0;
  }
}

// 复选框样式
.checkbox-container {
  @apply absolute top-3px right-13px z-10 rounded-full p-10px;
}

// 图片容器样式
.image-container {
  @apply w-full h-48 overflow-hidden cursor-pointer;
}

// 卡片内容样式
.card-content {
  @apply p-3;
}

.card-info {
  @apply space-y-2;
}

.info-item {
  @apply flex justify-between items-center;
}

.label {
  @apply text-gray-500;
}

.value {
  @apply font-medium;
}

// 操作按钮样式
.action-buttons {
  @apply flex justify-between mt-3;
}

// 分页样式
.pagination {
  @apply mt-6 flex justify-center;
}
</style>