import React,{Component} from "react";
import TabelContent from "../../../common/tabelContent";
import {Button, Modal, Tag, Form, DatePicker, Input, message} from "antd";
import ImgList from "../../../common/imgList";
import $ from "jquery/src/ajax";

const { TextArea } = Input;

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
    },
}

class DunningRecord extends Component{
    constructor(props) {
        super(props);
        this.state={
            columns:[
                {
                    title: "序号",
                    dataIndex: "key",
                    key: "key",
                    width: 45,
                },
                {
                    title: "操作人名称",
                    dataIndex: "contractNo",
                    key: "contractNo",
                    width: 140,
                },
                {
                    title: "客户名称",
                    dataIndex: "contractNo",
                    key: "contractNo",
                    width: 140,
                },
                {
                    title: "催款时间",
                    dataIndex: "contractNo",
                    key: "contractNo",
                    width: 140,
                },
                {
                    title: "情况",
                    dataIndex: "contractNo",
                    key: "contractNo",
                    width: 140,
                },
                {
                    title: "操作时间",
                    dataIndex: "contractNo",
                    key: "contractNo",
                    width: 140,
                },
                {
                    title: "操作",
                    dataIndex: "id",
                    key: "id",
                    width: 250,
                    render: (text, record) => {
                        return(
                            <Button
                                type="primary"
                                onClick={e => {
                                    e.stopPropagation();

                                }}
                            >
                                下载凭证
                            </Button>
                        )
                    }
                }
            ],
            visible:false
        }
        this.addDunOrder = this.addDunOrder.bind(this);
    }

    addDunOrder(){
        if (this.state.fileList){
            message.warning('请上传凭证');
            return;
        }
        if (this.state.date){
            message.warning('请');
            return;
        }
        this.setState({
            addDunOrderLoading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url:
                globalConfig.context + "/api/admin/lagalAffairs/addDunOrder",
            data: {
                orderNo:this.props.dataInfor.orderNo
            },
            success: function (data) {
                if(data.error.length){
                    message.warning(data.error[0].message);
                }else{
                    message.success('新增成功');
                    this.tabelContentRef && this.tabelContentRef.onRefresh();
                }
            }.bind(this)
        }).done(
            function () {
                this.setState({
                    addDunOrderLoading: false
                });
            }.bind(this)
        );
    }

    onCancel(){
        this.setState({
            visible:false
        })
    }

    render() {
        return (
            <Modal
                maskClosable={false}
                visible={this.props.visible}
                onOk={this.props.onCancel}
                onCancel={this.props.onCancel}
                width='900px'
                title={
                    <span style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent:'space-between',
                        paddingRight:'10px'
                    }}>
                        <span>
                            <span style={{marginRight:'5px'}}>催款记录列表</span>
                            <Tag color="pink">初始客户名称：{this.props.dataInfor.buyerName}</Tag>
                        </span>
                        <Button
                            type="primary"
                            onClick={e => {
                                e.stopPropagation();
                                this.setState({
                                    visible:true
                                })
                            }}
                        >
                                添加催款记录
                            </Button>
                    </span>
                }
                footer=''
                className="admin-desc-content">
                <TabelContent
                    ref={ref => this.tabelContentRef = ref}
                    columns={this.state.columns}
                    tabelApi={'/api/admin/lagalAffairs/dunOrderList'}
                    query={{orderNo:this.props.dataInfor.orderNo}}
                    dataProcessing={(data)=>{
                        let theArr = [];
                        for (let i = 0; i < data.data.length; i++) {
                            let thisdata = data.data[i];
                            thisdata.key=i + 1;
                            theArr.push(thisdata);
                        }
                        return theArr;
                    }}
                />
                <Modal
                    maskClosable={false}
                    visible={this.state.visible}
                    onOk={this.onCancel}
                    onCancel={this.onCancel}
                    width='900px'
                    title='新增催款记录'
                    footer=''
                    className="admin-desc-content">
                    <Form onSubmit={this.handleSubmit}>
                        <Form.Item
                            {...formItemLayout}
                            label="催款时间"
                            hasFeedback
                        >
                            <DatePicker onChange={(date, dateString)=>{
                                this.setState({
                                    date:dateString
                                })
                            }} />
                        </Form.Item>
                        <Form.Item
                            {...formItemLayout}
                            label="催款情况"
                            hasFeedback
                        >
                            <TextArea rows={4} onChange={(v)=>{
                                this.setState({
                                    remarks:v
                                })
                            }}/>
                        </Form.Item>
                        <Form.Item
                            {...formItemLayout}
                            label="催款附件"
                            hasFeedback
                        >
                            <ImgList
                                accept='application/pdf,image/png,application/msword'
                                domId='nowProjectStatus'
                                uploadConfig={{
                                    action:globalConfig.context + "/api/admin/newOrder/uploadDunLogFile",
                                    data:{ 'sign': "dun_log_attachment"},
                                    multiple:true,
                                    listType:"text",
                                }}
                                onChange={(info)=>{
                                    let fileList = info.fileList;
                                    this.setState({ fileList });
                                }}
                                fileList={this.state.fileList}
                            />
                        </Form.Item>
                        <div style={{display:'flex'}}>
                            <Button type="primary" onClick={this.addDunOrder}>提交</Button>
                            <Button type="dashed" style={{marginLeft:'15px'}} onClick={this.onCancel}>取消</Button>
                        </div>
                    </Form>
                </Modal>
            </Modal>
        )
    }
}

export default DunningRecord;