import React from 'react';
import { Row, Col } from 'kts-components-antd-x4';
import { Form, Checkbox, AutoComplete } from 'kts-xui';
import debounce from 'lodash/debounce';
import { PlusOutlined } from '@ant-design/icons';

import MyIcon from '../Icon';

const FormItem = Form.Item;
const Option = AutoComplete.Option;

interface IProps {
    url: any;
    fnForceUpdate: () => void;
}

export default class Component extends React.Component<IProps, any> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            callback: null,
            keyPrefix: null,
            token: null,
            uploadUrl: null,
            loop: null,
            fileList: null,
            url: this.props.url && this.props.url.scanerurl,
            params: this.props.url && this.props.url.scanerParams,
            groupNumber: null,
            showFive: this.props.url.show || false,
            list: [],
            draftFlag: 0,
            showdeduction: this.props.url.deduction || false,
            inputType: this.props.url.ocrinputType,
        };
        this.fetchGroup = debounce(this.fetchGroup, 800);
    }

    ondraftChange = (e) => {
        if (e.target.checked) {
            this.setState({
                draftFlag: 1
            });
        } else {
            this.setState({
                draftFlag: 0
            });
        }
    }

    getToken = () => {

    }

    onAddGroup = () => {

    }

    onGroupName = (e) => {
        this.setState({
            groupNumber: e.target.value
        });
    }

    fetchGroup = (value) => {

    }

    render() {
        let formItemLayout = {
            labelCol: { span: 24 },
            wrapperCol: { span: 24 },
        };
        const options = this.state.list.map(d => <Option key={d.groupNumber} value={d.groupNumber}>{d.groupNumber}</Option>);
        return (
            <div>
                <div className='scanerBtn' onClick={this.getToken}>
                    <div className='linkBack'><MyIcon width={20} height={20} src={'/link.svg'} /></div>
                    <span>扫描仪连接</span>
                </div>
                {
                    this.state.showFive &&
                    <Form>
                        <Row style={{ marginTop: 20 }}>
                            <Col span={21} >
                                <FormItem
                                    {...formItemLayout}
                                    label="指定到发票组"
                                    name="groupNumber"
                                    rules={
                                        [{ message: '请输入编号(最大长度36位)', max: 36 }]
                                    }
                                >
                                    <AutoComplete
                                        onSearch={this.fetchGroup}
                                    >
                                        {options}
                                    </AutoComplete>
                                </FormItem>
                            </Col>
                            <Col span={2} offset={1}>
                                <span style={{ lineHeight: '107px' }} className="hand" onClick={this.onAddGroup}>
                                    <PlusOutlined />
                                </span>
                            </Col>
                        </Row>
                        {
                            this.state.showdeduction &&
                            <Row>
                                <FormItem {...formItemLayout} name='draftFlag'>
                                    <Checkbox onChange={this.ondraftChange}>录入时勾选发票</Checkbox>
                                </FormItem>
                            </Row>
                        }
                    </Form>
                }
            </div>
        );
    }
}