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

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

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

class Component extends React.Component<IProps, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            callback: null,
            keyPrefix: null,
            token: null,
            uploadUrl: null,
            loop: null,
            fileList: null,
            url: this.props.url && this.props.url.qrtoken,
            fileName: null,
            groupNumber: null,
            showFive: this.props.url.show || false,
            list: [],
            draftFlag: 0,
            showdeduction: this.props.url.deduction || false,
            inputType: this.props.url.imageinputType,
        };
        this.fetchGroup = debounce(this.fetchGroup, 800);
    }
    //token之所以使用异步是因为指定发票组的号码
    getToken = async () => {

    }
    callback = () => {
        if (this.props.fnForceUpdate) {
            this.props.fnForceUpdate();
        }
    }
    onAddGroup = () => {

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

    }
    ondraftChange = (e) => {

    }
    getFileType = (filename) => {
        const index1 = filename.lastIndexOf(".");
        const index2 = filename.length;
        const type = filename.substring(index1, index2);
        return type.toLowerCase();
    }
    render() {
        let formItemLayout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
        };
        const options = this.state.list.map(d => <Option key={d.groupNumber} value={d.groupNumber}>{d.groupNumber}</Option>);
        const props = {

        };
        return (
            <div>
                <Upload
                    {...props}
                    accept=".jpg,.jpeg,.bmp,.png,.pdf,.ofd"
                >
                    <Button>
                        上传
                    </Button>
                    {
                        this.state.showdeduction ?
                            <p className={'notepostion notesword'}>仅支持bmp、jpg、jpeg、png，且单个文件不超过3MB</p> :
                            <p className={'notepostion notesword'}>仅支持bmp、jpg、jpeg、png、pdf、ofd格式，且单个文件不超过3MB</p>
                    }
                </Upload>
                {
                    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>
                    </Form>
                }
                {
                    this.state.showdeduction &&
                    <Row>
                        <FormItem {...formItemLayout} name='draftFlag' >
                            <Checkbox onChange={this.ondraftChange} >录入时勾选发票</Checkbox>
                        </FormItem>
                    </Row>
                }
            </div>
        );
    }
}
export default Component;