import React from 'react';
import { Col, Row } from "kts-components-antd-x4";
import { Button, Form, Input, message, Checkbox, AutoComplete } from 'kts-xui';
import moment from 'moment';
import agent from '../../../Server';
import { FormInstance } from 'kts-components-antd-x4/lib/form';
import { getSwjg, adm, alxd } from './VerifyInvoice';

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

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

export default class Component extends React.Component<IProps, any> {
    formRef:any = React.createRef<FormInstance>();
    constructor(props: IProps) {
        super(props);
        this.state = {
            value: '',
            loading: false,
            showCheck: false,
            tip: '开具金额(不含税)',
            url: this.props.data && this.props.data.key4,
            available: false,
        };

    }
    handleSubmit = async values => {
        this.setState({ loading: true });
        if (typeof this.state.url === 'string') {
            let data = {
                ...values,
            };
            const res: any = await agent.post(this.state.url, data, this);
            this.setState({ loading: false });
            this.handleResponse(res);
        } else {
            this.state.url(values).then((res) => {
                this.setState({ loading: false });
                this.handleResponse(res);
            });
        }
    }
    handleResponse = res => {
        if (!res.err) {
            this.success();
        } else {
            const err2 = res.err;
            message.error(err2.status.description);
            return null;
        }
    }
    onSave = () => {
        this.formRef.current!.submit();
    }
    success = () => {
        message.success('录入成功');
        this.formRef.current!.resetFields();
        console.log(this.formRef.current);
        this.props.fnForceUpdate();
    }
    error = () => {
        message.error('录入失败');
    }
    onCodeChange = (rule, value, callback) => {
        //检测是否为全数字
        if (rule.pattern.test(value)) {
            if (value.length === 10 || value.length === 12) {
                let swjginfo = getSwjg(value, 0);
                if (swjginfo.length === 0) {
                    callback('发票代码有误!');
                } else {
                    if (!adm(value) || swjginfo.length === 0) {
                        callback('发票代码有误!');
                    } else {
                        let fplx = alxd(value);//fplx 发票类型 

                        if ((fplx === '01' || fplx === '02' || fplx === '03' || fplx === '08' || fplx === '15')) {
                            this.setState({
                                showCheck: false
                            });
                            if (fplx === '02') {
                                this.setState({
                                    tip: '合计金额'
                                });
                                callback('不支持货票录入');
                            } else if (fplx === '03') {
                                this.setState({
                                    tip: '不含税价'
                                });
                            } else if (fplx === '15') {
                                this.setState({
                                    tip: '车价合计'
                                });
                            } else {
                                this.setState({
                                    tip: '开具金额(不含税)'
                                });
                            }
                        } else if (fplx === '04' || fplx === '10' || fplx === '11' || fplx === '14') {
                            this.setState({
                                showCheck: true
                            });
                        }
                        if (fplx === '01' || fplx === '03' || fplx === '14') {
                            this.setState({
                                available: true
                            });
                        } else {
                            this.setState({
                                available: false
                            });
                        }
                        callback();
                    }
                }
            } else {
                callback('请输入10位或12位合法的发票代码');
            }
        } else {
            callback('发票代码只支持数字');
        }
    }
    onincreaseTabindex1 = (e) => {

    }
    onincreaseTabindex2 = (e) => {

    }
    onincreaseTabindex3 = (e) => {
        if (this.state.showCheck) {

        } else {

        }
    }
    onincreaseTabindex4 = (e) => {

    }
    checkDate = (rule, value, callback) => {
        if (rule.pattern.test(value)) {
            let isValid = moment(value).isValid();
            if (isValid) {
                callback();
            } else {
                callback('格式不对');
            }
        } else {
            callback('格式不对');
        }
    }

    render() {
        let formItemLayout = {
            labelCol: { span: 24 },
            wrapperCol: { span: 24 }
        };
        return (
            <Form className="manual-write-style special" ref={this.formRef} onFinish={this.handleSubmit}>
                <Row justify="space-between">
                    <Col span={11}>
                        <FormItem
                            {...formItemLayout}
                            label="发票代码"
                            hasFeedback={true}
                            name="invoiceCode"
                            rules={
                                [
                                    {
                                        required: true,
                                        pattern: /^[0-9]*$/,
                                        validator: this.onCodeChange
                                    }
                                ]
                            }
                        >
                            <Input placeholder="10位或12位发票码" maxLength={12} onPressEnter={this.onincreaseTabindex1} />
                        </FormItem>
                    </Col>
                    <Col span={11}>
                        <FormItem
                            {...formItemLayout}
                            label="发票号码"
                            name="invoiceNo"
                            rules={
                                [
                                    {
                                        required: true,
                                        message: '请输入8位发票号码（只支持数字)',
                                        pattern: /^\d{8}$/
                                    }
                                ]
                            }
                        >
                            <Input placeholder="8位发票号码" maxLength={8} onPressEnter={this.onincreaseTabindex2} />
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <FormItem
                            {...formItemLayout}
                            label="开票日期"
                            name="invoiceDate"
                            rules={
                                [
                                    {
                                        type: 'string',
                                        required: true,
                                        message: '日期格式(20170203)',
                                        validator: this.checkDate,
                                        pattern: /\d{8}/
                                    }
                                ]
                            }
                        >
                            <Input maxLength={8} placeholder="日期格式(20170203)" onPressEnter={this.onincreaseTabindex3} />
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        {!this.state.showCheck && (
                            <FormItem
                                {...formItemLayout}
                                label={this.state.tip}
                                name="invoiceAmount"
                                rules={
                                    [
                                        {
                                            required: true,
                                            message: '请输入金额（小数点最多输入两位,最大长度12位数包括小数)',
                                            pattern: /(^-?[1-9](\d+)?(\.\d{1,2})?$)|(^-?0$)|(^-?\d\.\d{1,2}$)/
                                        }
                                    ]
                                }
                            >
                                <Input style={{ width: '100%' }}  maxLength={12} onPressEnter={this.onincreaseTabindex4} />
                            </FormItem>
                        )}
                        {this.state.showCheck && (
                            <FormItem
                                {...formItemLayout}
                                label="校验码"
                                name="checkCode"
                                rules={
                                    [
                                        {
                                            required: true,
                                            message: '请输入6位校验码（只支持数字)',
                                            pattern: /^\d{6}$/
                                        }
                                    ]
                                }
                            >
                                <Input placeholder="发票校验码后6位" maxLength={6} />
                            </FormItem>
                        )}
                    </Col>
                </Row>

                <Row>
                    <Col span={24}>
                        <FormItem>
                            <Button style={{ marginRight: 10 }} type="primary" htmlType="submit" loading={this.state.loading}>
                                提交
                            </Button>
                            <Button onClick={() => { this.props.handleCancel() }}>取消</Button>
                        </FormItem>
                    </Col>
                </Row>

            </Form>
        );
    }
}