<template>
  <BaseCard title="交易明细">
    <div class="transaction-content">
      <div class="transaction-header">
        <div class="header-controls">
          <select v-model="currentFilter" class="filter-select">
            <option value="all">全部交易</option>
            <option value="today">今日交易</option>
            <option value="week">本周交易</option>
          </select>
          <div class="search-box">
            <input v-model="searchKeyword" placeholder="搜索交易..." class="search-input">
          </div>
        </div>
        <div class="summary-stats">
          <div class="stat-item">
            <span class="stat-label">总交易额</span>
            <span class="stat-value">{{ totalAmount }} 万元</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">交易笔数</span>
            <span class="stat-value">{{ totalCount }} 笔</span>
          </div>
        </div>
      </div>
      <div class="transaction-table">
        <div class="table-header">
          <div class="th">时间</div>
          <div class="th">品种</div>
          <div class="th">数量</div>
          <div class="th">单价</div>
          <div class="th">金额</div>
          <div class="th">状态</div>
        </div>
        <div class="table-body">
          <div 
            v-for="transaction in filteredTransactions" 
            :key="transaction.id" 
            class="table-row"
            :class="{ 'highlight': transaction.id === highlightId }"
          >
            <div class="td time">{{ transaction.time }}</div>
            <div class="td category">{{ transaction.category }}</div>
            <div class="td quantity">{{ transaction.quantity }}</div>
            <div class="td price">{{ transaction.price }}</div>
            <div class="td amount">{{ transaction.amount }}</div>
            <div class="td status">
              <span class="status-badge" :class="transaction.status">
                {{ getStatusText(transaction.status) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </BaseCard>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import BaseCard from './BaseCard.vue'

const highlightIndex = ref(0)
const currentIndex = ref(0)
const tableBody = ref(null)

// 模拟交易数据
const allTransactions = ref([
  {
    id: 'TXN001',
    category: '肉牛',
    quantity: 50,
    unitPrice: 15000,
    totalPrice: 75.0,
    buyer: '北京牧场',
    seller: '红原牧民',
    region: '北京',
    time: '2025/01/01 10:30',
    status: 'completed'
  },
  {
    id: 'TXN002',
    category: '奶牛',
    quantity: 30,
    unitPrice: 18000,
    totalPrice: 54.0,
    buyer: '上海乳业',
    seller: '高原农场',
    region: '上海',
    time: '2025/01/01 11:15',
    status: 'processing'
  },
  {
    id: 'TXN003',
    category: '黄牛',
    quantity: 80,
    unitPrice: 12000,
    totalPrice: 96.0,
    buyer: '广州食品',
    seller: '草原合作社',
    region: '广州',
    time: '2025/01/01 12:00',
    status: 'completed'
  },
  {
    id: 'TXN004',
    category: '水牛',
    quantity: 25,
    unitPrice: 14000,
    totalPrice: 35.0,
    buyer: '成都餐饮',
    seller: '藏区牧场',
    region: '成都',
    time: '2025/01/01 13:45',
    status: 'pending'
  },
  {
    id: 'TXN005',
    category: '牦牛',
    quantity: 40,
    unitPrice: 20000,
    totalPrice: 80.0,
    buyer: '西安贸易',
    seller: '高原牧业',
    region: '西安',
    time: '2025/01/01 14:20',
    status: 'completed'
  },
  {
    id: 'TXN006',
    category: '肉牛',
    quantity: 60,
    unitPrice: 16000,
    totalPrice: 96.0,
    buyer: '深圳集团',
    seller: '牧民联合社',
    region: '深圳',
    time: '2025/01/01 15:10',
    status: 'processing'
  },
  {
    id: 'TXN007',
    category: '奶牛',
    quantity: 35,
    unitPrice: 17500,
    totalPrice: 61.25,
    buyer: '杭州乳制品',
    seller: '草原农场',
    region: '杭州',
    time: '2025/01/01 16:30',
    status: 'completed'
  },
  {
    id: 'TXN008',
    category: '黄牛',
    quantity: 70,
    unitPrice: 13000,
    totalPrice: 91.0,
    buyer: '重庆食品',
    seller: '高原牧场',
    region: '重庆',
    time: '2025/01/01 17:15',
    status: 'pending'
  }
])

// 显示的交易记录（滚动显示）
const visibleTransactions = computed(() => {
  const itemsToShow = 6
  const result = []
  for (let i = 0; i < itemsToShow; i++) {
    const index = (currentIndex.value + i) % allTransactions.value.length
    result.push(allTransactions.value[index])
  }
  return result
})

const getStatusText = (status) => {
  const statusMap = {
    completed: '已完成',
    processing: '处理中',
    pending: '待处理'
  }
  return statusMap[status] || '未知'
}

// 自动滚动效果
let scrollTimer = null
let highlightTimer = null

onMounted(() => {
  // 数据滚动
  scrollTimer = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % allTransactions.value.length
  }, 3000)

  // 行高亮
  highlightTimer = setInterval(() => {
    highlightIndex.value = (highlightIndex.value + 1) % 6
  }, 1000)
})

onUnmounted(() => {
  if (scrollTimer) {
    clearInterval(scrollTimer)
  }
  if (highlightTimer) {
    clearInterval(highlightTimer)
  }
})
</script>

<style scoped>
.transaction-table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.table-header {
  display: grid;
  grid-template-columns: 80px 80px 80px 80px 90px 100px 100px 80px 120px 80px;
  background: rgba(64, 158, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.header-cell {
  padding: 12px 8px;
  font-size: 12px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.header-cell:last-child {
  border-right: none;
}

.table-body {
  flex: 1;
  overflow: hidden;
}

.table-row {
  display: grid;
  grid-template-columns: 80px 80px 80px 80px 90px 100px 100px 80px 120px 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.table-row:hover,
.table-row.highlight {
  background: rgba(64, 158, 255, 0.1);
}

.table-cell {
  padding: 10px 8px;
  font-size: 11px;
  color: #a0a8b8;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-cell:last-child {
  border-right: none;
}

.table-cell.quantity {
  color: #67C23A;
  font-weight: bold;
}

.table-cell.price {
  color: #409EFF;
  font-weight: bold;
}

.table-cell.total {
  color: #E6A23C;
  font-weight: bold;
}

.table-cell.time {
  color: #8B5CF6;
  font-size: 10px;
}

.status {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
}

.status.completed {
  background: rgba(103, 194, 58, 0.2);
  color: #67C23A;
}

.status.processing {
  background: rgba(230, 162, 60, 0.2);
  color: #E6A23C;
}

.status.pending {
  background: rgba(245, 108, 108, 0.2);
  color: #F56C6C;
}

/* 动画效果 */
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.table-row {
  animation: slideUp 0.5s ease;
}
</style> 