<template>
  <a-table
    :data-source="list"
    :columns="recordColumns"
    :pagination="pagination"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <div class="table-actions">
          <a @click="gotoProject(record)">查看</a>
        </div>
      </template>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import { fetchRecords } from '@/api'
import { recordColumns } from './columns'
import { usePaging } from '@/hook'
import { router, RoutesName } from '@/router'

import type { Record } from '@/api'

const { list, pagination } = usePaging(fetchRecords, {})
const gotoProject = (record: Record) => {
  router.push({
    name: RoutesName.projectScenes,
    params: { id: record.projectId }
  })
}
</script>
