//费用押金明细查询
import React from 'react'
import { DatePicker, Table, Button, Tabs, Row, Col, Select, Input, Card } from 'antd'
import moment from 'moment';
import { $http } from '../../../containers/config/https'
import store from '../../../store';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import '../style/index.less';

const { TabPane } = Tabs;
const { Option } = Select;

export default class InvRecordCost extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],
            Topdata: [],
            HBUserArr: [],
            AdmReasonArr: [],
            startDate: moment(new Date),
            stopDate: moment(new Date),
            userID: JSON.parse(window.sessionStorage.userData).userID,
            patID: '',
            admReasonID: undefined,
            ColumnAuthority: '',
            InvRecordcolumns: [],
            Depositcolumns: [],
            languageTable1: {}, // 国际化Table1
            languageTable2: {}, // 国际化Table2
            languageData: {}, // 国际化语言包
            language: {},   // 国际化语言
            languageCode: JSON.parse(window.sessionStorage.userData).language, // 国际化语言标识

        }
        //     this.InvRecordcolumns = [
        //         {
        //             title: '发票号',
        //             dataIndex: 'invNo',
        //             width: '100px',
        //             align: 'center'
        //         },
        //         {
        //             title: '时间',
        //             dataIndex: 'payDate',
        //             width: '100px',
        //             align: 'center',
        //             render: (text, record) => (
        //                 <span>
        //                     {record.payDate}&nbsp;&nbsp;{record.payTime}
        //                 </span>
        //             )
        //         },
        //         {
        //             title: '病人ID',
        //             dataIndex: 'patNo',
        //             width: '100px',
        //             align: 'center'
        //         },
        //         {
        //             title: '病人姓名',
        //             dataIndex: 'patName',
        //             width: '100px',
        //             align: 'center'
        //         },
        //         {
        //             title: '收费类别',
        //             dataIndex: 'admReasonDesc',
        //             width: '100px',
        //             align: 'center'
        //         },
        //         {
        //             title: '金额',
        //             dataIndex: 'totalAmt',
        //             width: '100px',
        //             align: 'center'
        //         },
        //         {
        //             title: '支付方式',
        //             dataIndex: 'payInvAmt',
        //             width: '100px',
        //             align: 'center'
        //         },
        //         {
        //             title: '优惠金额',
        //             dataIndex: 'discountAmt',
        //             width: '100px',
        //             align: 'center'
        //         },
        //     ]
        // this.Depositcolumns = [
        //     {
        //         title: '交易时间',
        //         dataIndex: 'payDate',
        //         width: '100px',
        //         align: 'center',
        //         render: (text, record) => (
        //             <span>
        //                 {record.payDate}&nbsp;&nbsp;{record.payTime}
        //             </span>
        //         )
        //     },
        //     {
        //         title: '病人ID',
        //         dataIndex: 'patNo',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '病人卡号',
        //         dataIndex: 'patcardNo',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '姓名',
        //         dataIndex: 'patName',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '性别',
        //         dataIndex: 'patSexID',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '操作员',
        //         dataIndex: 'payUserID',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '交易方式',
        //         dataIndex: 'payModeID',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '交易类型',
        //         dataIndex: 'paymentType',
        //         width: '100px',
        //         align: 'center'
        //     },
        //     {
        //         title: '金额',
        //         dataIndex: 'payAmt',
        //         width: '100px',
        //         align: 'center'
        //     },
        // ]
    }

    //初始化数据
    componentDidMount() {
        this.tableList("InvRecordCost", "InvRecordCost");
        this.tableList("InvRecordCost", "InvRecordCostCost");
        this.tableList("InvRecordCost", "InvRecordCostDeposit");
        this.getUserData()
        this.getAdmReasonData()
        this.handleQuery()
    }

    //render 自定义项目名称
    listAddInvRecordcolumns = (i, j, languageCode) => {
        let { InvRecordcolumns } = this.state
        InvRecordcolumns.splice(i, j,
            {
                title: languageCode === 'CN' ? '时间' : 'Time',
                dataIndex: 'payDate',
                width: '100px',
                align: 'center',
                render: (text, record) => (
                    <span>
                        {record.payDate}&nbsp;&nbsp;{record.payTime}
                    </span>
                )
            },
        )
    }
    //render 自定义项目名称
    listAddDepositcolumns = (i, j, languageCode) => {
        let { Depositcolumns } = this.state
        Depositcolumns.splice(i, j,
            {
                title: languageCode === 'CN' ? '交易时间' : 'Time',
                dataIndex: 'payDate',
                width: '100px',
                align: 'center',
                render: (text, record) => (
                    <span>
                        {record.payDate}&nbsp;&nbsp;{record.payTime}
                    </span>
                )
            },
        )
    }
    onColumnRef = (ref) => {
        console.log(ref)
        this.columnRef = ref;
    }

    // 获取主列表columns
    tableList = (reactCode, compontName) => {
        var data = {
            params: [{
                "reactCode": [reactCode],
                "compontName": compontName,
                "type": "C"
            }]
        }
        console.log(1, data)
        $http.post('urlS', this, {
            code: '01040073',
            data: data,
            success: function (res) {
                console.log(2)
                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.setState({ ColumnAuthority: compontName }, () => this.columnRef.onOpenModel())}>{item.title}</div>,
                            display: item.display,
                            key: item.seqNo
                        }
                    }) : '';
                    let filterArr = arr !== '' ? arr.filter(function (item) { return item.display === 'Y' }) : ''
                    if (compontName === 'InvRecordCost') {
                        this.setState({
                            languageTable1: res.result.B || {},  // 国际化Table1
                            languageTable2: res.result.C || {},  // 国际化Table2
                            languageData: res.result.language || {},  // 国际化语言包
                        }, () => {
                            this.LanCNEN(this.state.languageCode)
                        })
                    } else if (compontName === 'InvRecordCostCost') {
                        this.setState({
                            InvRecordcolumns: filterArr,
                        }, () => {
                            this.listAddInvRecordcolumns(2, 0, languageCode);
                        })
                    } else if (compontName === 'InvRecordCostDeposit') {
                        this.setState({
                            Depositcolumns: filterArr,
                        }, () => {
                            this.listAddDepositcolumns(1, 0, languageCode);
                        })
                    }

                }
            }
        })
    }

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


    //费别下拉框
    getAdmReasonData = () => {
        $http.post("urlS", this, {
            code: '05100129',
            data: {
                params: [{
                    "hospID": JSON.parse(window.sessionStorage.userData).hospID, //医院id 
                }]
            },
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({ AdmReasonArr: res.data })
                }
            }
        })
    }
    //操作员下拉框
    getUserData = () => {
        $http.post("urlS", this, {
            code: '05210023',
            data: {
                params: [{
                    "hospID": JSON.parse(window.sessionStorage.userData).hospID, //医院id 
                    "locTypeCode": "C"
                }]
            },
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({ HBUserArr: res.user })
                }
            }
        })
    }
    // 查询条件 --- 开始日期
    onChangeStartDate = (e) => {
        this.setState({ startDate: e });
    }
    // 查询条件 --- 结束日期
    onChangeStopDate = (e) => {
        this.setState({ stopDate: e });
    }
    // 查询条件 --- 收费员
    onChangeUserID = (e) => {
        this.setState({ userID: e });
    }
    // 查询条件 --- 病人ID
    onChangePatID = (e) => {
        this.setState({ patID: e.target.value });
    }
    // 查询条件 --- 费别
    onChangeAdmReasonID = (e) => {
        this.setState({ admReasonID: e });
    }
    //基础数据
    handleQuery = () => {
        let { startDate, stopDate, userID, patID, admReasonID, hospID } = this.state;
        let data = {}
        data = {
            params: [{
                "startDate": startDate,
                "stopDate": stopDate,
                "userID": userID || '',
                "patID": patID,
                "admReasonID": admReasonID || '',
                "hospID": JSON.parse(window.sessionStorage.userData).hospID,
            }]
        }
        $http.post('urlDeanlt', this, {
            code: '05100152',
            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;
                    }
                    for (var i = 0; i < res.depositArr.length; i++) {
                        res.depositArr[i].key = i;
                    }
                    this.setState({ data: res.result, total: res.result.length, loading: false })
                    this.setState({ Topdata: res.depositArr, total: res.depositArr.length, loading: false })
                } else {
                    this.setState({ data: [], total: 0, loading: false })
                    this.setState({ Topdata: [], total: 0, loading: false })
                }
            }
        })
    }
    render() {
        let { AdmReasonArr, HBUserArr, language } = this.state;
        // 费别
        let admReason = AdmReasonArr && AdmReasonArr.map((item, index) => {
            return (<Option key={index} title={item.descripts} value={item.id}>{item.descripts}</Option>)
        })
        // 操作员
        let hBUser = HBUserArr && HBUserArr.map((item, index) => {
            return (<Option key={index} title={item.descripts} value={item.id}>{item.descripts}</Option>)
        })
        return (
            <div style={{ width: '100%', height: '100%', background: '#F5F7FE' }} className='hosptial-adm-body'>
                <Card className="department-header" bodyStyle={{ padding: '10px' }}>
                    <Col span={4} className='common-col-ul'>
                        <span className='common-span-ui'>{language.InvRecordCoststartDate && language.InvRecordCoststartDate.descripts}：</span>
                        <DatePicker allowClear={false} format="YYYY-MM-DD" style={{ marginRight: '10px' }} value={this.state.startDate} onChange={this.onChangeStartDate} />
                    </Col>
                    <Col span={4} className='common-col-ul'>
                        <span className='common-span-ui'>{language.InvRecordCostendDate && language.InvRecordCostendDate.descripts}：</span>
                        <DatePicker allowClear={false} format="YYYY-MM-DD" style={{ marginRight: '10px' }} value={this.state.stopDate} onChange={this.onChangeStopDate} />
                    </Col>
                    <Col span={4} className='common-col-ul'>
                        <span className='common-span-ui'>{language.InvRecordCosttollCollector && language.InvRecordCosttollCollector.descripts}：</span>
                        <Select className='common-right-ui' allowClear value={this.state.userID} onChange={this.onChangeUserID} style={{ width: '150px' }}>{hBUser}</Select>
                    </Col>
                    <Col span={4} className='common-col-ul'>
                        <span className='common-span-ui'>{language.InvRecordCostpatNo && language.InvRecordCostpatNo.descripts}：</span>
                        <Input value={this.state.patID} onChange={this.onChangePatID} style={{ width: '150px' }} />
                    </Col>
                    <Col span={4} className='common-col-ul'>
                        <span className='common-span-ui'>{language.InvRecordCostadmReason && language.InvRecordCostadmReason.descripts}：</span>
                        <Select className='common-right-ui' allowClear placeholder={language.InvRecordCostadmReason && language.InvRecordCostadmReason.message} value={this.state.admReasonID} onChange={this.onChangeAdmReasonID} style={{ width: '150px' }}>{admReason}</Select>
                    </Col>
                    <Col span={4}><Button type="primary" onClick={this.handleQuery}>查询</Button></Col>
                </Card>

                <Card style={{ marginTop: 10 }} bodyStyle={{ padding: '10px' }}>
                    <Tabs defaultActiveKey="U">
                        <TabPane tab={language.InvRecordCostcost && language.InvRecordCostcost.descripts} key="U">
                            {/* <Table columns={this.InvRecordcolumns} dataSource={this.state.data} scroll={{ x: 1000 }} bordered></Table> */}
                            <Table
                                dataSource={this.state.data}
                                columns={this.state.InvRecordcolumns}
                                pagination={false}
                                scroll={{ x: 900, y: store.getState().tableHeight.y +90 }}
                                style={{ height: store.getState().tableHeight.y + 90+ 'px' }}
                                bordered
                            />

                        </TabPane>
                        <TabPane tab={language.InvRecordCostdeposit && language.InvRecordCostdeposit.descripts} key="I">
                            {/* <Table columns={this.Depositcolumns} dataSource={this.state.Topdata} scroll={{ x: 1000 }} bordered></Table> */}
                            <Table
                                dataSource={this.state.Topdata}
                                columns={this.state.Depositcolumns}
                                pagination={false}
                                scroll={{ x: 900, y: store.getState().tableHeight.y +90 }}
                                style={{ height: store.getState().tableHeight.y + 90+ 'px' }}
                                bordered
                            />
                        </TabPane>
                    </Tabs>
                </Card>
                <ColumnAuthoritysModel
                    clientWidth='900px'
                    compontName={this.state.ColumnAuthority}
                    configType="C"
                    onRef={this.onColumnRef}
                    reloadData={() => { this.tableList("InvRecordCost", this.state.ColumnAuthority) }}
                />
            </div>
        )
    }
}