<template>
  <div class="table-view-list">
    <div class="table-view-list__header">
      <span class="table-view-list__title">数据表</span>
      <a-button
        size="small"
        type="text"
        :icon="h(PlusOutlined)"
        @click="emit('create', fileId ?? null)"
      />
    </div>

    <a-spin :spinning="loading">
      <div class="table-view-list__items">
        <div
          v-for="t in tables"
          :key="t.id"
          class="table-view-list__item"
          :class="{ 'is-active': t.id === activeId }"
          @click="emit('select', t.id)"
        >
          <TableOutlined class="table-view-list__icon" />
          <span class="table-view-list__name">{{ t.name }}</span>
        </div>

        <a-empty
          v-if="!loading && tables.length === 0"
          :image="Empty.PRESENTED_IMAGE_SIMPLE"
          description="暂无数据表"
          class="table-view-list__empty"
        />
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { h } from 'vue'
import { Button as AButton, Spin as ASpin, Empty } from 'ant-design-vue'
import { PlusOutlined, TableOutlined } from '@ant-design/icons-vue'
import type { IBitableTable } from '@/api/bitable'

defineProps<{
  tables: IBitableTable[]
  activeId: string | null
  fileId?: string | null
  loading?: boolean
}>()

const emit = defineEmits<{
  (e: 'select', tableId: string): void
  (e: 'create', fileId: string | null): void
}>()
</script>

<style scoped>
.table-view-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #fff);
  border-right: 1px solid var(--border-color, #f0f0f0);
}

.table-view-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #f0f0f0);
}

.table-view-list__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #1f1f1f);
}

.table-view-list__items {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.table-view-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
  color: var(--text-secondary, #595959);
}

.table-view-list__item:hover {
  background: var(--bg-secondary, #fafafa);
}

.table-view-list__item.is-active {
  background: var(--color-primary-bg, #fbfbfa);
  color: var(--color-primary, #1a1a1a);
  font-weight: 500;
}

.table-view-list__icon {
  font-size: 14px;
  flex-shrink: 0;
}

.table-view-list__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-view-list__empty {
  padding: 24px 0;
}
</style>
