/*
 * Creater:     gjg
 * CreateDate:  2022/08/17
 * Describe：   微信支付查询
 * */
import React, { Component } from 'react';
import { Row, Col, Button, Card, Select, Input } from 'antd';
import store from 'store';
import { Util } from 'tools';
import moment from 'moment';
import PubilcTablePagination from 'pages/common/PubilcTablePagination.jsx';
import RangeDatePicker from 'components/rangePicker/index';
import iconListvisits from 'assets/images/icon_listvisits.png';
import { dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import './style/index.less';

class WXPayAbnormalInfo extends Component {
    constructor(props) {
        super(props);
        var date = new Date();
        var userData = JSON.parse(window.sessionStorage.userData);
        var titleData = JSON.parse(sessionStorage.getItem('titleData')) || {};
        this.state = {
            userData: userData,
            titleData: titleData,
            mainTableData: [],
            mainFormData: [], // 主表表单数据
            mainTotal: 0,
            mainPage: 1,
            mainPageSize: 20,
            mainLoading: false,
            rowID: '',
            rowData: {},
            startDate: moment(date).format(dayFormat),  // //开始日期
            endDate: moment(date).format(dayFormat),  // //结束日期
            statusArr: [],
            status: '',
            desc: ''
        };
        // 主表表头数据
        this.mainColumns = [{
            key: 1,
            title: '状态',
            dataIndex: 'payStatusDesc',
            align: "center",
            width: "100px"
        }, {
            key: 2,
            title: '交易代码',
            dataIndex: 'tradeCode',
            align: "center",
            width: "100px"
        }, {
            key: 3,
            title: '交易结果',
            dataIndex: 'resultCode',
            align: "center",
            width: "100px"
        }, {
            key: 4,
            title: '异常信息',
            dataIndex: 'resultContent',
            align: "center",
            width: "100px"
        }, {
            key: 5,
            title: '病人ID',
            dataIndex: 'patID',
            align: "center",
            width: "100px"
        }, {
            key: 6,
            title: '病人姓名',
            dataIndex: 'patName',
            align: "center",
            width: "100px"
        }, {
            key: 7,
            title: '病人登记号',
            dataIndex: 'patNo',
            align: "center",
            width: "100px"
        }, {
            key: 8,
            title: '支付金额',
            dataIndex: 'payAmt',
            align: "center",
            width: "100px"
        }, {
            key: 9,
            title: '交易时间',
            dataIndex: 'createDateTime',
            align: "center",
            width: "100px"
        }];
    }

    componentDidMount() {
        this.getTableColumns();
        this.handleQuery();
        this.getSeleceData();
    }

    // 请求下拉数据
    getSeleceData = async () => {
        try {
            let data = {
                params: [{}],
            }
            let res = await React.$asyncPost(this, '05300032', data);
            this.setState({ statusArr: res.result.status });
        } catch (error) {
            this.setState({ mainTableData: [], mainTotal: 0, mainLoading: false })
        }
    }

    // 获取主列表columns
    getTableColumns = () => {
        let { language } = this.state;
        let data = {
            params: [{
                compontName: "WXPayAbnormalInfo",
                type: 'C',
            }]
        }
        $http.post('urlS', this, {
            code: '01040073',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    let arr = res.result && res.result.C.length > 0 ? res.result.C : '';
                    let filterArr = arr.filter(function (item) { return item.display === 'Y' });
                    console.log("filterArr", filterArr)
                    this.setState({ columns: filterArr, widthTotal: res.totalWidth })
                }
            }
        })
    }

    handleQuery = () => {
        this.setState({ mainPage: 1, mainLoading: true }, () => {
            this.getTableData();
        })
    }

    // 提供修改page和pageSize的回调函数
    handleCompilePage = (page, pageSize) => {
        // 修改page，或者pageSize
        this.setState({ mainPage: page, mainPageSize: pageSize, mainLoading: true }, () => {
            // 重新调用查询方法
            this.getTableData();
        })
    }

    // 请求列表数据
    getTableData = async () => {
        try {
            let { startDate, endDate, mainPage, mainPageSize, titleData, desc, status } = this.state;
            console.log("status", status)
            let data = {
                params: [{
                    startDate,
                    endDate,
                    status,
                    input: desc || ''
                }],
                pagination: [{
                    pageSize: mainPageSize,
                    currentPage: mainPage
                }]
            }
            let res = await React.$asyncPost(this, '05300033', data);
            let mainTableData = res.result && 'rows' in res.result ? Util.addKeyValueToDataSource(res.result.rows) : [];
            this.setState({ mainTableData, mainTotal: res.result.total, mainLoading: false });
        } catch (error) {
            this.setState({ mainTableData: [], mainTotal: 0, mainLoading: false })
        }
    }

    // 操作行
    onClickRowPublic = (record) => {
        return {
            // 单击行选中
            onClick: () => {
                if (this.state.rowID === '') {
                    // 保存行数据以及ID
                    this.setState({ rowID: record.key, rowData: record });
                } else {
                    if (this.state.rowID !== record.key) {
                        this.setState({ rowID: record.key, rowData: record });
                    } else {
                        this.setState({ rowID: "", rowData: {} });
                    }
                }
            }
        }
    }

    // 选中行操作
    setRowClassNamePublic = (record) => {
        return record.key === this.state.rowID ? 'clickRowStyle' : '';
    }

    //开始日期
    startChange(date) {
        this.setState({
            startDate: date,
        })
    }

    //结束日期
    endChange(date) {
        this.setState({
            endDate: date,
        })
    }

    // 补交易
    handleSupplementaryTransaction = async(record) => {
        console.log('record', record)
        try {
            let data = {
                params: [{
                    "parkRecordDrinfo":record.parkRecordDrinfo,		                        //;退费ID
                    "newpayrecordinfo":record.newpayrecordinfo,		                        //;新付款记录rowid串
                    "paytype":record.paytype,			                                    //;单据类型 CB_InvType 中(代码 O 门诊发票,I 住院发票,R 挂号发票,OP 门诊预交金,IP 住院预交金,H 体检发票,CF 建卡费发票)
                    "hospID":JSON.parse(window.sessionStorage.userData).hospID,				//;登录医院
                    "userID":JSON.parse(window.sessionStorage.userData).userID				
                }],
            }
            let res = await React.$asyncPost(this, '05100342', data);
            if (+res.errorCode === 0) {
                message.success(res.errorMessage)
            }
            else {
                message.warn(res.errorMessage);
            }
        } catch (error) {
            this.setState({ mainTableData: [], mainTotal: 0, mainLoading: false })
        }
        // 重新调用查询方法
        this.getTableData();
    }

    render() {
        let { mainTableData, mainTotal, mainPage, mainLoading, columns, statusArr, status, desc } = this.state;
        // 列表操作
        const operationObj = {
            width: 80,
            title: '操作',
            align: 'center',
            key: 'operation',
            // fixed: 'right',
            render: (text, record) => (
                record.payStatusCode=='TP' ? <span className="span" onClick={(e) => this.handleSupplementaryTransaction(record, e)}>
                    补交易
                </span> : ''
            ),
        };
        // 组件所需参数
        const mainParam = {
            // 表头配置
            columns: columns ? [...columns, operationObj] : [...this.mainColumns, operationObj],
            // 表格数据
            data: mainTableData,
            // 数据总条数
            total: mainTotal,
            // 当前页数
            page: mainPage,
            pageSize: "20",
            // 表格的宽度
            x: 750,
            y: store.getState().tableHeight.y + 47,
            height: store.getState().tableHeight.y + 97 + "px",
            isOnRow: true,
            rowClassName: true,
            loading: mainLoading,
        };

        return (
            <div>
                <Row className='refraction-result-query'>
                    <Col>
                        <div style={{ paddingRight: '6px', position: 'relative' }}>
                            <Card
                                size="small"
                                title={
                                    <div className='card-title-left-img'>
                                        <img src={iconListvisits} alt='' />
                                        微信支付异常信息列表
                                    </div>
                                }
                            >
                                <div className='table-body-height'>
                                    <div style={{ marginBottom: '12px' }} className="flex-align-items">
                                        <RangeDatePicker
                                            isChange={true}
                                            label={this.state.userData.language == 'EN' ? '	Refraction date：' : '支付日期：'}
                                            format='YYYY-MM-DD' width={300}
                                            startDate={this.state.startDate}
                                            endDate={this.state.endDate}
                                            startChange={this.startChange.bind(this)}
                                            endChange={this.endChange.bind(this)}

                                        />
                                        <span style={{ marginLeft: '20px' }}>状态：</span><Select
                                            allowClear
                                            showSearch
                                            optionFilterProp="seachprop"
                                            placeholder="状态"
                                            value={status}
                                            onChange={Util.handleSelectChange.bind(this, 'status')}
                                            style={{ width: '150px', marginRight: '20px' }}
                                        >
                                            {statusArr && statusArr.length > 0 ? React.$SelectOptions(statusArr) : ''}
                                        </Select>
                                        患者信息：<Input title="输入内容后可回车检索" placeholder="请输入( Enter )"
                                            value={desc} onChange={Util.commonInputChange.bind(this, 'desc')} onPressEnter={this.handleQuery}
                                            style={{ width: '150px' }}
                                        />
                                        <Button style={{ marginLeft: '20px' }} onClick={this.handleQuery}>查询</Button>
                                    </div>
                                    <PubilcTablePagination
                                        param={mainParam}
                                        compilePage={this.handleCompilePage}
                                        onClickRowPublic={this.onClickRowPublic}
                                        setRowClassNamePublic={this.setRowClassNamePublic}
                                    />
                                </div>
                            </Card>
                            <div
                                style={{
                                    width: '6px',
                                    background: 'rgba(240, 242, 245, 1)',
                                    position: 'absolute',
                                    top: 0,
                                    right: 0,
                                    height: '100%',
                                }}
                            ></div>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }
};

export default WXPayAbnormalInfo;