//订单汇总列表
import React from 'react';
import { Table, Popconfirm, Icon, message, Modal, Form, Divider, Select, Row, Col, Button, Input, DatePicker, Tabs } from 'antd';
import { $http } from '../../containers/config/https';
import moment from 'moment';
import { handleExcel } from 'tools/handleExcel.js';
import store from '../../store';

import CommonPagination from 'components/pagination/index';

const { Option } = Select;
const { TabPane } = Tabs;
const dateFormat = 'YYYY-MM-DD'; //定义全局日期格式
const formItemLayout = {    // label 和input宽度
    labelCol: { span: 10 },
    wrapperCol: { span: 12, offset: 2 },
};

class MaintainWeChatPayRecord extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false, //加载状态标志
            visible: false, //弹窗显示状态标志
            motalTitle: '', //弹窗标题
            total1: 0,  // 表格数据总条数
            page1: 1, //当前页数
            pageSize1: 10, //每页显示条数
            total2: 0,  // 表格数据总条数
            page2: 1, //当前页数
            pageSize2: 10, //每页显示条数
            tableData1: [],
            tableData2: [],
            ifBaddebts: 1,  //1代表正常列表，2代表坏账列表
            outtradeno: '', //订单号
            transactionid: '', //微信支付流水号
            patID: '', //病人id
            patName: '', //病人姓名
            payDate: moment(), //支付日期
            payEndDate: moment()
        };
        this.columns1 = [
            {
                title: '订单类型',
                desc: '订单类型',
                dataIndex: 'type',
                key: 'type',
                width: '100px',
                align: "center",
            },
            {
                title: '统计日期',
                desc: '统计日期',
                dataIndex: 'payDate',
                key: 'payDate',
                width: '100px',
                align: "center",
            },
            {
                title: '总支付笔数',
                desc: '总支付笔数',
                dataIndex: 'inCount',
                key: 'inCount',
                width: '100px',
                align: "center",
            },
            {
                title: '自费总支付金额',
                desc: '自费总支付金额',
                dataIndex: 'inSelf',
                key: 'inSelf',
                width: '100px',
                align: "center",
            },
            {
                title: '总退款笔数',
                desc: '总退款笔数',
                dataIndex: 'outCount',
                key: 'outCount',
                width: '100px',
                align: "center",
            },
            {
                title: '自费总退款金额',
                desc: '自费总退款金额',
                dataIndex: 'outSelf',
                key: 'outSelf',
                width: '100px',
                align: "center",
            },
            {
                title: '自费应结算金额',
                desc: '自费应结算金额',
                dataIndex: 'seltSettleAmt',
                key: 'seltSettleAmt',
                width: '100px',
                align: "center",
            },
            {
                title: '医保总支付金额',
                desc: '医保总支付金额',
                dataIndex: 'inInsuAmt',
                key: 'inInsuAmt',
                width: '100px',
                align: "center",
            },
            {
                title: '医保总退款金额',
                desc: '医保总退款金额',
                dataIndex: 'outInsuAmt',
                key: 'outInsuAmt',
                width: '100px',
                align: "center",
            },
            {
                title: '医保应结算金额',
                desc: '医保应结算金额',
                dataIndex: 'insuSettleAmt',
                key: 'insuSettleAmt',
                width: '100px',
                align: "center",
            },
            // {
            //     title: '支付渠道',
            //     desc: '支付渠道',
            //     dataIndex: 'businessType',
            //     key: 'businessType',
            //     width: '100px',
            //     align: "center",
            // },
            // {
            //     title: '操作',
            //     desc: '操作',
            //     key: 'op',
            //     align: "center",
            //     width: '100px',
            //     render: (text, record) => (
            //         <span hidden={record && record.id ? false : true}>
            //             <span className='span' onClick={() => this.showModal(record, 'normal')}><Icon type="edit" />订单详情</span>
            //         </span>

            //     ),
            // },
        ];
    }


    componentDidMount() {
        //初始化列表数据
        this.handleQuery();
    }

    // 导出订单列表
    exportInformation() {
        let columns1 = this.columns1;
        console.log("columns1", columns1)
        if (this.state.tableData1.length > 0) {
            for (var i = 0; i < columns1.length; i++) {
                columns1[i].title = columns1[i].desc
            }
            handleExcel.exportExcel(columns1, this.state.tableData1, '订单汇总列表')
        }
    }

    //初始化列表数据
    handleQuery = () => {
        let { page1, pageSize1, page2, pageSize2, ifBaddebts, outtradeno, transactionid, patID, patName, payDate, payEndDate } = this.state;
        let data = {}
        let code=''
        {
            code = '130989'
            data = {
                params: [{
                    outtradeno: outtradeno,
                    transactionid: transactionid,
                    patID: patID,
                    patName: patName,
                    payDate: payDate,
                    payEndDate: payEndDate,
                }],
                pagination: [{
                    pageSize: pageSize2,
                    currentPage: page2,
                    sortColumn: 'code',
                    sortOrder: 'asc'
                }]
            }
        }
        $http.post('urlS', this, {
            code: code,
            data: data,
            success: function (res) {
                if (+res.errorCode === 0 && res.result.data) {
                    this.setState({ tableData1: res.result.data, total1: res.result.totalCount, loading: false })
                } else {
                    this.setState({ tableData1: [], total1: 0, loading: false })
                }

            }
        })
    }

    // 页码改变的回调，参数是改变后的页码及每页条数
    appPageChange = (page, pageSize) => {
        this.setState({
            page1: page,
            pageSize1: pageSize,
        }, () => {
            // 重新调用查询方法
            this.handleQuery();
        });
    }

    // 条数改变的回调
    apponShowSizeChange = (current, size) => {
        this.setState({
            page1: current,
            pageSize1: size,
        }, () => {
            // 重新调用查询方法
            this.handleQuery();
        });
    }

    // 页码改变的回调，参数是改变后的页码及每页条数
    appPageChange2 = (page, pageSize) => {
        this.setState({
            page2: page,
            pageSize2: pageSize,
        }, () => {
            // 重新调用查询方法
            this.handleQuery();
        });
    }

    // 条数改变的回调
    apponShowSizeChange2 = (current, size) => {
        this.setState({
            page2: current,
            pageSize2: size,
        }, () => {
            // 重新调用查询方法
            this.handleQuery();
        });
    }

    //订单号改变
    onChangeOuttradeno = (e) => {
        this.setState({ outtradeno: e.target.value })
    }

    //微信交易流水改变
    onChangeTransactionid = (e) => {
        this.setState({ transactionid: e.target.value })
    }

    //病人ID改变
    onChangePatID = (e) => {
        this.setState({ patID: e.target.value })
    }

    //病人姓名改变
    onChangePatName = (e) => {
        this.setState({ patName: e.target.value })
    }

    //支付日期改变
    onChangePayDate = value => {
        this.setState({ payDate: value })
    }
    //支付结束日期改变
    onChangeEndPayDate = value => {
        this.setState({ payEndDate: value })
    }


    //弹窗点击取消
    handleCancel = () => {
        this.setState({ visible: false, });
    };

    //正常订单弹窗显示
    showModal = (record, type) => {
        let data = {}
        data = {
            params: [{
                BSUPPPayMentRecordID: record.id
            }]
        }
        $http.post('urlS', this, {
            code: '130974',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0 && res.result.data) {
                    this.props.form.setFieldsValue({
                        hosp: res.result.data[0].hosp,
                        businessType: res.result.data[0].businessType,
                        payReasonDesc: res.result.data[0].payReasonDesc,
                        payDate: res.result.data[0].payDate,
                        PayTime: res.result.data[0].PayTime,
                        totalAmt: res.result.data[0].totalAmt,
                        discountAmt: res.result.data[0].discountAmt,
                        shareFreeAmt: res.result.data[0].shareFreeAmt,
                        patAmt: res.result.data[0].patAmt,
                        insuAmt: res.result.data[0].insuAmt,
                        recordStatus: res.result.data[0].recordStatus,
                        reportFlag: res.result.data[0].reportFlag,
                        reason: res.result.data[0].reason,
                        electronicPictureUrl: res.result.data[0].electronicPictureUrl,
                        businessType: res.result.data[0].businessType,
                        payTradeNum: res.result.data[0].payTradeNum,
                        outtradeno: res.result.data[0].outtradeno,
                        hisTradeNum: res.result.data[0].hisTradeNum,
                        resultCode: res.result.data[0].resultCode,
                        errorCode: res.result.data[0].errorCode,
                        tradeState: res.result.data[0].tradeState,
                        body: res.result.data[0].body
                    });
                    if (type === 'normal') {
                        this.setState({
                            visible: true,
                            motalTitle: "正常订单详情",
                        });
                    } else {
                        this.setState({
                            visible: true,
                            motalTitle: "坏账订单详情",
                        });
                    }
                }
            }
        })
    };

    render() {
        let { } = this.state;
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <div style={{ width: '100%', height: '100%' }}>
                    <Row style={{ padding: '0 24px 16px 24px' }}>
                        <Col span={4}>
                            <span>支付开始日期：</span>
                            <DatePicker
                                style={{ width: '180px' }}
                                format='YYYY-MM-DD'
                                onChange={this.onChangePayDate}
                                value={this.state.payDate}
                            />
                        </Col>
                        <Col span={4}>
                            <span>支付结束日期：</span>
                            <DatePicker
                                style={{ width: '180px' }}
                                format='YYYY-MM-DD'
                                onChange={this.onChangeEndPayDate}
                                value={this.state.payEndDate}
                            />
                        </Col>
                        <Col span={3} style={{ textAlign: 'right' }}>
                            <Button type="primary" onClick={() => this.handleQuery()} icon="search" >查询</Button>
                            <Button type="primary" onClick={() => this.exportInformation()} style={{ marginLeft: "20px" }} >导出</Button>
                        </Col>
                    </Row>
                </div>
                <div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>
                <div style={{ padding: '0 24' }}>

                    <Table
                        style={{ height: store.getState().tableHeight.y + 30 + 'px' }}
                        dataSource={this.state.tableData1}
                        columns={this.columns1}
                        className='TableA'
                        pagination={false}
                        scroll={{ x: 900, y: store.getState().tableHeight.y }}
                        bordered
                        loading={this.state.loading}
                    />
                    {/* <CommonPagination size="small" current={this.state.page1} total={this.state.total1} search='search'
                                onShowSizeChange={this.apponShowSizeChange} complete={true} dataSource={this.state.tableData1}
                                onChange={this.appPageChange} /> */}

                    <Modal
                        visible={this.state.visible}
                        title={this.state.motalTitle}
                        onOk={this.handleCancel}
                        onCancel={this.handleCancel}
                        width='1000px'
                        footer={[
                            <Button key="back" onClick={this.handleCancel}>返回</Button>
                        ]}
                    >
                        {/* <Form layout="inline" className='formTable'>
                            <div>
                                <Row>
                                    <Col span={8}>
                                        <Form.Item label='医院：' {...formItemLayout} >
                                            {getFieldDecorator("hosp", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='交易类型：' {...formItemLayout} >
                                            {getFieldDecorator("businessType", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='支付费别：' {...formItemLayout} >
                                            {getFieldDecorator("payReasonDesc", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='收款日期：' {...formItemLayout} >
                                            {getFieldDecorator("payDate", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='收款时间：' {...formItemLayout} >
                                            {getFieldDecorator("PayTime", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='总金额：' {...formItemLayout} >
                                            {getFieldDecorator("totalAmt", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='折扣金额：' {...formItemLayout} >
                                            {getFieldDecorator("discountAmt", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='记账金额：' {...formItemLayout} >
                                            {getFieldDecorator("shareFreeAmt", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='实付金额：' {...formItemLayout} >
                                            {getFieldDecorator("patAmt", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='医保结算金额：' {...formItemLayout} >
                                            {getFieldDecorator("insuAmt", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='收费状态：' {...formItemLayout} >
                                            {getFieldDecorator("recordStatus", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='结账状态：' {...formItemLayout} >
                                            {getFieldDecorator("reportFlag", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='退款原因：' {...formItemLayout} >
                                            {getFieldDecorator("reason", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='电子发票地址：' {...formItemLayout} >
                                            {getFieldDecorator("electronicPictureUrl", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='交易类型：' {...formItemLayout} >
                                            {getFieldDecorator("businessType", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='付款交易流水号：' {...formItemLayout} >
                                            {getFieldDecorator("payTradeNum", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='商户订单号：' {...formItemLayout} >
                                            {getFieldDecorator("outtradeno", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='HIS交易流水：' {...formItemLayout} >
                                            {getFieldDecorator("hisTradeNum", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='业务结果：' {...formItemLayout} >
                                            {getFieldDecorator("resultCode", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='错误代码：' {...formItemLayout} >
                                            {getFieldDecorator("errorCode", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='交易状态：' {...formItemLayout} >
                                            {getFieldDecorator("tradeState", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item label='商品描述：' {...formItemLayout} >
                                            {getFieldDecorator("body", {
                                                initialValue: '',
                                            })(
                                                <Input style={{ width: '180px' }} disabled={true} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                </Row>
                            </div>
                        </Form> */}
                    </Modal>
                </div>
            </div>
        )
    }
}

const MaintainWeChatPayRecordForm = Form.create()(MaintainWeChatPayRecord);
export default MaintainWeChatPayRecordForm;