// 卫统上报
import React from 'react';
import { Select, Input, Row, Col, Button, Spin, Icon, Form, DatePicker, message } from 'antd';
import { $http } from '../../containers/config/https';
import '../../assets/css/system.css';
import PubilcTablePagination from '../common/PubilcTablePagination.jsx';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import moment from 'moment';

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

const formItemLayout = {
    labelCol: { span: 10 },
    wrapperCol: { span: 14 },
}
class HealthStatistics extends React.Component {
    constructor() {
        super();
        this.state = {
            tableData: [],      // 表格数据          
            total: 0,           // 表格数据总条数
            column: [],         // 表头
            showLoading: true,
            page: 1,
            pageSize: 20,
            headerHeight: 0,
            modalVisible: false,
            editData: {}
        };
    }

    componentDidMount() {
        // 初始化列表数据
        this.handleQuery();
        this.getColumn();
        // 组件加载完毕关闭loading
        this.setState({ showLoading: false });
    }

    // 获取表头信息
    getColumn = () => {
        let data = {
            params: [{
                compontName: "HealthStatistics",
                type: "C",
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040073",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    let column = res.result && res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).map(item => {
                        return {
                            align: item.align,
                            widthNum: parseInt(item.width),
                            width: item.width,
                            dataIndex: item.dataIndex,
                            title: <div onDoubleClick={() => this.columnRef.onOpenModel()}>{item.title}</div>,
                            display: item.display,
                            key: item.seqNo
                        }
                    }) : '';
                    this.setState({ column })
                }
            }
        })
    }
    // 调用子组件的连接事件
    onRef = (ref) => {
        this.child = ref
    }

    // 提供修改page和pageSize的回调函数
    compilePage(page, pageSize) {
        // 修改page，或者pageSize
        this.setState({ page: page, pageSize: pageSize }, () => {
            // 重新调用查询方法
            let { status, name, quarters } = this.state;
            this.getTableData(name, status, quarters);
        })
    }

    // 请求列表数据
    getTableData() {
        let { page, pageSize } = this.state;
        let data = {};
        this.props.form.validateFields((error, values) => {
            if (error) {
                return;
            }
            data = {
                params: [{
                    startDate: values.startDate ? moment(values.startDate).format("YYYY-MM-DD") : '',
                    endDate: values.endDate ? moment(values.endDate).format("YYYY-MM-DD") : '',
                    patName: values.patName,
                    patID: value.patID
                }],
                pagination: [{
                    pageSize: pageSize,
                    currentPage: page,
                    sortColumn: "",
                    sortOrder: ""
                }]
            };
            $http.post('urlS', this, {
                code: "99110002",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0 && res.result) {
                        this.setState({ tableData: res.result.data, total: res.result.total }, () => {
                            // 数据加载成功关闭loading
                            this.child.handleLoading()
                        })
                    } else {
                        this.setState({ tableData: [], total: 0 }, () => {
                            // 数据加载成功关闭loading
                            this.child.handleLoading();
                        })
                    }
                },
                error: function () {
                    this.setState({ tableData: [], total: 0 }, () => {
                        // 数据加载成功关闭loading
                        this.child.handleLoading();
                    })
                }
            });
        });

    }

    // 查询
    handleQuery = () => {
        this.setState({ page: 1, pageSize: 20 }, () => {
            this.getTableData();
        })
    }

    // 导出到医院本地
    handleExport = () => {
        
    }

    onColumnRef = (ref) => {
        this.columnRef = ref;
    }
    // 获取主列表columns
    getMainTableColumns = () => {
        let data = {
            params: [{
                compontName: 'HealthStatistics', // 接口服务
                type: 'C',
            }]
        }
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        // 组件所需参数
        const param = {
            // 表头配置
            columns: this.state.column,
            // 表格数据
            data: this.state.tableData,
            // 数据总条数
            total: this.state.total,
            // 当前页数
            page: this.state.page,
            // 表格的宽度
            x: '100%',
        }
        const statusArr = [
            {
                id: '',
                descripts: '全部',
                descriptsSPCode: 'QB',
            }, {
                id: '1',
                descripts: '可用',
                descriptsSPCode: 'KY',
            }, {
                id: '0',
                descripts: '不可用',
                descriptsSPCode: 'BKY',
            }];
        let statusoP = []
        statusArr && statusArr.map(item => {
            statusoP.push(<Option key={item.id} role={item.descripts + '^' + item.descriptsSPCode} title={item.descripts} value={String(item.id)}>{item.descripts}</Option>)
        });
        return (
            <Spin tip="加载中..." spinning={this.state.showLoading}>
                <div style={{ overflow: 'hidden' }}>
                    <Form>
                        <Row style={{ margin: '23px 0 0 0' }}>
                            <Col span={4} >
                                <FormItem label='开始日期' {...formItemLayout}>
                                    {getFieldDecorator('startDate', {
                                        initialValue: moment(),
                                    })(
                                        <DatePicker style={{ width: '100%' }} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={4} >
                                <FormItem label='结束日期' {...formItemLayout}>
                                    {getFieldDecorator('endDate', {
                                        initialValue: moment(),
                                    })(
                                        <DatePicker style={{ width: '100%' }} />
                                    )}
                                </FormItem>
                            </Col >
                            <Col span={4} >
                                <FormItem {...formItemLayout} label='患者姓名'>
                                    {getFieldDecorator('patName', {
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Input title="输入内容后可回车检索" placeholder="请输入( Enter )" onPressEnter={this.handleQuery} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={4} >
                                <FormItem {...formItemLayout} label='患者id'>
                                    {getFieldDecorator('patID', {
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Input title="输入内容后可回车检索" placeholder="请输入( Enter )" onPressEnter={this.handleQuery} />
                                    )}
                                </FormItem>
                            </Col>

                            <Col offset={2} span={2}>
                                <Button onClick={this.handleQuery} style={{ margin: '4px 15px 20px 0', background: 'rgba(255,255,255,1)' }}>查询</Button>
                            </Col>
                            <Col span={2}>
                                <Button onClick={this.handleExport} style={{ background: 'rgba(247,128,93,1)', color: '#fff', margin: '4px 0 0 0' }}>导出</Button>
                            </Col>
                        </Row>
                    </Form>
                </div>
                <div style={{ width: '100%', height: '10px', background: '#f0f2f5' }}></div>
                <div style={{ padding: '24px 0 0 0' }} className="table-body-height">
                    {/* handelThis将夫组件的属性与方法给子组件访问 */}
                    <PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} />
                </div>
                <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName='HealthStatistics'
                    configType="C"
                    onRef={this.onColumnRef}
                    reloadData={this.getMainTableColumns}
                />
            </Spin>
        )
    }
}
export default Form.create()(HealthStatistics);
