<template>
  <div class="table-wrapper">
    <table>
      <thead>
      <tr>
        <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
      </tr>
      </thead>
      <tbody>
      <tr v-if="!data?.length" class="empty-row"><td :colspan="columns.length">暂无数据</td></tr>
      <tr v-for="(row, idx) in data" :key="idx">
        <td v-for="col in columns" :key="col.key" :class="getCellClass(col, row)">
            <span
                v-if="col.key === 'stackerStatus'"
                class="stacker-status"
            >
              {{ formatCell(row, col) }}
            </span>
          <template v-else>
            {{ formatCell(row, col) }}
          </template>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  }
});

function formatCell(row, col){
  const v = row?.[col.key];
  return col.formatter ? col.formatter(v, row) : (v ?? '');
}

function getCellClass(col, row) {
  // 为特定列添加类名
  if (col.key === 'stackerStatus') {
    return 'status-cell';
  }
  return '';
}
</script>

<style scoped>
.table-wrapper {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #000000;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

thead th {
  background: #ff9b00;
  color: #000000;
  padding: 12px 10px;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  border-right: 2px solid rgba(255,255,255,0.3);
}

thead th:last-child {
  border-right: none;
}

tbody td {
  padding: 12px 10px;
  text-align: center;
  border-top: 1px solid #e0e6f3;
  border-right: 2px solid #d2d9eb;
  color: #141a29;
}

tbody td:last-child {
  border-right: none;
}

.empty-row td {
  color: #000000;
  padding: 24px 0;
}

/* 为设备状态添加淡色框包围样式 */
.stacker-status {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  background-color: #f6f8fa;
  color: #24292f;
  font-size: 14px;
  line-height: 1.4;
}

.status-cell {
  /* 可以为状态单元格添加额外样式 */
}
</style>
