//预诊分级左边列表
import React from 'react';
import { Row, Col, Select, List, Input, Radio, Icon, DatePicker, Button, Form, Pagination } from 'antd';
import { $http } from '../../../containers/config/https';
import store from 'store';
import moment from 'moment';
import './index.less';
import CommonPagination from 'components/pagination/index';
import CommonRangePicker from 'components/rangePicker/index';


const { Option } = Select;
const FormItem = Form.Item;
let user;

const formItemLayout = {    // label 和input宽度
    labelCol: { span: 7 },
    wrapperCol: { span: 17 },
};
const formItemSwitch = {    // label 和input宽度
    labelCol: { span: 15 },
    wrapperCol: { span: 8 },
};
const ConsultationProcessleft = Form.create()(
    class extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                status: '',
                stopDate: '',
                startDate: '',
                loading: true,//表格loading
                searchInputLo: '',
                total: 0,// 分页数据
                page: 1,
                pageSize: 10,
                data: [],
                rowId: "",//表格行id 设置颜色
                consultID: '',
                itemDataID: '',
                btnStatus: '',
                //  显示隐藏
                isShow: true,
                // value:'',
                place: [],//按钮
                ifReg: [],//未挂号
                area: '',
                RegisteredFlag: ''

            };
            user= window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};

        }

        componentDidMount() {
            this.loadDataButton();
            this.handleQuery();
            this.props.onRef(this);

        }
        componentWillUnmount() {
            this.setState = (state, callback) => {
                return
            }
        }
        searchInputLo = (e) => {
            this.setState({ searchInputLo: e.target.value })
        }
        //查询
        handleQuery = () => {
            let startDate = this.props.form.getFieldValue('startDate');
            let stopDate = this.props.form.getFieldValue('stopDate');
            let { page, pageSize } = this.state;
            let data = {
                params: [{
                    stDate: startDate ? moment(startDate).format('YYYY-MM-DD') : '',
                    endDate: stopDate ? moment(stopDate).format('YYYY-MM-DD') : '',
                    areaID: this.state.area,
                    registeredFlag: this.state.RegisteredFlag,
                    patNo: this.state.searchInputLo,
                }],
                pagination: [{
                    pageSize: pageSize,
                    currentPage: page,
                }]
            }
            $http.post('urlS', this, {
                code: "04140011",
                data: data,
                success: function (res) {
                    //console.log(res);
                    if (+res.errorCode === 0) {
                        this.setState({ itemDataID: "", data: res.result.Data, total: res.result.TotalCount, loading: false })
                    }
                }
            })
        }
        //按钮显示数据
        loadDataButton = () => {
            let data = {
                params: [{

                }]
            }
            $http.post('urlS', this, {
                code: "04140001",
                data: data,
                success: (res) => {
                    if (+res.errorCode === 0) {
                        this.setState({
                            place: res.place,
                            ifReg: res.ifReg,
                        })
                    }
                }
            })
        }


        //点击行，渲染当前行样式
        onClickRow = (record) => {
            //this.props.handThis(record);
            //console.log(record);
            this.state.data.map((item) => {
                if (item.id === record.id) {
                    this.props.callBackLeft(item)
                    return false;
                }
            })


        }

        //设置点击row颜色 --左侧表格
        setRowClassName = (record) => {
            return record.id === this.state.itemDataID ? 'clickRowStyle' : '';
        }

        // 翻页
        onChange = (page, pageSize) => {
            this.setState({ page: page, pageSize: pageSize }, () => {
                // 重新调用查询方法
                this.handleQuery();
            });
        };

        onShowSizeChange = (current, size) => {
            this.setState({ page: current, pageSize: size }, () => {
                // 重新调用查询方法
                this.onChange(current, size);
            })
        };
        // 显示分页总条数
        showTotal(total) {
            return `共 ${total} 条`;
        }

        // 显示隐藏
        handleIsShow = () => {
            this.setState({
                isShow: !this.state.isShow
            })
        }
        //单选点击事件
        // onChange = e => {
        //     //console.log('radio checked', e.target.value);
        //     this.setState({
        //       value: e.target.value,
        //     });
        //   };
        handlearea = (type) => {
            this.setState({ area: type })
        }
        handleRegisteredFlag = (e) => {
            this.setState({ RegisteredFlag: e })
        }
        render() {
            const { getFieldDecorator } = this.props.form;
            return (

                <div className='PreliminaryLeft'>
                    <Form>
                        <Row>
                            <Col>
                                <Row style={{ width: "100%", paddingLeft: "8px", height: '50px', backgroundColor: '#11b982', lineHeight: '50px' }}>
                                    <Col span={10}>
                                        <span>患者列表</span>
                                    </Col>
                                    <Col span={5} offset={9}>
                                        <Icon type="double-left" onClick={this.handleIsShow}>显示隐藏</Icon>
                                    </Col>
                                </Row>
                                <div style={{ display: (this.state.isShow ? "block" : "none") }}>
                                    <Row style={{ width: "100%", paddingTop: "8px", marginLeft: '6px' }}>
                                        <Radio.Group>
                                            {
                                                this.state.ifReg && this.state.ifReg.map((item, key) => {
                                                    return (
                                                        <Radio onClick={this.handleRegisteredFlag.bind(this, item.value)} value={item.value} key={item.id} style={{ marginTop: '10px', marginLeft: '60px' }}>{item.descripts}</Radio>
                                                    )
                                                })
                                            }
                                        </Radio.Group>
                                    </Row>
                                    <Row style={{ width: "100%", paddingTop: "8px", marginLeft: '6px' }}>

                                        {/*  */}
                                        <Radio.Group style={{ padding: '0 24px' }}>
                                            {
                                                this.state.place && this.state.place.map((item, key) => {
                                                    return (
                                                        <Radio.Button onClick={this.handlearea.bind(this, item.id)} value={item.id} key={item.id} style={{ marginTop: '10px', color: '#FFF', backgroundColor: item.value }}>{item.descripts}</Radio.Button>
                                                    )
                                                })
                                            }
                                        </Radio.Group>
                                    </Row>
                                    <Row style={{ width: "100%", paddingTop: "8px", marginLeft: '6px' }}>
                                        <Col className="startDate">
                                            <FormItem {...formItemLayout} label="开始日期">
                                                {getFieldDecorator('startDate', {
                                                    initialValue: moment(moment().format(this.state.handleStartDate), 'YYYY-MM-DD'),
                                                    rules: [{ required: true }]
                                                })(
                                                    <DatePicker disabledDate={(curDate) => {
                                                        return curDate && curDate > moment().endOf('day');
                                                    }} />
                                                )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row style={{ width: "100%", paddingTop: "8px", marginLeft: '6px' }}>
                                        <Col className="stopDate">
                                            <FormItem {...formItemLayout} label="结束日期">
                                                {getFieldDecorator('stopDate', {
                                                    initialValue: moment(moment().format(this.state.handleStopDate), 'YYYY-MM-DD'),
                                                    rules: [{ required: true }]
                                                })(
                                                    <DatePicker disabledDate={(curDate) => {
                                                        return curDate && curDate < moment().endOf('day');
                                                    }} />
                                                )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row style={{ width: "100%", paddingTop: "8px", paddingLeft: "16px" }}>
                                        <Input
                                            placeholder="登记号"
                                            style={{ width: "65%" }}
                                            onChange={this.searchInputLo}
                                        />
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <Button type="primary" onClick={this.handleQuery}>查询</Button>
                                    </Row>

                                </div>


                            </Col>
                        </Row>
                    </Form>
                    <Row style={{ height: "100%", margin: '6px 15px', borderTop: '1px solid #e8e8e8' }}>
                        <List
                            itemLayout="vertical"
                            size="large"
                            pagination={false}
                            className="aaaaaa"
                            dataSource={this.state.data}
                            footer={
                                <div>

                                </div>
                            }
                            renderItem={item => (
                                <List.Item
                                    key={item.id}
                                    onClick={() => { this.onClickRow(item); this.setState({ itemDataID: item.id }) }}
                                    className={this.setRowClassName(item)}
                                >
                                    <Row className="listcenter">
                                        <div className="listTitle">
                                            <b>{item.patName}</b>
                                            <b style={{ float: 'right' }}>{item.patSexDesc}/{item.patAge}</b></div>
                                        <div style={{ margin: '5px 0' }}>
                                            <span>{item.patNo}</span>
                                            <span style={{ float: 'right' }}>{item.level}</span>
                                        </div>
                                    </Row>
                                </List.Item>
                            )}
                        />

                    </Row>
                    <div>
                        <CommonPagination
                            size='small'
                            current={this.state.page}
                            total={this.state.total}
                            search='search'
                            onShowSizeChange={this.onShowSizeChange.bind(this)}
                            complete={true}
                            dataSource={this.state.data}
                            onChange={this.onChange.bind(this)}
                            scroll={{ y: store.getState().tableHeight.y + 'px' }}
                        />
                        {/* <Pagination
                        showTotal={() => this.showTotal(this.state.total)}
                        size="small"
                        showQuickJumper
                        showSizeChanger
                        defaultCurrent={1}
                        defaultPageSize={10}
                        current={this.state.page}
                        total={this.state.total}
                        onChange={this.handleOnChange}
                        onShowSizeChange={this.handleOnChange}
                        style={{ textAlign: "right", marginTop: '13px' }}
                    />  */}
                    </div>
                </div>
            )
        }
    }
);
export default ConsultationProcessleft;