<template>
  <div class="p-4">
    <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }">
      <template #action="{ record }">
          <button @click="handleGoToPage(record, `/sealed/${record.code}`)" class="action-btn">
            <SvgIcon name="view" />
          </button>
        </template>
    </BasicTable>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';
  import { BasicTable, useTable } from '/@/components/Table';
  import { dataColumns } from './closed.data';
  import { getClosedAccessCount } from '../basicInfo.api';
  import { SvgIcon } from '/@/components/Icon';

  // 路由实例
  const router = useRouter();
  // 注册表格并获取相关方法
  const [registerTable] = useTable({
    title: '密闭统计',
    api: getClosedAccessCount, // 数据统计接口
    columns: dataColumns,
    pagination: true,
    useSearchForm: false,
    // showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    // canResize: false,
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  /**
   * 通用页面跳转方法
   * @param record 当前行数据
   * @param path 目标路径
   */
  function handleGoToPage(record: any, path: string) {
    // 跳转时携带当前煤矿的编号作为参数（根据实际需求调整携带的参数）
    router.push({
      path,
      // query: {
      //   orderNo: record.orderNo, // 煤矿编号
      //   mineName: record.mineName // 煤矿名称
      // }
    });
  }
</script>>

<style lang="less" scoped>
  .action-btn {
    cursor: pointer;
    margin-right: 10px;

    &:last-child {
      margin-right: 0;
    }
  }
</style>