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

export default () => {

  const controller = React.useMemo(() => new Invoice.InvoiceController(), []);

  React.useEffect(() => {
    controller.pipeline(async s => {
      s.goodsListState.goodsMenuExpand = [
        () => <Menu.Item key="自定义1" ><Typography.Text strong>自定义1</Typography.Text></Menu.Item>,
        () => <Menu.Item key="自定义2" ><Typography.Text strong>自定义2</Typography.Text></Menu.Item>,
        () => <Menu.Item key="自定义3" ><Typography.Text strong>自定义3</Typography.Text></Menu.Item>,
        (index, controller) => <Menu.Item key="自定义4" onClick={async () => {
          // 注意： 如果不保存货物，获取的数据是编辑前端的数据
          await controller.saveEditGood(); // 保存正在编辑的货物
          await controller.wait()          // 等待保存完成
          await controller.pipeline(async s => {
            console.log('===>', s.goodsListState.goodsMap.get(index)) // 输出当前货物
          })()
        }} ><Typography.Text strong>自定义4</Typography.Text></Menu.Item>,
      ]
    })()
  }, [controller])

  return (
    <div>
      <Invoice controller={controller} />
    </div>
  );
};