import React,{Component} from 'react';
import {Button, Form, Input, message, Modal, Spin} from "antd";
import $ from "jquery/src/ajax";

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};

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

class PayRecord extends Component{
    constructor(props) {
        super(props);
        this.state={
            loading: false,
            paymentLogs: [],
            paymentDetails: {},
            financialPaymentList: [],
        }
        this.examineOperation = this.examineOperation.bind(this);
        this.noExamineOperation = this.noExamineOperation.bind(this);
    }

    componentDidMount() {
      this.getSelectPaymentLog();       //付款日志
      this.getPaymentDetails();         //支付详情
      this.getSelectfinancialPayment(); //财务付款列表
    }

    //付款日志
    getSelectPaymentLog(){
        this.setState({
            loading: true
        });
        $.ajax({
            type: 'get',
            cache: false,
            url: globalConfig.context + "/api/admin/company/selectPaymentLog",
            dataType: "json",
            data: {
                id: this.props.payId
            },
            success: function (data) {
                this.setState({
                    loading: false
                });
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    this.setState({
                        paymentLogs: data.data
                    })
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    //支付详情
    getPaymentDetails(){
        this.setState({
            loading: true
        });
        $.ajax({
            type: 'get',
            cache: false,
            url: globalConfig.context + "/api/admin/company/OrderPaymentDetails",
            dataType: "json",
            data: {
                id: this.props.payId
            },
            success: function (data) {
                this.setState({
                    loading: false
                });
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    this.setState({
                        paymentDetails: data.data
                    })
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    //财务付款列表
    getSelectfinancialPayment(){
        this.setState({
            loading: true
        });
        $.ajax({
            type: 'get',
            cache: false,
            url: globalConfig.context + "/api/admin/company/selectfinancialPayment",
            dataType: "json",
            data: {
                id: this.props.payId
            },
            success: function (data) {
                this.setState({
                    loading: false
                });
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    this.setState({
                        financialPaymentList: data.data
                    })
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    handleSubmit(e,status = 0){
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (err) {
                return;
            }
            const { paymentDetails } = this.state;
            this.setState({
                loading: true
            })
            let data = {
                id: this.props.payId,
                paymentAmount: paymentDetails.paymentAmount,
                paymentStatus: paymentDetails.paymentStatus,
                status: status,//0 发起 1通过 2驳回(0重新发起,1通过审核,2驳回)
            }
            Object.assign(data,values)
            $.ajax({
                type: 'post',
                url: globalConfig.context + "/api/admin/company/updateOrderPayment",
                dataType: "json",
                data: data,
            }).done((res) => {
                if (res.error && res.error.length) {
                    message.error(res.error[0].message);
                } else {
                    message.success("重新申请成功");
                }
            }).always(() => {
                this.setState({
                    loading: false
                })
            });
        })
    }

    //新增财务付款
    addfinancialPayment(e) {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (err) {
                return;
            }
            const { paymentDetails } = this.state;
            this.setState({
                loading: true
            })
            let data = {
                pid: this.props.payId,
                partyAmount: values.partyAmount,
                paymentTimes: values.paymentTimes
            }
            $.ajax({
                type: 'post',
                url: globalConfig.context + "/api/admin/company/addfinancialPayment",
                dataType: "json",
                data: data,
            }).done((res) => {
                if (res.error && res.error.length) {
                    message.error(res.error[0].message);
                } else {
                    message.success("新增成功");
                }
            }).always(() => {
                this.setState({
                    loading: false
                })
            });
        })
    }

    //0审核 1驳回 2待支付 3已支付 4取消
    noExamineOperation(){
        return (
            this.state.paymentDetails.status === 1 ? <Form.Item>
                <Button type="primary" htmlType="submit">
                    重新发起申请
                </Button>
            </Form.Item> : <div/>
        )
    }

    examineOperation() {
        const { getFieldDecorator } = this.props.form;
        return (
            this.state.paymentDetails.status === 0 ? <Form.Item>
                {getFieldDecorator('remarks', {
                    rules: [{ required: true, message: '请输入备注!' }],
                })(
                    <Input style={{ width: '200px' }} placeholder="请输入备注" type={'textarea'}/>
                )}
                <Button type="primary" onClick={(e)=>{
                    this.handleSubmit(e,2);
                }}>
                    驳回
                </Button>
                <Button type="primary" onClick={(e)=>{
                    this.handleSubmit(e,1);
                }}>
                    通过
                </Button>
            </Form.Item> : this.state.paymentDetails.status === 2 ?
                <div>
                    <Form.Item label="付款时间:">
                        {getFieldDecorator('remarks', {
                            rules: [{ required: true, message: '请输入付款时间!' }],
                        })(
                            <Input style={{ width: '100px' }} placeholder="请输入付款时间" type={'number'}/>
                        )}

                    </Form.Item>
                    <Form.Item label="付款金额(万元):">
                        {getFieldDecorator('remarks', {
                            rules: [{ required: true, message: '请输入付款金额!' }],
                        })(
                            <Input style={{ width: '100px' }} placeholder="请输入付款金额" type={'time'}/>
                        )}

                    </Form.Item>
                    <Button type="primary" onClick={(e)=>{
                        this.addfinancialPayment(e)
                    }}>
                        保存
                    </Button>
                </div> : <div/>
        )
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const { paymentLogs,paymentDetails,financialPaymentList } = this.state;
        return(
            <Modal
                maskClosable={false}
                footer={null}
                visible={this.props.visible}
                onCancel={() => {
                    this.props.changeVisible();
                }}
            >
                <Spin spinning={this.state.loading}>
                    <div>
                        <div>申请支付外包费用</div>
                        <Form
                            {...layout}
                            name="basic"
                            initialValues={{
                                remember: true,
                            }}
                            onSubmit={(e)=>{
                                this.handleSubmit(e)
                            }}
                        >
                            <Form.Item
                                {...formItemLayout}
                                style={{
                                    display:'flex'
                                }}
                                label="付款单位/个人:"
                            >
                                <div>{paymentDetails.companyName}</div>
                            </Form.Item>
                            <Form.Item
                                {...formItemLayout}
                                style={{
                                    display:'flex'
                                }}
                                label="单价(万元):"
                            >
                                <div>{paymentDetails.nodeUnitPrice}</div>
                            </Form.Item>
                            <Form.Item
                                {...formItemLayout}
                                style={{
                                    display:'flex'
                                }}
                                label="数量:"
                            >
                                {getFieldDecorator('quantity', {
                                    initialValue: parseInt(paymentDetails.quantity),
                                    rules: [{ required: false, message: '请输入數量!' }],
                                })(
                                    <Input disabled={paymentDetails.quantity <= 1 || this.state.paymentDetails.status > 1} style={{ width: '200px' }} placeholder="请输入數量" type={'number'}/>
                                )}
                            </Form.Item>
                            <Form.Item
                                {...formItemLayout}
                                style={{
                                    display:'flex'
                                }}
                                label="总价(万元):"
                            >
                                <div>{paymentDetails.nodeTotalAmount}</div>
                            </Form.Item>
                            <Form.Item
                                {...formItemLayout}
                                style={{
                                    display:'flex'
                                }}
                                label="已付(万元):"
                            >
                                <div>{paymentDetails.nodePartyAmount}</div>
                            </Form.Item>
                            <Form.Item
                                {...formItemLayout}
                                style={{
                                    display:'flex'
                                }}
                                label="本次申请支付金额(万元):"
                            >
                                {getFieldDecorator('applicationAmount', {
                                    initialValue: paymentDetails.applicationAmount,
                                    rules: [{ required: true, message: '请输入本次申请支付金额!' }],
                                })(
                                    <Input disabled={this.state.paymentDetails.status > 1} style={{ width: '200px' }} placeholder="请输入本次申请支付金额" type={'number'}/>
                                )}
                            </Form.Item>
                            <Form.Item
                                {...formItemLayout}
                                style={{
                                    display:'flex'
                                }}
                                label="备注:"
                            >
                                <div>{paymentDetails.remarks}</div>
                            </Form.Item>
                            <div className='payStateList'>
                                <div className='listTitle'>
                                    支付状态
                                </div>
                                <div className='payList'>
                                    {
                                        paymentLogs.map((value,key)=>(
                                            <div key={key} className='payitem' style={{color:key === 0 ? '#f00' : '#000'}}>
                                                {value.aname+':'}
                                                {
                                                    value.status === 0 ? '(发起)'+value.remarks :
                                                        value.status === 1 ? '(通过)'+value.remarks : '(驳回)'+value.remarks
                                                }
                                                {
                                                    value.createTimes
                                                }
                                            </div>
                                        ))
                                    }
                                </div>
                            </div>
                            {paymentDetails.status === 2 ||  paymentDetails.status === 3 ||  paymentDetails.status === 4 ?<div className='payStateList'>
                                <div className='listTitle' style={{display:'block',fontSize:'15px'}}>
                                    上传付费凭证-财务
                                    <span style={{fontSize:'10px',paddingLeft:'10px'}}>实际付款(万元): {paymentDetails.paymentAmount}</span>
                                </div>
                                <div className='payList'>
                                    {
                                        financialPaymentList.map((value,key)=>(
                                            <div key={key} className='payitem' style={{color:key === 0 ? '#f00' : '#000'}}>
                                                付款时间: {value.paymentTimes}
                                                <span style={{paddingLeft:'25px'}}>付款金额(万元): {value.partyAmount}</span>
                                            </div>
                                        ))
                                    }
                                </div>
                            </div> : <div/>}
                            {
                                this.props.isAuditPayment ? this.examineOperation() : this.noExamineOperation()
                            }
                        </Form>
                    </div>
                </Spin>
            </Modal>
        )
    }
}

const WrappedNormalLoginForm = Form.create()(PayRecord);

export default WrappedNormalLoginForm