import React from 'react';
import { Descriptions, Input, Form } from 'kts-components-antd-x3';
import { decorator } from 'grey-react-box';
import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
import Invoice from '../../..';
import './index.less';

export interface IBuyerProps {

  /** 默认收款人 */
  defaultPayee?: string;

  /** 默认复核人 */
  defaultReviewer?: string;

  /** 默认开票人 */
  defaultIssuer?: string;
}

export default decorator<IBuyerProps, IBuyerProps & FormComponentProps>(Form.create())((props) => {

  const { form } = props;

  const { getFieldDecorator } = form;

  /** 控制器 */
  const controller = Invoice.useInvoiceController();

  const model = controller.useMemo(s => s.model, []);
  
  // 注册 form
  controller.useForm('sign', form);

  return (
    <div className="kts-invoice-operate-sign">
      <Form {...formItemLayout}>
        <div>
          <Form.Item label="收款人">
            {getFieldDecorator('payee', {
              initialValue: props.defaultPayee,
            })(<Input size="small" />)}
          </Form.Item>
        </div>
        <div>
          <Form.Item label="复核人">
            {getFieldDecorator('reviewer', {
              initialValue: props.defaultReviewer,
            })(<Input size="small" />)}
          </Form.Item>
        </div>
        <div>
          <Form.Item label="开票人">
            {getFieldDecorator('issuer', {
              initialValue: props.defaultIssuer,
              rules: [{ required: true, message: '请输入开票人' }],
            })(<Input size="small" />)}
          </Form.Item>
        </div>
      </Form>
    </div>
  );
});

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};