<template>
  <div class="page-container">
    <div class="page-header">
      <PageTitle title="我的足迹" />
      <el-button type="danger" link @click="handleClearAll"><el-icon><Delete /></el-icon>删除足迹</el-button>
    </div>
    <!-- 按日期分组的足迹列表 -->
    <div class="footprint-list">
      <div v-for="(group, groupIndex) in footprintGroups" :key="groupIndex" class="footprint-group">
        <div class="group-header"><span class="group-date">{{ group.date }} {{ group.label }}</span></div>
        <div class="product-grid">
          <ProductCard
            v-for="(item, itemIndex) in group.products"
            :key="itemIndex"
            :product="item"
            v-model="item.checked"
            show-checkbox
          />
        </div>
      </div>
    </div>
    <el-empty v-if="footprintGroups.length === 0" description="暂无浏览足迹" />
    <TablePagination v-if="footprintGroups.length > 0" v-model:page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total" @change="handleQuery" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { PageTitle, ProductCard, TablePagination } from '@/components'

const queryParams = reactive({ pageNum: 1, pageSize: 20 })
const total = ref(100)

const footprintGroups = ref([
  { date: '12月10日', label: '昨天', products: [
    { id: 1, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '协议价', image: '', checked: true },
    { id: 2, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '', checked: false },
    { id: 3, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '', checked: false },
    { id: 4, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '', checked: false },
    { id: 5, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '', checked: false }
  ]},
  { date: '12月07日', label: '', products: [
    { id: 6, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '协议价', image: '', checked: true },
    { id: 7, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '', checked: true },
    { id: 8, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '', checked: false }
  ]}
])

const handleQuery = () => {}
const handleClearAll = () => {
  const selectedItems: any[] = []
  footprintGroups.value.forEach(group => { group.products.forEach(item => { if (item.checked) selectedItems.push(item) }) })
  if (selectedItems.length === 0) {
    ElMessageBox.confirm('确定要清空所有浏览足迹吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { footprintGroups.value = []; ElMessage.success('已清空所有足迹') })
  } else {
    ElMessageBox.confirm(`确定要删除选中的${selectedItems.length}条足迹吗？`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { footprintGroups.value.forEach(group => { group.products = group.products.filter(item => !item.checked) }); footprintGroups.value = footprintGroups.value.filter(group => group.products.length > 0); ElMessage.success('删除成功') })
  }
}
</script>

<style scoped lang="scss">
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; :deep(.page-title) { margin-bottom: 0; } }
.footprint-list { .footprint-group { margin-bottom: 25px; .group-header { margin-bottom: 15px; .group-date { font-size: 14px; color: #666; &::before { content: '•'; margin-right: 8px; color: #999; } } } .product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; } } }
</style>
