import type { ActionType, ProColumns } from '@ant-design/pro-components';
import React, { useRef } from 'react';
import EnhancedProTable from '@/components/EnhancedProTable';
import ModalDescriptions, {
  type DescriptionsFormRef,
} from '@/components/ModalDescriptions';
import {
  getOperateLogPage,
  type OperateLogVO,
} from '@/services/system/log/operate';
import { baseTenantColumns, descriptionsColumns } from './config';

const SyStemLogOperate = () => {
  const tableRef = useRef<ActionType>(null);
  const descriptionsRef = useRef<DescriptionsFormRef>(null);
  const onFetch = async (
    params: OperateLogVO & {
      pageSize?: number;
      current?: number;
    },
  ) => {
    const data = await getOperateLogPage({
      ...params,
      pageNo: params.current,
      pageSize: params.pageSize,
    });
    return {
      data: data.list,
      success: true,
      total: data.total,
    };
  };

  const handleDetail = (record: OperateLogVO) => {
    descriptionsRef.current?.open(record);
  };

  const actionColumns: ProColumns<OperateLogVO> = {
    title: '操作',
    dataIndex: 'option',
    valueType: 'option',
    fixed: 'right',
    width: 80,
    render: (text: React.ReactNode, record: OperateLogVO) => [
      <a key="editable" onClick={() => handleDetail(record)}>
        详情
      </a>,
    ],
  };
  const columns = [...baseTenantColumns, actionColumns];
  return (
    <>
      <EnhancedProTable<OperateLogVO>
        ref={tableRef}
        columns={columns}
        request={onFetch}
        headerTitle="操作日志"
        showIndex={false}
        showSelection={false}
      />
      <ModalDescriptions
        ref={descriptionsRef}
        title="操作日志详情"
        columns={descriptionsColumns()}
      />
    </>
  );
};

export default React.memo(SyStemLogOperate);