import React from 'react';
import { Icon, Modal, message, Spin, Button, Input, Radio } from 'antd';
import './comprehensive.less';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';

const PatentDesc = React.createClass({
    getInitialState() {
        return {
            visible: false,
            loading: false
        };
    },
    showModal() {
        this.setState({
            visible: true,
        });
    },
    handleOk() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/patent/registerApplicationFee",
            data: {
                cid: this.props.data.cid,
                applicationFee: this.state.applicationFee,
                //                trialFee: this.state.applicationFee,
                //                printingFee: this.state.printingFee,
                funds: this.state.funds,
                reimbursement: this.state.reimbursement,
                paymentState: this.state.paymentState
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                    return;
                } else {
                    message.success('保存成功！');
                    this.props.closeDesc(false, true);
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false,
                visible: false,
            });
        }.bind(this));
    },
    handleConfirm() {
        this.state.paymentState = 1;
        this.handleOk();
    },
    handleCancel(e) {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false);
    },
    componentWillReceiveProps(nextProps) {
        this.state.visible = nextProps.showDesc;
        if (nextProps.data) {
            this.state.applicationFee = nextProps.data.applicationFee;
            // this.state.trialFee = nextProps.data.trialFee;
            // this.state.printingFee = nextProps.data.printingFee;
            this.state.funds = nextProps.data.funds;
            this.state.reimbursement = nextProps.data.reimbursement;
            this.state.paymentState = nextProps.data.paymentState;
        };
    },
    render() {
        if (this.props.data) {
            return (
                <div className="applyFee-desc">
                    <Spin spinning={this.state.loading} className='spin-box'>
                        <Modal maskClosable={false} title="登记申请费用" visible={this.state.visible}
                            onOk={this.handleOk} onCancel={this.handleCancel}
                            width='360px'
                            footer={[
                                <Button key="submit" type="primary" size="large" onClick={this.handleOk}>保存</Button>,
                                <Button key="confirm" type="ghost" size="large"
                                    style={this.props.data.paymentState == 1 ? { display: 'none' } : {}}
                                    onClick={this.handleConfirm}>确认缴费</Button>,
                                <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>取消</Button>,
                            ]}
                            className="applyFee-desc-content">
                            <p className="applyFee-title">
                                <span>专利号 : {this.props.data.patentNumber}</span>
                                <span>专利名 : {this.props.data.patentName}</span>
                            </p>
                            <p className="applyFee-fee">
                                <span>申请费:</span>
                                <Input value={this.state.applicationFee} onChange={(e) => { this.setState({ applicationFee: e.target.value }); }} />
                                <span>元</span>    
                            </p>
                            <div className="applyFee-fee">
                                <span>是否申请:</span>
                                <Radio.Group value={this.state.funds} onChange={(e) => { this.setState({ funds: e.target.value }) }}>
                                    <Radio value="1">是</Radio>
                                    <Radio value="0">否</Radio>
                                </Radio.Group>
                            </div>
                            <div className="applyFee-fee">
                                <span>是否报销:</span>
                                <Radio.Group value={this.state.reimbursement} onChange={(e) => { this.setState({ reimbursement: e.target.value }) }}>
                                    <Radio value="1">是</Radio>
                                    <Radio value="0">否</Radio>
                                </Radio.Group>
                            </div>
                        </Modal>
                    </Spin>
                </div>
            );
        } else {
            return <div></div>
        }
    },
});
export default PatentDesc;

// <p className="applyFee-fee">
//     <span>实审费:</span>
//     <Input value={this.state.trialFee} onChange={(e) => { this.setState({ trialFee: e.target.value }); }} />
// </p>
//     <p className="applyFee-fee">
//         <span>文印费:</span>
//         <Input value={this.state.printingFee} onChange={(e) => { this.setState({ printingFee: e.target.value }); }} />
//     </p>