import React from 'react';
import moment from 'moment';
import { Input, Switch } from 'kts-components-antd-x3';
import Invoice from '../../';
import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';

const InvoiceHeader = Invoice.InvoiceHeader;
const GoodsList = Invoice.GoodsList;

export default () => {

  const renderExpand = React.useCallback((form: WrappedFormUtils<any>) => {
    return (
      <div style={{ textAlign: 'right' }} >
        <label>收票邮箱:</label>
        {form.getFieldDecorator('email', {
        })(
          <Input style={{ width: 200 }} size="small" />
        )}
      </div>
    )
  }, [])

  return (
    <Invoice
      goodsList={<GoodsList menuExpansion={<span style={{ marginRight: 10 }} ><label>扩展：</label><Switch /></span>} />}
      invoiceHeader={<InvoiceHeader
        renderExpand={renderExpand}
        tag="草稿"
        fieldExpand={[
          {label:'发票代码 :',render:form=><span>扩展</span>},
          {label:'发票号码 :',render:form=><span>扩展</span>},
          {label:'扩展：',render:form=><span>扩展</span>},
          {label:'扩展：',render:form=><span>扩展</span>},
          {label:'扩展：',render:form=><span>扩展</span>},
        ]}
      />} // 设置草稿
    />
  );
};