/**
 * 
 * 科室视力评估
 */
import React from 'react';
import {
    Card, Table, Input, Form, Select, Col, Button
} from 'antd';
import { Util, dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import CommonPagination from 'components/pagination/index';
import RangeDatePicker from 'components/rangePicker/index';
import { PAGE_NUM_MORE_STATUS } from 'tools/statusConstants';
import moment from 'moment';
import store from 'store';
import './style/index.less';

const Option = Select.Option;

class OutPatientOfVideoTabPane extends React.Component {
    constructor(props) {
        super(props);
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        var recordData = JSON.parse(sessionStorage.getItem('patientData'));
        if (!recordData) {
            recordData = JSON.parse(sessionStorage.getItem('recordData'));
        }
        this.state = {
            dataSource: [],
            total: 0,
            page: 1,
            pageSize: 200,
            size: 'small',
            curPageDetail: PAGE_NUM_MORE_STATUS[0].code,
            recordData: recordData,
            userData: userData,
            receiveFlag: '1'
        }
        this.listener = null
    }

    componentDidMount() {
        this.loadData(1);
        this.initData();
        this.getDepartment()
        document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y + 80 + 'px';
    }

    getDepartment() {
        var params = {
            params: [{
                hospID: this.state.userData.hospID,
            }]
        }
        $http.post('urlS', this, {
            code: "03020046",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    this.setState({ departmentData: res.result.Data })
                }
            }
        })
    }

    initData() {
        let data = {
            params: [{
                compontName: "visionAssessment",
                type: "C",
                reactCode: ['visionAssessment']
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040073",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    var columns = res.result.C;
                    var dynColumns = []
                    for (var i = 0; i < columns.length; i++) {
                        dynColumns.push({
                            title: this.state.userData.language == 'EN' ? columns[i].enDescripts : columns[i].title,
                            dataIndex: columns[i].dataIndex,
                            width: parseInt(columns[i].width),
                            align: columns[i].align || 'center'
                        })
                    }
                    this.setState({
                        column: dynColumns,
                    })
                    this.props.hanlderThis.setState({
                        reload: false,
                    })
                }
            }
        })

    }

    loadData(page, pageSize, e, status) {
        var date = new Date();
        var params = {
            params: [{
                locID: this.state.locID,
                number: this.state.number,
                startDate: this.state.admDateFrom ? this.state.admDateFrom : moment(date).format(dayFormat),
                stopDate: this.state.admDateTo ? this.state.admDateTo : moment(date).format(dayFormat),
            }],
            pagination: [{
                pageSize: this.state.size == 'small' ? this.state.pageSize : PAGE_NUM_MORE_STATUS[0].code,
                currentPage: page
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050275",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.initData()
                    this.setState({
                        dataSource: res.result.data,
                        total: res.result.totalCount,
                        page: page,
                        search: e,
                    })
                }
            }
        });
    }

    searchPatientMsg(e) {
        if (e.keyCode == '13') {
            this.loadData(1)
        }
    }

    startChange(date) {
        this.setState({
            admDateFrom: date,
        }, () => {
            this.loadData(1)
        })
    }

    endChange(date) {
        this.setState({
            admDateTo: date,
        }, () => {
            this.loadData(1)
        })
    }

    //分页切换
    onChange(e) {
        this.setState({ page: e }, () => {
            this.loadData(e);
        });
    }

    //分页切换
    changePageSize(current, pageSize) {
        this.setState({ pageSize: pageSize, page: current }, () => {
            this.loadData(current, pageSize);
        });
    }

    onColumnRef = (ref) => {
        this.columnRef = ref;
    }

    render() {
        var date = new Date();
        //获取科室Department
        let departmentOption = [];
        this.state.departmentData && this.state.departmentData.map((item, index) => {
            departmentOption.push(<Option key={index} code={item.descriptsSPCode} name={item.descripts} value={item.id}>{item.descripts}</Option>)
        })
        return <div style={{ background: '#F5F7FE' }} className='outpatient-body'>
            <div>
                <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName="visionAssessment"
                    configType="C"
                    onRef={this.onColumnRef}
                    reloadData={this.initData}
                />
                <Card>
                    <Col span={6}>
                        <Input.Group style={{ display: 'flex' }}>
                            <div style={{ width: '30%' }}>
                                <Input className='express-input-disables' style={{ width: '100%' }}
                                    value={'日期：'} disabled />
                            </div>
                            <div>
                                <RangeDatePicker label={''} format='YYYY-MM-DD' width={'95%'}
                                    locale={this.state.userData.language} className='express-select-border'
                                    startDate={moment(date).format(dayFormat)} endDate={moment(date).format(dayFormat)}
                                    startChange={this.startChange.bind(this)} endChange={this.endChange.bind(this)} />
                            </div>
                        </Input.Group>
                    </Col>

                    <Col span={5}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'center' }}
                                value={'人员标识：'} disabled />
                            <Input onChange={Util.commonInputChange.bind(this, 'number')} value={this.state.number}
                                onKeyDown={this.searchPatientMsg.bind(this)}
                                placeholder={'病人ID/姓名/身份证号码/手机号码'} style={{ width: '69.9%' }} />
                        </Input.Group>
                    </Col>

                    <Col span={4} style={{ marginLeft: 10 }}>
                        <Input.Group>
                            <Input className='express-input-disable' style={{ width: '30%', textAlign: 'right' }} value={'科室：'} disabled />
                            <Select placeholder='请选择科室' style={{ width: '69.9%' }} className='express-select-border'
                                onChange={Util.handleSelectChange.bind(this, 'locID')} showSearch={true} value={this.state.locID}
                                allowClear={true} getPopupContainer={triggerNode => triggerNode.parentNode}
                                filterOption={(input, option) =>
                                    option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                {departmentOption}
                            </Select>

                        </Input.Group>
                    </Col>

                    <Col span={2} style={{ marginLeft: 10 }}>
                        <Button className='register-saveButton' type='primary' onClick={this.loadData.bind(this, 1, '', 'search')}>查询</Button>
                    </Col>
                </Card>
                <div style={{ marginTop: 10 }}>
                    <Table columns={this.state.column}
                        dataSource={this.state.dataSource}
                        loadData={this.loadData.bind(this)}
                        bordered
                        rowKey={(data) => {
                            return data.patAdmID
                        }}
                        scroll={{ y: store.getState().tableHeight.y + 80 + 'px' }}
                        onHeaderRow={column => {
                            return {
                                onDoubleClick: () => {
                                    this.columnRef.onOpenModel();
                                },
                            };
                        }}

                        pagination={false}>
                    </Table>
                    <CommonPagination current={this.state.page} total={this.state.total}
                        search={this.state.search} pageSize='200' size='large'
                        onShowSizeChange={this.changePageSize.bind(this)} complete={true} dataSource={this.state.dataSource}
                        onChange={this.onChange.bind(this)} />
                </div>
            </div>
            {/* </Modal> */}
        </div>
    }
}

export default Form.create()(OutPatientOfVideoTabPane);