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

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>
    )
  }, [])

  // 配置 发票种类
  const typeOption = React.useMemo(() => {
    return [
      {
        title: '发票1',
        value: [
          { id: 'buyerName', label: '购买方名称', node: <Input size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
          { id: 'buyerNo', label: '购买方纳税人识别号', node: <Input size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
          { id: 'buyerAddress', label: '购买方地址及电话', node: <Input size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
          { id: 'buyerBank', label: '购买方开户行及账号', node: <Input size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
        ]
      },
      {
        title: '发票2',
        value: [
          { id: 'buyerName', label: '购买方名称', node: <Input size="small" />, options: { rules: [] } },
          { id: 'buyerNo', label: '购买方纳税人识别号', node: <Input size="small" />, options: { rules: [] } },
          { id: 'buyerAddress', label: '购买方地址及电话', node: <Input size="small" />, options: { rules: [] } },
          { id: 'buyerBank', label: '购买方开户行及账号', node: <Input size="small" />, options: { rules: [] } },
        ]
      },
    ]
  }, [])

  // 选中的 种类索引
  const [index, setIndex] = React.useState(1);

  return (
    <Invoice
      invoiceHeader={
        <Invoice.InvoiceHeader
          renderExpand={renderExpand}
          typeOptionIndex={index}
          typeOption={typeOption}
          onChangeTypeOption={e => { setIndex(e) }}
        />}
      buyer={<Invoice.Buyer formItem={typeOption[index].value} />}
    />
  );
};