<script setup lang="ts">
import { computed } from 'vue'

interface TableItem {
  field: string
  value: string
}

const props = defineProps<{
  items: TableItem[]
  title?: string
  icon?: any
}>()

// 将数据转换为横向布局
const horizontalData = computed(() => {
  if (props.items.length === 0) return []
  
  // 创建表头行（字段名）
  const headerRow = props.items.map(item => item.field)
  
  // 创建数据行（值）
  const dataRow = props.items.map(item => item.value)
  
  return [
    { type: 'header', cells: headerRow },
    { type: 'data', cells: dataRow }
  ]
})
</script>

<template>
  <div class="horizontal-table-container">
    <div v-if="title" class="table-title">
      <component v-if="icon" :is="icon" :size="16" />
      {{ title }}
    </div>
    <div class="horizontal-table-wrapper">
      <table class="horizontal-table">
        <tbody>
          <tr v-for="(row, index) in horizontalData" :key="index" :class="row.type">
            <td v-for="(cell, cellIndex) in row.cells" :key="cellIndex" class="table-cell">
              <span v-if="row.type === 'header'" class="cell-header">{{ cell }}</span>
              <span v-else class="cell-value">{{ cell }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.horizontal-table-container {
  margin-bottom: 24px;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}

.horizontal-table-wrapper {
  overflow-x: auto;
  background: #fafafa;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.horizontal-table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 13px;
}

.horizontal-table tr.header {
  background: #f0f0f0;
}

.horizontal-table tr.data {
  background: #ffffff;
}

.table-cell {
  padding: 10px 16px;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap;
  min-width: 120px;
}

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

.cell-header {
  font-weight: 600;
  color: #666;
  display: block;
}

.cell-value {
  color: #333;
  display: block;
  font-weight: 500;
}

/* 滚动条样式 */
.horizontal-table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.horizontal-table-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.horizontal-table-wrapper::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.horizontal-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>