/**
 * 转诊
 */
import React from 'react';
import { Modal, Table, Card, message } from 'antd';
import { Util, dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import moment from 'moment';
import '../style/index.less';

class ShowReferralModal extends React.Component {

    constructor(props) {
        super(props);
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        this.state = {
            userData: userData,
        }
    }

    componentDidMount() {
        this.initData()
        this.loadLocMessage()
    }

    initData() {
        this.leftColumns = [
            {
                title: '代码',
                dataIndex: 'code',
                width: 120,
                align: 'center'
            }, {
                title: '描述',
                dataIndex: 'descripts',
                width: 150,
                align: 'center'
            }
        ],
            this.rightColumns = [
                {
                    title: '医生姓名',
                    dataIndex: 'docName',
                    width: 120,
                    align: 'center'
                }, {
                    title: '科室名称',
                    dataIndex: 'locDescripts',
                    width: 120,
                    align: 'center'
                }, {
                    title: '医生状态',
                    dataIndex: 'onLineStatus',
                    width: 120,
                    align: 'center'
                }, {
                    title: '号别',
                    dataIndex: 'regTitle',
                    width: 120,
                    align: 'center'
                }, {
                    title: '挂号费',
                    dataIndex: 'price',
                    width: 120,
                    align: 'center',
                    render: (text, data) => {
                        return <span style={{ color: '#00C197' }}>{data.price}{'元/次'}</span>
                    }
                }, {
                    title: '已用号源/总号源',
                    dataIndex: 'registedNum',
                    width: 180,
                    align: 'center',
                    render: (text, data) => {
                        return <span style={{ color: '#007AFF' }}>{data.registedNum}/{data.registNum}</span>
                    }
                },
            ]
    }

    loadLocMessage() {
        var params = {
            params: [{}]
        }
        $http.post('urlDeault', this, {
            code: "03040005",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        leftLocData: res.result.Data,
                        rowId: !Util.isEmpty(res.result.Data) ? res.result.Data[0].id : ''
                    }, () => {
                        this.loadData()
                    })
                }
            }
        });
    }

    //03040002
    loadData() {
        var date = new Date()
        var params = {
            params: [{
                locID: this.state.rowId,
                date: moment(date).format(dayFormat)
            }]
        }
        $http.post('urlDeault', this, {
            code: "03040044",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        dataSource: res.result.data,
                    })
                }
            }
        });
    }


    closeModal(name) {
        let { onHide } = this.props;
        onHide && onHide();
    }

    onSubmit() {
        var { onSubmit } = this.props;
        if (Util.isEmpty(this.state.resDetailID)) {
            message.error('请选择排班医生')
            return
        }
        onSubmit && onSubmit(this.state.source)
    }

    //点击行，渲染当前行样式
    onClickRow = (record) => {
        return {
            onClick: () => {
                this.setState({
                    rowId: record.id,
                    resDetailID: undefined,
                    source: {}
                }, () => [
                    this.loadData()
                ])
            },
        };
    }

    onRightClickRow = (record) => {
        return {
            onClick: () => {
                this.setState({
                    resDetailID: record.resDetailID,
                    source: record
                })
            },
        };
    }

    //点击行，渲染当前行样式 
    setRowClassName = (record) => {
        return record.id === this.state.rowId ? 'clickRowStyle' : '';
    }
    //点击行，渲染当前行样式 
    setRightRowClassName = (record) => {
        return record.resDetailID === this.state.resDetailID ? 'clickRowStyle' : '';
    }

    render() {
        // modal 是否弹框标记
        return <div>
            <Modal
                className="out-component-modal"
                width="1500px"
                title={'转诊'}
                maskClosable={false}
                visible={this.props.isShow}
                onCancel={this.closeModal.bind(this)}
                onOk={this.onSubmit.bind(this)}
            >
                <div style={{ width: '100%', height: '100%', background: '#F5F7FE' }}>
                    <Card title='科室列表' style={{ float: 'left', width: '25%', height: '60vh' }}>
                        <Table columns={this.leftColumns}
                            dataSource={this.state.leftLocData}
                            onRow={this.onClickRow} bordered
                            rowClassName={this.setRowClassName}
                            scroll={{ y: '60vh' }}
                            rowKey={(data) => {
                                return data.id
                            }}

                            pagination={false}>
                        </Table>
                    </Card>
                    <Card title='医生排班列表' style={{ float: 'right', width: '74.5%', height: '60vh' }}>
                        <Table columns={this.rightColumns}
                            dataSource={this.state.dataSource}
                            onRow={this.onRightClickRow} bordered
                            rowClassName={this.setRightRowClassName}
                            scroll={{ y: '60vh' }}
                            rowKey={(data) => {
                                return data.resDetailID
                            }}

                            pagination={false}>
                        </Table>
                    </Card>
                </div>
            </Modal></div>
    }
}

export default ShowReferralModal;