// 查询收费记录

import React from 'react';
import { Select, Input, Row, Col, Button, Spin, Divider, Popconfirm, message, Icon, Form, DatePicker, Table, Tabs, Modal } from 'antd';
import { $http } from 'containers/config/https';
import TipHeader from './TipHeader'

import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';

// 组件const
const { Option } = Select;
const { RangePicker } = DatePicker;

export default class InquiryFeeRecordModal extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            dataHistory: [],  // 历史记录列表
            userInfo: {},  // 用户信息
            StartDate: undefined,  // //开始日期
            EndDate: undefined,  // //结束日期
            recordID: '',
            columnsHistory: [],
            languageData: {}, // 国际化语言包
            language: {},   // 国际化语言
            languageCode: JSON.parse(window.sessionStorage.userData).language, // 国际化语言标识
        }

        // this.columnsHistory = [
        //     {
        //         title: '收费时间 ',
        //         dataIndex: 'recordDateTime',
        //         key: '1',
        //         align: "center",
        //         width: 100,
        //         render: (text, record) => (
        //             <div>
        //                 {/* {record.refundRequestFlag === 'Y' ? <span style={{ margin: '0 20px', color: '#fff', background: '#FF3399', padding: '5px', borderRadius: '4px' }}>退</span> : <span></span>} */}
        //                 <span>{record.recordDateTime}</span>
        //             </div>
        //         )
        //     }, {
        //         title: '发票号',
        //         dataIndex: 'invNo',
        //         key: '2',
        //         align: "center",
        //         width: 100
        //     }, {
        //         title: '收费员',
        //         dataIndex: 'recordChargeUser',
        //         key: '3',
        //         align: "center",
        //         width: 100
        //     }, {
        //         title: '费用',
        //         dataIndex: 'recordPatAmt',
        //         key: '4',
        //         align: "center",
        //         width: 100
        //         // }, {
        //         //     title: 'ID',
        //         //     dataIndex: 'recordID',
        //         //     key: '6',
        //         //     align: "center",
        //         //     width: 100
        //         // }, {
        //         //     title: '类型',
        //         //     dataIndex: 'invType',
        //         //     key: '7',
        //         //     align: "center",
        //         //     width: 100
        //     }
        // ]

        // if (props.type === 'refund') {
        //     this.columnsHistory.push(
        //         {
        //             title: '退费申请',
        //             dataIndex: 'refundRequestFlag',
        //             key: '5',
        //             align: "center",
        //             width: 100,
        //             render(refundRequestFlag) {
        //                 let config = {
        //                     'Y': '有',
        //                     'N': '无'
        //                 }
        //                 return config[refundRequestFlag];
        //             }
        //         }
        //     )
        // }

    }
    componentDidMount() {

        //用户数据
        this.setState({
            userInfo: this.props.userInfo,
            StartDate: this.props.StartDate,
            EndDate: this.props.EndDate,
            invNum: this.props.invNum,
        }, () => {
            this.historList() //历史记录
            this.ordList1() //历史记录

        })
    }

    // 实时更新
    componentWillReceiveProps(nextProps) {
        const { userInfo, StartDate, EndDate } = this.state
        const newdata = nextProps.userInfo
        const newStartDate = nextProps.StartDate
        const newEndDate = nextProps.EndDate
        const invNum = nextProps.invNum


        if (userInfo !== newdata) {
            this.setState({
                userInfo: newdata,
                StartDate: newStartDate,
                EndDate: newEndDate,
                dataHistory: [],
                invNum: invNum,
                recordID: ''
            }, () => {
                this.historList() //历史记录
            })
        }

    }

    //render 自定义项目名称
    listAdd = (i, j, languageCode) => {
        let { columnsHistory } = this.state
        columnsHistory.splice(i, j,
            {
                title: languageCode === 'CN' ? '收费时间' : 'Charge Time',
                dataIndex: 'recordDateTime',
                key: 'recordDateTime',
                align: "center",
                width: 100,
                render: (text, record) => (
                    <div>
                        {/* {record.refundRequestFlag === 'Y' ? <span style={{ margin: '0 20px', color: '#fff', background: '#FF3399', padding: '5px', borderRadius: '4px' }}>退</span> : <span></span>} */}
                        <span>{record.recordDateTime}</span>
                    </div>
                )
            },
        )
        if (this.props.type === 'refund') {
            columnsHistory.push(
                {
                    title: languageCode === 'CN' ? "退费申请" : 'Application for refund',
                    dataIndex: 'refundRequestFlag',
                    key: 'refundRequestFlag',
                    align: "center",
                    width: 100,
                    render(refundRequestFlag) {
                        let config = {
                            'Y': '有',
                            'N': '无'
                        }
                        return config[refundRequestFlag];
                    }
                }
            )
        }
    }
    onColumnRef = (ref) => {
        this.columnRef = ref;
    }

    // 费用类型table
    ordList1 = () => {
        let data = {
            params: [{
                "reactCode": ["InquiryFeeRecordModal"],
                "compontName": "InquiryFeeRecordModal",
                "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({
                        columnsHistory: filterArr,
                        languageTable1: res.result.B || {},  // 国际化Table1
                        languageTable2: res.result.C || {},  // 国际化Table2
                        languageData: res.result.language || {},  // 国际化语言包
                    }, () => {
                        this.LanCNEN(this.state.languageCode)
                        this.listAdd(0, 0, languageCode);
                    })
                }
            }
        })
    }

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


    // 历史记录
    historList = () => {
        let code = "05210013";

        if (!this.state.userInfo.patID) {
            return false
        }

        if (this.props.type === 'refund') {
            code = "05210017";
        }

        let data = {
            "params": [{
                "patID": this.state.userInfo.patID || '', //病人id
                "stDate": this.state.StartDate || '',  //开始日期
                "endDate": this.state.EndDate || '',  //结束日期
                "invNum": this.state.invNum || '',  //发票号
            }]
        };
        $http.post('urlS', this, {
            code: code,
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    for (var i = 0; i < res.recordInfo.length; i++) {
                        res.recordInfo[i].key = i;
                    }
                    this.setState({
                        dataHistory: res.recordInfo,     // 历史记录列表
                    })

                    if (this.state.invNum && this.state.invNum !== '') {
                        this.confirmSelection(this.state.dataHistory[0])
                    }
                }
            }
        });
    }



    // 双击传值
    confirmSelection = (record) => {
        this.setState({ recordID: record.recordID }, () => {
            this.props.updateParent(record)
        })

    }

    // table行样式
    setRowClassName = (record) => {

        if (record.recordID === this.state.recordID) {
            return 'clickRowStyle'
        }

        if (record.refundRequestFlag === 'Y') {
            return 'redTable'
        }

    }



    render() {
        const setRowClassName = this.setRowClassName

        return (
            <div >
                {/* <TipHeader userInfo={this.state.userInfo} key={this.state.userInfo.patID} /> */}
                {/* <Row>
                    <Col span={24} >
                        <span style={{ float: 'left', lineHeightL: '32px' }}> 收费日期：</span>
                        <RangePicker style={{ float: 'left' }} onChange={this.onChange} />
                        <Button style={{ background: 'rgba(66,185,131,1)', color: '#fff', width: '100px', float: 'left', marginLeft: '20px' }} onClick={this.historList}>查询</Button>
                    </Col>
                </Row> */}
                <Row>
                    <Col span={24} >
                        {/* <Table bordered dataSource={this.state.dataHistory} columns={this.state.columnsHistory} pagination={false}
                            className="smallTable"
                            scroll={{ y: 150 }}
                            style={{ minHeight: '200px' }}
                            onRow={(record) => {
                                return {
                                    onClick: (event) => {
                                        this.confirmSelection(record)
                                    },
                                };
                            }}
                            rowClassName={setRowClassName}
                        /> */}
                        <Table
                            style={{ minHeight: '225px' }}
                            dataSource={this.state.dataHistory}
                            columns={this.state.columnsHistory}
                            className="smallTable"
                            pagination={false}
                            scroll={{ y: 175 }}
                            bordered
                            onRow={(record) => {
                                return {
                                    onClick: (event) => {
                                        this.confirmSelection(record)
                                    },
                                };
                            }}
                            rowClassName={setRowClassName}
                        />
                        <ColumnAuthoritysModel
                            clientWidth='900px'
                            compontName='InquiryFeeRecordModal'
                            configType="C"
                            onRef={this.onColumnRef}
                            reloadData={this.ordList1}
                        />
                    </Col>
                </Row>
            </div >

        )
    }
}

