<template>
  <div class="p-4">
    <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }"  />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getAccessStatisticsColumns } from './access.data';
  import { getGoafAccessCount } from '../basicInfo.api';

  export default defineComponent({
    components: { BasicTable },
    setup() {
      const [registerTable] = useTable({
        api: getGoafAccessCount,
        columns: getAccessStatisticsColumns(),
        pagination: true,
        showIndexColumn: false,
        // 合计行样式高亮（区分普通数据行）
        rowClassName: (record) => (record.region === '合计' ? 'bg-gray-50 font-medium' : ''),
      });

      return {
        registerTable,
      };
    },
  });
</script>
<style scoped>
  /* 合计行样式优化 */
  .bg-gray-50 {
    background-color: #f9fafb;
  }
  .font-medium {
    font-weight: 500;
  }
</style>
