//标本容器
import React from 'react';
import { Select, Input, Row, Col, Button, Spin,  Form,  } from 'antd';
import { $http } from '../../../containers/config/https';
import '../../../assets/css/system.css'
import PubilcTablePagination from '../../common/PubilcTablePagination.jsx';
import store from './../../../store/index';


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

const formItemLayout = {
    labelCol: { span: 10 },
    wrapperCol: { span: 14 },
}





class RoleMaintenance extends React.Component {
    constructor() {
        super();
        this.state = {
            // 角色名称
            name: undefined,
            // 关联岗位
            quarters: undefined,
            // 记录状态
            status: undefined,
            // 表格数据
            tableData: [],
            // 表格数据总条数
            total: 0,
            showLoading: true,
            page: 1,
            pageSize: 10,
            selectData: {}, // 下拉框数据
            headerHeight: 0,

            modalVisible: false,
            editData: {}
        };
        this.columns = [
            {
                key: 1,
                title: '病人Id',
                dataIndex: 'id',
                align: "center",
                width: '10%'
            },
            {
                key: 2,
                title: '姓名',
                dataIndex: 'name',
                align: "center",
                width: '10%'
            },
            {
                key: 3,
                title: '药品费',
                dataIndex: 'drugFee',
                align: "center",
                width: '15%'
            },
            {
                key: 4,
                title: '检查费',
                dataIndex: 'inspectionFee',
                align: "center",
                width: '10%',
            },
            {
                key: 5,
                title: '比例',
                dataIndex: 'proportion',
                align: "center",
                width: '10%'
            }  
        ]

    }

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

    componentWillUnmount() {
        // 组件销毁前将静止让setState修改state的状态
        this.setState = (state, callback) => { return; }
    }

    // 角色管理下拉框数据
    getSelectData() {
        let data = {
            params: []
        }
        $http.post('urlS', this, {
            code: "01040013",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({ selectData: res })
                } else {
                    this.setState({ selectData: {} })
                }
            }
        })
    }

    // 调用子组件的连接事件
    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: [{
                    Name: values.name ? values.name : '',
                    Id: values.id ? values.id :''
                }],
                pagination: [{
                    pageSize: pageSize,
                    currentPage: page,
                    sortColumn: "",
                    sortOrder: ""
                }]
            };
            $http.post('urlS', this, {
                code:"03060142",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0 && res.result) {
                        this.setState({ tableData: res.result.Data, total: res.result.TotalCount }, () => {
                            // 数据加载成功关闭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: 7 }, () => {
            this.getTableData();
        })
    }

  


    render() {
        const { getFieldDecorator } = this.props.form;
        // 组件所需参数
        const param = {
            // 表头配置
            columns: this.columns,
            // 表格数据
            data: this.state.tableData,
            // 数据总条数
            total: this.state.total,
            // 当前页数
            page: this.state.page,
            // 表格的宽度
            x: '115%',
            y: store.getState().tableHeight.y + 81 - this.state.headerHeight,
            height: store.getState().tableHeight.y + 50 - this.state.headerHeight + 'px',
        }
        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>
                    <Form>
                        <Row style={{ margin: '23px 0 0 0' }}>
                            <Col span={5} >
                                <FormItem {...formItemLayout} label='姓名'>
                                    {getFieldDecorator('name', {
                                        //initialValue: params && params.healBureauID ? String(params.healBureauID) : undefined,
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Input title="输入内容后可回车检索" placeholder="请输入姓名" onPressEnter={this.handleQuery} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={5} >
                                <FormItem {...formItemLayout} label='病人id'>
                                    {getFieldDecorator('id', {
                                        //initialValue: params && params.healBureauID ? String(params.healBureauID) : undefined,
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Input title="输入内容后可回车检索" placeholder="请输入病人id" onPressEnter={this.handleQuery} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={2}>
                                <Button onClick={this.handleQuery} style={{ margin: '4px 15px 20px 0', background: 'rgba(255,255,255,1)' }}>查询</Button>
                            </Col>
                            <Col span={7}>
                            </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>
              
            </Spin>
        )
    }
}
export default Form.create()(RoleMaintenance);