import React from 'react';
import { Drawer, Table } from 'kts-components-antd-x3';
import Invoice from '../../..';

export default () => {
  const controller = Invoice.useInvoiceController();

  const visible = controller.useMemo((s) => s.buyerState.isVisibleDrawer, []);

  const topExpand = controller.useMemo((s) => s.buyerState.topExpand, []);

  // controller.pipeline(async s=>s.goodsListState.isTaxIncluded = true)()

  const onClose = React.useCallback(() => {
    controller.pipeline(async (s) => {
      s.buyerState.isVisibleDrawer = false;
    })();
  }, [controller]);

  return (
    <Drawer
      title="购方列表"
      placement="right"
      // closable={false}
      destroyOnClose={true}
      width={983}
      onClose={onClose}
      visible={visible}
    >
      {topExpand}
      <DrawerBody />
    </Drawer>
  );
};

const DrawerBody = () => {
  const controller = Invoice.useInvoiceController();

  const columns = controller.useMemo((e) => e.buyerState.columns, []);

  const dataSource = controller.useMemo((e) => e.buyerState.dataSource, []);
  
  const pagination = controller.useMemo((e) => e.buyerState.pagination, []);

  React.useEffect(() => {
    controller.getBuyerList &&
      controller.getBuyerList({ pagination: { current: 1 } });
  }, [controller]);

  return (
    <Table
      bordered
      size="small"
      columns={columns}
      dataSource={dataSource}
      pagination={pagination}
      onChange={(pagination) => {
        controller.getBuyerList && controller.getBuyerList({ pagination });
      }}
      onRow={(record) => {
        return {
          onClick: async () => {
            const re = await controller.state.buyerState.onRowClick(record); 
            if (re) {
              controller.formList.get('buyer')?.setFieldsValue(re);
              controller.pipeline(async (s) => {
                s.buyerState.isVisibleDrawer = false;
              })();
            }
          },
        };
      }}
    />
  );
};