//查询各个患者的药品费用，检查费用和药品费用所占的比例
import React from 'react';
import { Select, Input, Row, Col, Button, Spin, Divider, Popconfirm, message, Icon, Form, Modal, Card, Switch, DatePicker, Popover, List } from 'antd';

import {$http} from '../../../containers/config/https';
import '../../../assets/css/system.css';
import PubilcTablePagination from '../../common/PubilcTablePagination';
import store from '../../../store/index';
import moment from 'moment';

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

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

const formItemLayoutNumber = {
    labelCol: { span: 9 },
    wrapperCol: { span: 14 },
}

const FindMedicineBillMaintenance = Form.create()(
    class FindMedicineBillMaintenance extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                data: [],
                columns: [],
                total: 0,
                page: 1,
                pageSize: 10,
                baseParms: [],
                values: {},
            }
        }
        componentDidMount() {
            // 初始化设置table的高度以及表体的高度 内容高度 height 
            if (document.querySelector('.ant-table-body')) {
                document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y - 40 + 'px'
            }
            //this.getBaseParams();
        }
        //获取对应的药品费用，检查费用的基础信息数据
     
        setRowClassName = (record) => {
            return record.ID === this.state.rowId ? 'clickRowStyle' : '';
        }
        FindData = () => {
            const { propMethod: { findData } } = this.props;
            this.showModal(false);
            findData();
            this.reset();
        }
        // 页码改变的回调，参数是改变后的页码及每页条数
        PageChange = (page, pageSize) => {
            this.setState({ page: page, pageSize: pageSize }, () => {
                // 重新调用查询方法
                this.FindData()
            });
        }
        // 条数改变的回调
        onShowSizeChange = (current, size) => {
            this.setState({ page: current, pageSize: size }, () => {
                // 重新调用查询方法
                this.FindData()
            });
        }
        ImportData = () => {
            this.DataImport.DrawerShow()
        }
        handleSwithChange = (val) => {
        }
        handleStatus = (v) => {
        }
        reset = () => {
            this.props.form.resetFields();
        }

        // 显示分页总条数
        showTotal(total) {
            return `共 ${total} 条`;
        }
        showModal = (bool) => {
            const { propMethod: { showModal } } = this.props;
            showModal(bool);
            this.reset();
        }
        render() {
            const { modalVisible, data: params, propMethod } = this.props;
            const { getFieldDecorator } = this.props.form;
            const { baseParms,
                VillagesArr, } = this.state;

            return (
               <div></div>
            );
        }
    });

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

            headerHeight: 0,

            modalVisible: false,
            editData: {}
        };
        this.columns = [
            {
                key: 1,
                title: '病人id',
                dataIndex: 'id',
                align: "center",
                width: '20px'
            },
            {
                key: 2,
                title: '姓名',
                dataIndex: 'name',
                align: "center",
                width: '60px'
            },
            {
                key: 3,
                title: '药品费用',
                dataIndex: 'medicineMoney',
                align: "center",
                width: '60px',
            },
            {
                key: 4,
                title: '检查费用',
                dataIndex: 'checkMoney',
                align: "center",
                width: '60px',
            },
            {
                key: 5,
                title: '药品费用占比',
                dataIndex: 'par',
                align: "center",
                width: '60px',
            }
        ]

    }

    componentDidMount() {
        // 初始化列表数据
        this.handleQuery();

        // 组件加载完毕关闭loading
        this.setState({ showLoading: false });
    }

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

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

    }

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

    //控制模态框显示
    showModal = (bool) => {
        this.setState({ modalVisible: bool });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        // 组件所需参数
        const param = {
            // 表头配置
            columns: this.columns,
            // 表格数据
            data: this.state.tableData,
            // 数据总条数
            total: this.state.total,
            // 当前页数
            page: this.state.page,
            // 表格的宽度
            x: '100%',
            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='患者ID'>
                                    {getFieldDecorator('id', {

                                        rules: [{ false: false, message: '' }],
                                    })(
                                        <Input title="输入内容后可回车检索" placeholder="请输入( Enter )" onPressEnter={this.handleQuery} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={5} >
                                <FormItem {...formItemLayout} label='姓名'>
                                    {getFieldDecorator('name', {

                                        rules: [{ false: false, message: '' }],
                                    })(
                                        <Input title="输入内容后可回车检索" placeholder="请输入( Enter )" 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>
                        </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>
                <FindMedicineBillMaintenance data={this.state.editData} modalVisible={this.state.modalVisible} propMethod={{ showModal: this.showModal, findData: this.handleQuery }} />
            </Spin>
        )
    }
}
export default Form.create()(RoleMaintenance);