import { ProTable } from '@ant-design/pro-components';
import { Select } from 'antd';

const columns = [
  {
    title: '用戶狀態(tài)',
    dataIndex: 'status',
    valueType: 'select',  // 指定為 select 類型
    fieldProps: {
      options: [
        { label: '正常', value: 'active' },
        { label: '禁用', value: 'banned' },
        { label: '待審核', value: 'pending' },
      ],
    },
  },
  {
    title: '用戶名',
    dataIndex: 'username',
  },
];

const dataSource = [
  { id: 1, username: '張三', status: 'active' },
  { id: 2, username: '李四', status: 'banned' },
];

export default function Demo() {
  return (
    <ProTable
      rowKey="id"
      columns={columns}
      dataSource={dataSource}
      search={{ labelWidth: 'auto' }} // 開啟搜索表單
    />
  );
}

{
  title: '用戶狀態(tài)',
  dataIndex: 'status',
  renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
    if (type === 'form') return null; // 確保僅在搜索框生效
    return (
      <Select {...rest} placeholder="請選擇用戶狀態(tài)">
        <Select.Option value="active">正常</Select.Option>
        <Select.Option value="banned">禁用</Select.Option>
        <Select.Option value="pending">待審核</Select.Option>
      </Select>
    );
  },
}