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


export interface IInvoiceHeader {
    /** 标题 */
    title?: string;

    /** 标记文字 */
    defaultTag?: string;

    /** 默认 发票号码 */
    defaultNo?: string;

    /** 默认 开票日期 */
    defaultInvoicingDate?: string;
}

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

    const { form } = props;

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

    const title = React.useMemo(() => {
        if (props.title) {
            return props.title
        }
        return '电子发票(增值税专用发票)'
    }, [props.title])

    controller.useForm('invoiceHeader', form);

    return (
        <div className="kts-invoice-operate-invoice-digtal-header" >
            <div className="digtal-header-title" >{title}</div>
            {form.getFieldDecorator('tag', { initialValue: props.defaultTag })(<Tag />)}
            <div className="digtal-header-fields" >
                {form.getFieldDecorator('no', { initialValue: props.defaultNo })(<Field title="发票号码：" />)}
                {form.getFieldDecorator('invoicingDate', { initialValue: props.defaultInvoicingDate })(<Field title="开票日期：" />)}
            </div>
        </div>
    )
})

/** 字段 */
class Field extends React.Component<{ title: string, value?: string }>{
    render(): React.ReactNode {
        const { title, value } = this.props;
        if (value) {
            return (
                <div className="digtal-header-field" >
                    <div className="digtal-header-field-title" >{title}</div>
                    <div className="digtal-header-field-value" >{value}</div>
                </div>
            )
        } else {
            return <></>
        }
    }
}

class Tag extends React.Component<{ value?: string }>{
    render(): React.ReactNode {
        return (
            this.props.value
                ? <div className="digtal-header-tag" >{this.props.value}</div>
                : <></>
        )
    }
}