//门诊收费未结算
import React from 'react'
import { DatePicker, Table, Button, Row, Col} from 'antd'
import moment from 'moment';
import { $http } from '../../../containers/config/https'
import CommonPagination from 'components/pagination/index';
import '../charges/style/style.less';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';

export default class OutpatientSettlement extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            startDate: moment(new Date),
            endDate: moment(new Date),
            user: [],
            userID: JSON.parse(window.sessionStorage.userData).userID,
            tableData: [],
            showLoading: true,
            total: 0,
            page: 1,
            pageSize: 50,
            columns: [],
            languageTable1: {}, // 国际化Table1
            languageTable2: {}, // 国际化Table2
            languageData: {}, // 国际化语言包
            language: {},   // 国际化语言
            languageCode: JSON.parse(window.sessionStorage.userData).language, // 国际化语言标识
        }



        // this.columns = [
        //     {
        //         title: '操作员',
        //         dataIndex: 'payUserID',
        //         width: '100px',
        //         align: 'center',
        //     },
        //     {
        //         title: '发票总票数',
        //         dataIndex: 'allNum',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '作废票数',
        //         dataIndex: 'abortInvNum',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '红冲票数',
        //         dataIndex: 'strikeInvNum',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '票据总金额',
        //         dataIndex: 'allAmt',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '作废金额',
        //         dataIndex: 'abortInvAmt',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '红冲金额',
        //         dataIndex: 'strikeInvAmt',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '票据支付方式',
        //         dataIndex: 'payInvAmt',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '预交金笔数',
        //         dataIndex: 'accepInvNum',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '预交金金额',
        //         dataIndex: 'accepInvAmt',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '预交金支付方式',
        //         dataIndex: 'accAmt',
        //         width: '100px',
        //         align: 'center'
        //     },
        // ]
    }
    onColumnRef = (ref) => {
        this.columnRef = ref;
    }
    // 获取主列表columns
    tableList = (reactCode, compontName) => {
        var data = {
            params: [{
                "reactCode": [reactCode],
                "compontName": compontName,
                "type": "C"
            }]
        }
        $http.post('urlS', this, {
            code: '01040073',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    let resC = res.result.C
                    let { languageCode } = this.state
                    for (var i = 0; i < resC.length; i++) {
                        resC[i].key = i;
                    }
                    if (languageCode === "EN") {
                        resC.map((item, i) => {
                            item.title = item.enDescripts
                        })
                    }

                    if (languageCode === "CN") {
                        resC.map((item, i) => {
                            item.title = item.descripts
                        })
                    }
                    let arr = res.result && resC.length > 0 ? JSON.parse(JSON.stringify(resC)).map(item => {
                        return {
                            align: item.align,
                            widthNum: parseInt(item.width),
                            width: item.width,
                            dataIndex: item.dataIndex,
                            title: <div onDoubleClick={() => this.columnRef.onOpenModel()}>{item.title}</div>,
                            display: item.display,
                            key: item.seqNo
                        }
                    }) : '';
                    let filterArr = arr.filter(function (item) { return item.display === 'Y' });
                    this.setState({
                        columns: filterArr,
                        languageTable1: res.result.B || {},  // 国际化Table1
                        languageTable2: res.result.C || {},  // 国际化Table2
                        languageData: res.result.language || {},  // 国际化语言包
                    }, () => {
                        this.LanCNEN(this.state.languageCode)
                    })
                }
            }
        })
    }

    LanCNEN = (code) => {
        let { languageData } = this.state
        this.setState({
            language: languageData[code]
        })
    }

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

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

    //初始化数据
    componentDidMount() {
        this.tableList("InvOutpatientSettlement", "InvOutpatientSettlement");
        this.handleQuery()
    }

    //基础数据
    handleQuery = () => {
        let { startDate, endDate, page, pageSize } = this.state;
        let data = {}
        data = {
            params: [{
                "startDate": startDate,
                "endDate": endDate,
                "hospID": JSON.parse(window.sessionStorage.userData).hospID,
            }],
            pagination: [{
                pageSize: pageSize,
                currentPage: page,
                sortColumn: 'code',
                sortOrder: 'asc'
            }]
        }

        $http.post('urlDeanlt', this, {
            code: '05100155',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0 && res.result) {
                    for (var i = 0; i < res.result.length; i++) {
                        res.result[i].key = i;
                    }
                    this.setState({ tableData: res.result.SettlementArr, total: res.result.TotalCount, loading: false })
                } else {
                    this.setState({ tableData: [], total: 0, loading: false })
                }
            }
        })
    }
    // 查询条件 --- 开始日期
    onChangeStartDate = (e) => {
        this.setState({ startDate: e });
    }
    //查询条件 --- 结束日期
    onChangeEndDate = (e) => {
        this.setState({ endDate: e });
    }
    render() {
        let { language } = this.state
        return (
            <div className="outpatient-body" style={{ width: '100%', height: '100%' }}>
                <div className="department-header">
                    <Row style={{ minHeight: '80px', padding: '0 24px' }}>
                        <Col span={18} style={{ marginTop: '24px' }}>
                            {language.InvOutpatientSettlementstartDate && language.InvOutpatientSettlementstartDate.descripts}：
                            <DatePicker format="YYYY-MM-DD" style={{ marginRight: '20px' }} value={this.state.startDate} onChange={this.onChangeStartDate} />
                            {language.InvOutpatientSettlementendDate && language.InvOutpatientSettlementendDate.descripts}：
                            <DatePicker format="YYYY-MM-DD" style={{ marginRight: '20px' }} value={this.state.endDate} onChange={this.onChangeEndDate} />
                            <Button style={{ marginRight: '20px' }} onClick={this.handleQuery}>{language.InvOutpatientSettlementquery && language.InvOutpatientSettlementquery.descripts}</Button>
                            <Button>{language.InvOutpatientSettlementExport && language.InvOutpatientSettlementExport.descripts}</Button>
                        </Col>
                    </Row>
                </div>
                <div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>
                <div style={{ padding: 12 }}>

                    <Table
                        style={{ height: '740px' }}
                        dataSource={this.state.tableData}
                        columns={this.state.columns}
                        pagination={false}
                        bordered
                        loading={this.state.loading}
                    />
                    <ColumnAuthoritysModel
                        clientWidth='900px'
                        compontName='InvOutpatientSettlement'
                        configType="C"
                        onRef={this.onColumnRef}
                        reloadData={() => { this.tableList("InvOutpatientSettlement", "InvOutpatientSettlement") }}
                    />
                    <CommonPagination size="large" current={this.state.page} total={this.state.total} search='search'
                        onShowSizeChange={this.apponShowSizeChange} complete={true} dataSource={this.state.tableData}
                        onChange={this.appPageChange} />

                </div>
            </div>
        )
    }
}