<!--
@description: 未安装 Versatile 时，使用 KPC Table 组合标准资源列表。Table 使用内置选择列。
-->
<script setup lang="ts">
import { computed, ref } from 'vue';
import {
  Button,
  Icon,
  Input,
  Table,
  TableColumn,
  Tooltip,
} from '@king-design/vue';
import type { PageChangeData, ResourceRow } from './instances/types';
import { resourceRows } from './instances/mock';
import { filterResourceRows } from './instances/utils';

const checkedKeys = ref<string[]>([]);
const keyword = ref('');
const page = ref(1);
const limit = ref(20);

const filteredRows = computed(() => {
  return filterResourceRows(
    resourceRows,
    'name',
    keyword.value,
  );
});

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

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

function openDocumentation(): void {
  window.open(
    'https://docs.ksyun.com',
    '_blank',
    'noopener,noreferrer',
  );
}
</script>

<template>
  <main class="list-page">
    <header class="page-header">
      <div class="page-header-inner">
        <span class="page-title">资源列表</span>
        <Button
          class="doc-button"
          type="link"
          @click="openDocumentation"
        >
          <Icon class="k-icon-paper" />
          <span>相关文档</span>
        </Button>
      </div>
    </header>

    <div class="list-content">
      <section class="toolbar" aria-label="列表操作">
        <div class="toolbar-actions">
          <Button type="primary">新建</Button>
          <Button :disabled="checkedKeys.length === 0">批量操作</Button>
        </div>
        <div class="toolbar-search">
          <Input v-model="keyword" placeholder="请输入名称或 ID" clearable />
          <div class="toolbar-icons">
            <Tooltip content="刷新">
              <button type="button" class="toolbar-icon" aria-label="刷新">
                <Icon class="k-icon-refresh" />
              </button>
            </Tooltip>
            <Tooltip content="导出">
              <button type="button" class="toolbar-icon" aria-label="导出">
                <Icon class="k-icon-upload" />
              </button>
            </Tooltip>
            <Tooltip content="自定义列表字段">
              <button type="button" class="toolbar-icon" aria-label="列设置">
                <Icon class="k-icon-settings" />
              </button>
            </Tooltip>
          </div>
        </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="资源名称/ID" key="name" width="240">
          <template #template="[row]">
            <div class="primary-cell">
              <a href="javascript:;">{{ row.name }}</a>
              <small>{{ row.id }}</small>
            </div>
          </template>
        </TableColumn>
        <TableColumn title="状态" key="status" width="120" />
        <TableColumn title="创建时间" key="createdAt" width="180" />
        <TableColumn title="操作" key="actions" width="140" fixed="right">
          <template #template>
            <Button type="link">查看</Button>
            <Button type="link">删除</Button>
          </template>
        </TableColumn>
      </Table>
    </div>
  </main>
</template>

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

.page-header {
  position: relative;
  left: 0 !important;
  height: auto !important;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f2f4;
  z-index: 1;
}

.page-header-inner,
.toolbar,
.toolbar-actions,
.toolbar-search,
.primary-cell {
  display: flex;
}

.page-header-inner,
.toolbar {
  align-items: center;
  justify-content: space-between;
}

.page-header-inner {
  width: 100%;
}

.page-title {
  color: #151b1e;
  font-size: 14px;
  font-weight: 500;
}

.doc-button {
  padding: 0 !important;
  line-height: 1;
}

.list-content {
  padding: 24px;
}

.toolbar {
  margin-bottom: 16px;
}

.toolbar-actions,
.toolbar-search {
  align-items: center;
}

.toolbar-actions {
  gap: 8px;
}

.toolbar-search {
  gap: 16px;
}

.toolbar-search :deep(.k-input) {
  width: 280px;
}

.toolbar-icons {
  display: flex;
  align-items: center;
}

.toolbar-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.toolbar-icon:hover,
.toolbar-icon:focus-visible {
  color: #0091ea;
  background: #f3f5f6;
  outline: none;
}

.primary-cell {
  flex-direction: column;
  gap: 4px;
}

.primary-cell small {
  color: #999;
}
</style>
