// 用户信息 医院人员
import React from 'react';
import { Select, Input, Row, Col, Button, Spin, Divider, Popconfirm, message, Icon, Tabs, Modal, Card } from 'antd';
import { $http } from 'containers/config/https';
import store from 'store';
import PubilcTablePagination from '../../common/PubilcTablePagination.jsx'; // 公共table组件

// 组件const
const { Option } = Select;
const { TabPane } = Tabs;

export default class UserListMan extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tableData1: [],
            // 表格数据总条数
            total1: 0,
            page1: 1,
            pageSize1: 10,
            tableData2: [],
            // 表格数据总条数
            total2: 0,
            page2: 1,
            pageSize2: 10,
            showLoading: true,
        };
        this.columns1 = [
            {
                key: 1,
                title: '类型',
                dataIndex: 'userCode',
                align: "center",
                width: 200,
                fixed: 'left',
            },
            {
                key: 2,
                title: '该类型用户数',
                dataIndex: 'userCode',
                align: "center",
                width: 200,
                fixed: 'left',
            },
        ]

        this.columns2 = [
            {
                key: 1,
                title: '工号',
                dataIndex: 'userCode',
                align: "center",
                width: 200,
                fixed: 'left',
            },
            {
                key: 2,
                title: '姓名',
                dataIndex: 'userDesc',
                align: "center",
                width: 200,
            },
            {
                key: 3,
                title: '性别',
                dataIndex: 'userSexDesc',
                align: "center",
                width: 200,
            },
            {
                key: 4,
                title: '手机号',
                dataIndex: 'userMobile',
                align: "center",
                width: 200,
            },
            {
                key: 5,
                title: '证件类型',
                dataIndex: 'userCredTypeDesc',
                align: "center",
                width: 200,
            },
            {
                key: 6,
                title: '证件号码',
                dataIndex: 'userCredNo',
                align: "center",
                width: 200,
            },
            {
                key: 7,
                title: '状态',
                dataIndex: 'userActive',
                align: "center",
                width: 200,
                // render(userActive) {
                //     let config = {
                //         'Y': '有效',
                //         'N': '失效'
                //     }
                //     return config[userActive];
                // }
            },
            {
                title: '操作',
                key: 8,
                align: "center",
                width: 100,
                fixed: 'right',
                render: (text, record) => (
                    <span>
                        <Icon type="edit" style={{ color: '#108EE9' }}></Icon>
                        <span className='span' onClick={() => this.handleCompile(record)}>编辑</span>
                        {/* 分割线 */}
                        {/* <Divider type="vertical" />
                        <Icon type="delete" style={{ color: 'rgba(240,65,52,1)' }}></Icon>
                        <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record)} >
                            <span className='span' style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
                        </Popconfirm> */}
                    </span>
                ),
            }
        ]
    }


    componentDidMount() {
        for (var i = 0; i < document.querySelectorAll("div.maxHeight div.ant-table-body").length; i++) {
            document.querySelectorAll("div.maxHeight div.ant-table-body")[i].style.height = store.getState().tableHeight.y - 85 + 'px';
        }


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

        // 数据加载成功关闭loading
        this.child1.handleLoading()
        // 数据加载成功关闭loading
        this.child2.handleLoading()
    }


    // 调用公共组件的连接事件
    onRef1 = (ref) => {
        this.child1 = ref
    }

    // 调用公共组件的连接事件
    onRef2 = (ref) => {
        this.child2 = ref
    }


    // 提供修改page和pageSize的回调函数
    compilePage(page, pageSize) {
        // 修改page，或者pageSize
        this.setState({ page1: page, pageSize1: pageSize }, () => {
            // 重新调用查询方法
            this.table1(this.state.defaultHos)  //获取医院列表
        })
    }


    render() {
        // 组件所需参数
        const param1 = {
            // 表头配置
            columns: this.columns1,
            // 表格数据
            data: this.state.tableData1,
            // 数据总条数
            total: this.state.total1,
            // 数据页数
            page: this.state.page1,
            // 表格的宽度
            x: 1600,
            y: store.getState().tableHeight.y - 182,
            height: store.getState().tableHeight.y - 137 + 'px',
            isComplete: 'Y',// 存任意值
        }

        // 组件所需参数
        const param2 = {
            // 表头配置
            columns: this.columns2,
            // 表格数据
            data: this.state.tableData2,
            // 数据总条数
            total: this.state.total2,
            // 数据页数
            page: this.state.page2,
            // 表格的宽度
            x: 1600,
            y: store.getState().tableHeight.y - 130,
            height: store.getState().tableHeight.y - 85 + 'px',
        }
        return (
            <div>
                <Row >
                    <Col span={24}>
                        <Col span={8}>
                            <Card title="人员类型" >
                                <div className="table-operations mB20">
                                    <Row >
                                        <Col span={16}>
                                            <Select allowClear value={this.state.active} onChange={this.onChangeActive} style={{ width: '100%' }} placeholder="请选择医院">

                                            </Select>
                                        </Col>
                                        <Col span={7} offset={1}>
                                            <Select allowClear value={this.state.active} onChange={this.onChangeActive} style={{ width: '100%' }} placeholder="请选择科室">

                                            </Select>
                                        </Col>

                                    </Row>
                                </div>
                                <div className='maxHeight'>
                                    <PubilcTablePagination param={param1} handelThis={this} onRef={this.onRef1} />
                                </div>
                            </Card>
                        </Col>
                        <Col span={16}>
                            <Card title="当前角色用户明细" >
                                <div className='maxHeight'>
                                    <PubilcTablePagination param={param2} handelThis={this} onRef={this.onRef2} />
                                </div>
                            </Card>
                        </Col>
                    </Col>
                </Row >
            </div >
        )
    }
}