import React from 'react';
import { Input } from 'kts-xui';
import { 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 {

    /** 默认备注 */
    defaultRemark?: 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, []);

    /** 禁用字段 */
    const disableds = controller.useMemo(s => s.stakeholder.disableds || [], []);

    /** 启用字段 */
    const enables = controller.useMemo(s => s.stakeholder.enables || [], []);

    const readOnly = React.useMemo(() => model === 'readOnly', [model]);

    const isReadOnly = React.useCallback(field => disableds.indexOf(field) >= 0, [disableds])

    const isEnables = React.useCallback(field => enables.indexOf(field) >= 0, [enables])

    // 注册 form
    controller.useForm('sign', form);

    if (readOnly) {
        return (
            <div className="kts-invoice-operate-sign-digtal-readOnly">
                <div className='sign-digtal-readOnly-cont' >
                    <div>
                        <span>备</span>
                        <span>注</span>
                    </div>
                    <div>
                        {getFieldDecorator('remarks', {
                            initialValue: props.defaultRemark
                        })(
                            isEnables('remarks')
                                ? <Input.TextArea placeholder='请输入' style={{ height: '100%' }} />
                                : <MyDiv style={{whiteSpace: 'pre-wrap', wordBreak: 'break-all'}} />
                        )}
                    </div>
                </div>
                <Form layout='inline' className='digtal-readOnly-form' >
                    <Form.Item label='开票人' >
                        {getFieldDecorator('drawer', {
                            initialValue: props.defaultRemark
                        })(<MyDiv />)}
                    </Form.Item>
                </Form>
            </div>
        );
    } else {
        return (
            <div className="kts-invoice-operate-sign-digtal">
                <div className='sign-digtal-label' >备注信息</div>
                <Form>
                    <Form.Item label="备注" >
                        {getFieldDecorator('remarks', {
                            initialValue: props.defaultRemark
                        })(<Input.TextArea readOnly={isReadOnly('remarks')} autoSize placeholder='请输入' />)}
                    </Form.Item>
                    <Form.Item label="开票人" >
                        {getFieldDecorator('drawer', {
                            initialValue: props.defaultIssuer
                        })(<Input readOnly={isReadOnly('drawer')} style={{ width: 313 }} placeholder='请输入' />)}
                    </Form.Item>
                </Form>
            </div>
        );
    }
});

class MyDiv extends React.Component<{ value?: string, style?: React.CSSProperties }> {
    render(): React.ReactNode {
        return (
            <div style={this.props.style}>{this.props.value}</div>
        )
    }
}