import React from 'react';
import { Invoice } from '../../..';
import { IGetBuyerListOption } from '../../../Invoice/InvoiceController/InvoiceControllerState/BuyerState';

export default () => {
  const controller = React.useMemo(() => new MyBuyerController(), []);

  // 扩展内容
  const topExpand = React.useMemo(() => {
    return (
      <div>扩展</div>
    )
  }, [])

  React.useEffect(() => {
    // 设置扩展内容
    controller.pipeline(async s => {
      s.buyerState.topExpand = topExpand
    })()
  }, [topExpand, controller])

  React.useEffect(() => {
    controller.pipeline(async s => {
      s.buyerState.onRowClick = e => {
        console.log('点击了列表行', e);
        return e;
      }
    })()
  }, [])

  return <Invoice controller={controller} />;
};

// 重写 购买方 的数据源，实现 ‘获取 购买方 列表’ 方法
class MyBuyerController extends Invoice.InvoiceController {
  constructor() {
    super();
    this.state.buyerState.columns = [
      ...this.state.buyerState.columns,
      {
        title: '附加信息',
        dataIndex: 'affix',
        key: 'affix',
      },
    ];
  }

  getBuyerList = this.pipeline<IGetBuyerListOption>(async (state, option) => {
    if (!option) return;

    const { current = 1 } = option.pagination;

    const dataSource: any[] = [];
    for (let i = 0; i < 20; i++) {
      const p = i + 20 * (current - 1);
      dataSource.push({
        buyerName: `名称${p}`,
        buyerNo: `纳税人识别号${p}`,
        buyerAddress: `地址${p}/电话${p}`,
        buyerBank: `开户行及账号${p}`,
        address: `地址${p}`,
        phone: `电话${p}`,
        affix: `附加信息${p}`,
      });
    }

    state.buyerState.pagination = {
      ...option.pagination,
      pageSize: 20,
      total: 80,
    };
    state.buyerState.dataSource = dataSource;
  });
}