/**
 * 全院排班
 */
import React from 'react';
import {
    Card, Table, Input, Form, Select, Row, Col, DatePicker, Button, Pagination,
    Popconfirm, Divider, Icon, message, Checkbox
} from 'antd';
import './style/index.less';

const FormItem = Form.Item;

class TotalScheduling extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            dataSource: []
        }
    }

    componentDidMount() {
        this.loadData(1);
        this.initData();
    }

    initData() {
        this.columns = [
            {
                title: '序号',
                dataIndex: 'name',
                key: 'index',
                width: 120,
                align: 'center',
                render: (text, data, index) => {
                    return <span>{index + 1}</span>
                }
            }, {
                title: '全选',
                dataIndex: 'descripts',
                width: 120,
                align: 'center',
                render: (text, data) => {
                    return <Checkbox />
                }
            }, {
                title: '科室',
                dataIndex: 'price',
                width: 120,
                align: 'center',
            },
        ]
    }

    loadData(page) {
        this.setState({
            dataSource: [{ id: '1', 'price': '神经科' }, { id: '2', 'price': '眼科' }, { id: '3', 'price': '耳鼻喉科' }]
        })
    }

    changePageSize(e) {
        this.setState({ pageSize: e }, () => {
            this.loadData(e);
        });
    }

    render() {
        let { getFieldDecorator } = this.props.form;
        let formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 }
        };

        let formItemCol = {
            labelCol: { span: 7 },
            wrapperCol: { span: 19 }
        };

        let searchColConfig = {
            xs: { span: 24 },
            sm: { span: 12 },
            md: { span: 11 },
            lg: { span: 8 }
        }

        let hospitalOption = []

        return (
            <div className='totalScheduling' style={{ background: '#F1F1F1' }}>
                <Card>
                    <Form>
                        <Row>
                            <Col {...searchColConfig}>
                                <FormItem {...formItemLayout} label="所属医院">
                                    {getFieldDecorator('hospital', {
                                        initialValue: this.state.hospital,
                                        rules: [{ required: true, message: '所属平台不能为空' }],
                                    })(
                                        <Select placeholder="请选择所属医院" style={{ width: '150px' }}
                                            getPopupContainer={triggerNode => triggerNode.parentNode}>
                                            {hospitalOption}
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>

                            <Col {...searchColConfig}>
                                <FormItem {...formItemLayout} label="坐诊类型">
                                    {getFieldDecorator('3', {
                                        initialValue: this.state.hospital,
                                        rules: [{ required: true, message: '坐诊类型不能为空' }],
                                    })(
                                        <Select placeholder="请选择坐诊类型" style={{ width: '150px' }}
                                            getPopupContainer={triggerNode => triggerNode.parentNode}>
                                            {hospitalOption}
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                            <Col {...searchColConfig}>
                                <FormItem {...formItemLayout} label="状态">
                                    {getFieldDecorator('2', {
                                        initialValue: this.state.hospital,
                                    })(
                                        <Select placeholder="请选择状态" style={{ width: '150px' }}
                                            getPopupContainer={triggerNode => triggerNode.parentNode}>
                                            {hospitalOption}
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                            <Col {...searchColConfig}>
                                <FormItem {...formItemLayout} label="排班周期">
                                    {getFieldDecorator('4', {
                                        initialValue: this.state.hospital,
                                        // rules: [{ required: true, message: '排班周期不能为空' }],
                                    })(
                                        <Select placeholder="请选择排班周期" style={{ width: '150px' }}
                                            getPopupContainer={triggerNode => triggerNode.parentNode}>
                                            {hospitalOption}
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>

                            <Col {...searchColConfig}>
                                <FormItem {...formItemLayout} label="科室">
                                    {getFieldDecorator('4', {
                                        initialValue: this.state.hospital,
                                        // rules: [{ required: true, message: '科室不能为空' }],
                                    })(
                                        <Select placeholder="请选择科室" style={{ width: '150px' }}
                                            getPopupContainer={triggerNode => triggerNode.parentNode}>
                                            {hospitalOption}
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                            <div className='searchSchedButton'>
                                <Button className='saveSchedSchButton'>查询</Button>
                                <Button className='saveSchedSchButton'>生成排版</Button>
                            </div>
                        </Row>
                    </Form>
                </Card>

                <Card style={{ marginTop: '10px' }}>
                    <Table columns={this.columns}
                        dataSource={this.state.dataSource}
                        loadData={this.loadData.bind(this)}
                        bordered
                        rowKey={(data) => {
                            return data.id
                        }}
                        title={() => {
                            return <div style={{ display: 'flex' }}>
                                <div className='headerBuild' style={{ display: 'flex' }}>
                                    <div className='grayBtn'></div><div style={{ marginLeft: '10px' }}>已生成</div>
                                </div>
                                <div className='headerUnBuild' style={{ display: 'flex' }}>
                                    <div className='whiteBtn'></div><div style={{ marginLeft: '10px' }}>未生成</div>
                                </div>
                                <div className='headerUpdate' style={{ display: 'flex' }}>
                                    <div className='redBtn'></div><div style={{ marginLeft: '10px' }}>待更新</div>
                                </div>
                            </div>
                        }}
                        pagination={false}
                        rowClassName={(record) => {
                            if (record.id == 1) {
                                return 'test-flag'
                            }
                        }}
                        >
                    </Table>
                    <Pagination
                        size="small"
                        showQuickJumper
                        showSizeChanger
                        defaultCurrent={1}
                        current={this.state.page}
                        total={this.state.total}
                        onChange={this.changePageSize.bind(this)}
                        style={{ textAlign: "right", marginTop: '13px' }}
                    />
                </Card>
            </div>
        )
    }
}

export default Form.create()(TotalScheduling);