<!--
@description: 未安装 Versatile 时，用 KPC Select + Input + Table 组合带状态筛选的列表。
-->
<script setup lang="ts">
import { computed, ref } from 'vue';
import {
  Button,
  Input,
  Option,
  Select,
  Table,
  TableColumn,
  type PaginationChangeData,
} from '@king-design/vue';

interface ResourceRow {
  id: string;
  name: string;
  status: 'running' | 'stopped';
  statusLabel: string;
  type: string;
}

const sourceRows = ref<ResourceRow[]>([
  {
    id: 'resource-001',
    name: 'demo-1',
    status: 'running',
    statusLabel: '运行中',
    type: '性能型',
  },
  {
    id: 'resource-002',
    name: 'demo-2',
    status: 'stopped',
    statusLabel: '已关机',
    type: '容量型',
  },
]);
const checkedKeys = ref<string[]>([]);
const keyword = ref('');
const status = ref('');
const page = ref(1);
const limit = ref(20);

const filteredRows = computed(() => {
  const query = keyword.value.trim().toLocaleLowerCase('zh-CN');
  return sourceRows.value.filter(
    (row) =>
      `${row.name} ${row.id}`.toLocaleLowerCase('zh-CN').includes(query) &&
      (!status.value || row.status === status.value),
  );
});

function rowKey(row: ResourceRow): string {
  return row.id;
}

function onPage(data: PaginationChangeData): void {
  page.value = data.value;
  limit.value = data.limit;
}

function resetPage(): void {
  page.value = 1;
}
</script>

<template>
  <main class="list-page">
    <header><h1>高级资源列表</h1></header>
    <section class="toolbar" aria-label="筛选和批量操作">
      <div class="actions">
        <Button type="primary">创建</Button>
        <Button :disabled="checkedKeys.length === 0">批量删除</Button>
      </div>
      <div class="filters">
        <Select v-model="status" clearable @change="resetPage">
          <Option value="running">运行中</Option>
          <Option value="stopped">已关机</Option>
        </Select>
        <Input
          v-model="keyword"
          clearable
          placeholder="请输入名称或 ID"
          @input="resetPage"
        />
      </div>
    </section>

    <Table
      :data="filteredRows"
      :row-key="rowKey"
      :pagination="{ value: page, limit, limits: [10, 20, 50], showTotal: true }"
      v-model:checked-keys="checkedKeys"
      @page="onPage"
    >
      <TableColumn title="资源名称" key="name" sortable />
      <TableColumn title="状态" key="statusLabel" />
      <TableColumn title="类型" key="type" />
      <TableColumn title="操作" key="actions" width="120" fixed="right">
        <template #template>
          <Button type="link">查看</Button>
        </template>
      </TableColumn>
    </Table>
  </main>
</template>

<style scoped>
.list-page {
  min-height: 100vh;
  padding: 24px;
  background: #fff;
}

.toolbar,
.actions,
.filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar {
  justify-content: space-between;
  margin: 24px 0 16px;
}

.filters :deep(.k-select),
.filters :deep(.k-input) {
  width: 220px;
}
</style>
