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

import ReminderLog from './reminderLog';

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={
            columns:[
                {
                    title: "序号",
                    dataIndex: "key",
                    key: "key",
                },
                {
                    title: "费用种类",
                    dataIndex: "status",
                    key: "status",
                },
                {
                    title: "金额",
                    dataIndex: "patentAmount",
                    key: "patentAmount",
                },
                {
                    title: "缴费日",
                    dataIndex: "createTime",
                    key: "createTime",
                },
            ],
            dataSource:[],
            loading:false,
            detailsInfor:{},
        }
        this.payLoadData = this.payLoadData.bind(this);
    }

    componentDidMount() {
        this.payLoadData();
    }

    payLoadData() {
        this.setState({
            loading: true,
        });
        const {detailsInfor} = this.props;
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/patentNew/patentPaymentDetails",
            data: {
                id:detailsInfor.id
            },
            success: function (data) {
                if(data.error.length === 0){
                    for(let i =0;i<data.data.length;i++){
                        data.data[i].key = i+1;
                    }
                    console.log(data.data,'data.data')
                    this.setState({
                        dataSource: data.data,
                    });
                }else{
                    message.warning(data.error[0].message);
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    }



    render() {
        const {detailsInfor} = this.props;
        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={8}>
                            <FormItem
                                {...formItemLayout}
                                label='专利号'
                            >
                                {detailsInfor.patentNo}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='专利名称'
                            >
                                {detailsInfor.name}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='专利类型'
                            >
                                {
                                    detailsInfor.type === 0 ? '发明专利':
                                        detailsInfor.type === 1 ? '实用新型':
                                            detailsInfor.type === 2 ? '外观设计': ''
                                }
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='申请日期'
                            >
                                {detailsInfor.applyDates}
                            </FormItem>
                        </Col>
                        <Col span={16}>
                            <FormItem
                                labelCol={{span: 5}}
                                wrapperCol={{span: 19}}
                                label='授权日期'
                            >
                                {detailsInfor.authorizationDates}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='年费'
                            >
                                {detailsInfor.authorizationDates}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='滞纳金'
                            >
                                {detailsInfor.delayingAmount}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='权利恢复费'
                            >
                                {detailsInfor.recoveryAmount}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                {...formItemLayout}
                                label='年费状态'
                            >
                                {
                                    detailsInfor.annualFeeStatus === 0 ? '无代缴' :
                                        detailsInfor.annualFeeStatus === 1 ? '已代缴' : ''
                                }
                            </FormItem>
                        </Col>
                        <Col span={16}>
                            <FormItem
                                labelCol={{span: 5}}
                                wrapperCol={{span: 19}}
                                label='通知'
                            >
                               <div style={{display:'flex',alignItems:'center'}}>
                                   {
                                       detailsInfor.salesmanRemind === 0 ? '未提醒' :
                                           detailsInfor.salesmanRemind === 1 ? '已提醒' : ''
                                   }
                                   <Button
                                       onClick={()=>{
                                           this.setState({
                                               visible:true,
                                               id:detailsInfor.id
                                           })
                                       }}
                                       style={{marginLeft:"15px"}}
                                       type='primary'>
                                       查看提醒日志
                                   </Button>
                               </div>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <Spin spinning={this.state.loading}>
                    <Table
                        columns={this.state.columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        bordered
                        size="small"
                    />
                </Spin>
                {this.state.visible ? <ReminderLog
                    visible={this.state.visible}
                    id={this.state.id}
                    onCancel={()=>{
                        this.setState({
                            visible: false,
                            id: undefined,
                        })
                    }}
                /> : null}
            </Modal>
        )
    }
}

export default PatentDetails;
