import React,{Component} from "react";
import {Modal, Form, Row, Col, Tabs, Table, Spin, message} from "antd";
import $ from "jquery/src/ajax";

const FormItem = Form.Item;
const TabPane  = Tabs.TabPane;

const formItemLayout = {
    labelCol: { span: 10 },
    wrapperCol: { span: 14 },
};

class PatentDetails extends Component{
    constructor(props) {
        super(props);
        this.state={
            payDataSource :[],
            payColumns:[
                {
                    title: "序号",
                    dataIndex: "companyName",
                    key: "companyName",
                },
                {
                    title: "费用种类",
                    dataIndex: "companyName",
                    key: "companyName",
                },
                {
                    title: "金额",
                    dataIndex: "companyName",
                    key: "companyName",
                },
                {
                    title: "缴费日",
                    dataIndex: "companyName",
                    key: "companyName",
                },
            ],
            unPayDataSource:[],
            unPayColumns:[
                {
                    title: "序号",
                    dataIndex: "companyName",
                    key: "companyName",
                },
                {
                    title: "费用种类",
                    dataIndex: "companyName",
                    key: "companyName",
                },
                {
                    title: "金额",
                    dataIndex: "companyName",
                    key: "companyName",
                },
                {
                    title: "缴费日",
                    dataIndex: "companyName",
                    key: "companyName",
                },
            ],
            unPayLoading:false,
            payLoading:false,
        }
        this.payLoadData = this.payLoadData.bind(this);
        this.unPayLoadData = this.unPayLoadData.bind(this);
    }

    componentDidMount() {
        this.payLoadData();
        this.unPayLoadData();
    }

    payLoadData() {
        this.setState({
            payLoading: true,
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/company/selectPaymentList",
            data: {},
            success: function (data) {
                if(data.error.length === 0){
                    this.setState({
                        payDataSource: [],
                    });
                }else{
                    message.warning(data.error[0].message);
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    payLoading: false,
                });
            }.bind(this)
        );
    }

    unPayLoadData() {
        this.setState({
            unPayLoading: true,
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/company/selectPaymentList",
            data: {},
            success: function (data) {
                if(data.error.length === 0){
                    this.setState({
                        unPayDataSource: [],
                    });
                }else{
                    message.warning(data.error[0].message);
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    unPayLoading: false,
                });
            }.bind(this)
        );
    }

    render() {
        return (
            <Modal
                title='年费数据'
                className='payRecordComponent'
                width={800}
                maskClosable={false}
                footer={null}
                visible={this.props.visible}
                onCancel={this.props.onCancel}
            >
                <Form layout="horizontal">
                    <Row gutter={40}>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label='申请日'
                            >
                                2020-06-19
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label='上回缴费年度'
                            >
                                发明专利第2年年费,2021-03-30
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label='状态'
                            >
                                待缴
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label='滞纳金'
                            >
                                0
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label='权利恢复费'
                            >
                               0
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label='截止日'
                            >
                                2022-07-19
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label='年费'
                            >
                                900.00
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <Tabs defaultActiveKey="1">
                    <TabPane tab="应缴费信息" key="1">
                        <Spin spinning={this.state.unPayLoading}>
                            <Table
                                columns={this.state.unPayColumns}
                                dataSource={this.state.unPayDataSource}
                                pagination={false}
                                bordered
                                size="small"
                            />
                        </Spin>
                    </TabPane>
                    <TabPane tab="已缴费信息" key="2">
                        <Spin spinning={this.state.payLoading}>
                            <Table
                                columns={this.state.payColumns}
                                dataSource={this.state.payDataSource}
                                pagination={false}
                                bordered
                                size="small"
                            />
                        </Spin>
                    </TabPane>
                </Tabs>
            </Modal>
        )
    }
}

export default PatentDetails;
