import React, { useRef } from 'react';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { getCompanyUnsubscribes } from '@/services/jobportal/outdoorFairDetail';

interface Props {
  fairId: number;
}

const CompanyUnsubscribeTab: React.FC<Props> = ({ fairId }) => {
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<API.OutdoorFairDetail.CompanyUnsubscribe>[] = [
    {
      title: '企业名称',
      dataIndex: 'companyName',
      ellipsis: true,
      order: 1,
    },
    { title: '联系人', dataIndex: 'contactPerson', width: 120, hideInSearch: true },
    { title: '联系电话', dataIndex: 'contactPhone', width: 150, hideInSearch: true },
    {
      title: '退订原因',
      dataIndex: 'reason',
      ellipsis: true,
      hideInSearch: true,
      render: (_, record) => <span title={record.reason}>{record.reason}</span>,
    },
    {
      title: '退订时间',
      dataIndex: 'unsubscribeTime',
      valueType: 'dateTime',
      width: 180,
      hideInSearch: true,
    },
  ];

  return (
    <ProTable<API.OutdoorFairDetail.CompanyUnsubscribe>
      headerTitle="企业退订记录"
      actionRef={actionRef}
      rowKey="id"
      columns={columns}
      search={{ labelWidth: 'auto' }}
      options={false}
      scroll={{ x: 'max-content' }}
      pagination={{ pageSize: 10 }}
      request={async (params) => {
        const res = await getCompanyUnsubscribes(fairId, {
          current: params.current,
          pageSize: params.pageSize,
          companyName: params.companyName,
        });
        return {
          data: res.rows || [],
          total: res.total || 0,
          success: res.code === 200,
        };
      }}
    />
  );
};

export default CompanyUnsubscribeTab;