// 用户信息 角色
import React from 'react';
import { Select, Row, Col, Icon, Table, Card } from 'antd';
import { $http } from 'containers/config/https';
import store from 'store';
import PubilcTablePagination from '../../common/PubilcTablePagination.jsx'; // 公共table组件
import CommonPagination from 'components/pagination/index';

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

export default class UserListGroup 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,
            defaultHos: JSON.parse(window.sessionStorage.userData).hospID,   // 医院
            hospitalData: [], // 医院集合
            deptDrData: [], // 科室集合
            groupData: [], // 角色集合
            hospID: JSON.parse(window.sessionStorage.userData).hospID,   // 医院id
            userID: '',   //用户id
            locId: '',   //科室id
            locVal: '',   //科室name
            groupId: '',   //角色id
            groupVal: '',   //角色groupVal
            userSearch: {},  // 用户信息
        };

        this.columns1 = [
            {
                key: 1,
                title: '角色名称',
                dataIndex: 'descripts',
                align: "center",
                width: 200,
            },
            {
                key: 2,
                title: '关联岗位',
                dataIndex: 'postDesc',
                align: "center",
                width: 200,
            },
            {
                key: 3,
                title: '有效用户',
                dataIndex: 'userNum',
                align: "center",
                width: 200,
            },
        ];

        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.props.onRef(this)
        this.setState({
            userSearch: this.props.userSearch || {}
        }, () => {
            // 医院列表加载
            this.searachHospDr()
            // 角色列表加载
            this.searachGroup()
            this.LocData()  //获取科室列表
            this.table1()  //获取医院列表
            this.table2()  //获取医院列表

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

    handleCompile = (record) => {
        this.props.handelThis.handleCompile(record);
    }

    handleDelete = (record) => {
        this.props.handelThis.handleDelete(record);
    }

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

    // 医院列表加载
    searachHospDr = () => {
        let user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        var data = {
            params: [{
                hospID: '', // 医院id
                logonGroupID: user.groupID, //登录角色id
                logonHospID: user.hospID, // 登录医院id
            }]
        }

        $http.post('urlS', this, {
            code: "01040001",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        hospitalData: res.depDoctor, //  医院列表
                    })
                }
            }
        });
    }

    // 医院切换
    hospDrChange = (e) => {
        this.setState({
            defaultHos: e, //  医院列表
            locId: '', //清空下拉框
        }, () => {

            if (!e) {
                return false
            }
            this.table1()  //获取角色列表
            this.LocData()  //获取科室列表
        })
    }

    // 科室数据
    LocData = (e) => {
        let data = {
            "params": [{
                hospID: this.state.defaultHos || '',
            }]
        };
        $http.post('urlDeault', this, {
            code: "04020008",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        deptDrData: res.result.Data, // 科室集合
                    })
                }
            }
        });
    }

    // 角色列表加载
    searachGroup = () => {
        let data = {
            "params": [
                {
                    code: '',
                }
            ]
        };
        $http.post('urlS', this, {
            code: "01040038",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        groupData: res.result, // 角色列表
                    })
                }
            }
        });
    }

    // 科室切换
    locIdChange = (e) => {
        this.setState({
            locId: e, //  医院列表
            page2: 1
        }, () => {
            this.table2()  //获取角色列表
        })
    }

    // 角色切换
    groupValChange = (e) => {
        this.setState({
            groupVal: e, //  医院列表
        }, () => {
            this.table1()  //获取角色列表
        })
    }

    //获取医院列表
    table1 = () => {
        let { page1, pageSize1, defaultHos, groupVal } = this.state;

        var data = {
            params: [{
                searchCode: groupVal,
                active: '',
                hospID: defaultHos || '', // 医院id

            }],
            pagination: [{
                pageSize: pageSize1,
                currentPage: page1,
            }]
        }

        $http.post('urlS', this, {
            code: "01040110",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    for (var i = 0; i < res.result.data.length; i++) {
                        res.result.data[i].key = i;
                    }
                    this.setState({
                        tableData1: res.result.data,
                        total1: res.result.totalCount,
                    })
                } else {
                    this.setState({
                        tableData1: [],
                        total1: 0,
                    })
                }
            }
        });
    }

    //获取医院列表
    table2 = (userSearch) => {

        if (userSearch) {
            this.setState({
                userSearch: userSearch
            }, () => {
                this.table2Query()
            })
        } else {
            this.table2Query()
        }
    }

    table2Query = () => {
        let { page2, pageSize2, userSearch } = this.state;
        userSearch.locID = this.state.locId
        userSearch.hospID = this.state.hospID
        userSearch.groupID = this.state.groupId

        let data = {
            params: [userSearch],
            pagination: [{
                pageSize: pageSize2,
                currentPage: page2,
            }]
        }

        $http.post('urlS', this, {
            code: "01040107",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    for (var i = 0; i < res.result.data.length; i++) {
                        res.result.data[i].key = i;
                    }
                    this.setState({
                        tableData2: res.result.data,
                        total2: res.result.totalCount,
                    })
                } else {
                    this.setState({
                        tableData2: [],
                        total2: 0,
                    })
                }
            }
        });
    }

    // 操作行
    onClickRowPublic1 = (record) => {
        return {
            // 单击行选中
            onClick: () => {
                this.setState({
                    groupId: record.id,
                    page2: 1,
                }, () => {
                    this.table2()
                })
            },
        }
    }

    // 选中行操作
    setRowClassNamePublic1 = (record) => {
        return record.id === this.state.groupId ? 'clickRowStyle' : '';
    }

    // 操作行
    onClickRowPublic2 = (record) => {
        this.setState({
            userID: record.userID,
        })
    }

    // 选中行操作
    setRowClassNamePublic2 = (record) => {
        return record.userID === this.state.userID ? 'clickRowStyle' : '';
    }

    // 页码改变的回调，参数是改变后的页码及每页条
    onChange2 = (page, pageSize) => {
        this.setState({ page2: page, pageSize2: pageSize }, () => {
            // 重新调用查询方法
            this.table2()
        })
    }

    // 条数改变的回调
    onShowSizeChange2 = (current, size) => {
        this.setState({ page2: 1, pageSize2: size }, () => {
            // 重新调用查询方法
            this.table2()
        })

    }

    // 提供修改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: 600,
            y: store.getState().tableHeight.y - 182,
            height: store.getState().tableHeight.y - 137 + 'px',
            isOnRow: true,
            rowClassName: true,
            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={8}>
                                            <Select showSearch allowClear optionFilterProp="title1" onChange={(event) => { this.hospDrChange(event) }} style={{ width: '100%' }} placeholder="请选择医院" value={this.state.defaultHos} >
                                                {this.state.hospitalData.map(item => <Option title={item.descripts} title1={item.descripts + '^' + item.descriptsSPCode} key={item.id} value={item.id}  >{item.descripts}</Option>)}
                                            </Select>
                                        </Col>
                                        <Col span={7} offset={1}>
                                            <Select showSearch allowClear placeholder="请选择科室" value={this.state.locId} onChange={(event) => { this.locIdChange(event) }} style={{ width: '100%' }} optionFilterProp="title1" >
                                                {this.state.deptDrData.map(item => <Option title={item.descripts} title1={item.descripts + '^' + item.descriptsSPCode} key={item.id} value={item.id}  >{item.descripts}</Option>)}
                                            </Select>
                                        </Col>
                                        <Col span={7} offset={1}>
                                            <Select showSearch allowClear placeholder="请选择角色" optionFilterProp="title1" value={this.state.groupVal} style={{ width: '100%' }} onChange={(event) => { this.groupValChange(event) }} >
                                                {this.state.groupData.map(item => <Option title={item.descripts} title1={item.descripts + '^' + item.descriptsSPCode} key={item.id} value={item.descripts}  >{item.descripts}</Option>)}
                                            </Select>
                                        </Col>
                                    </Row>
                                </div>
                                <div className='maxHeight'>
                                    <PubilcTablePagination param={param1} handelThis={this} onRef={this.onRef1}
                                        onClickRowPublic={this.onClickRowPublic1}
                                        setRowClassNamePublic={this.setRowClassNamePublic1} />
                                </div>
                            </Card>
                        </Col>
                        <Col span={16}>
                            <Card title="当前角色用户明细" >
                                <Table
                                    className='maxHeight'
                                    pagination={false}
                                    bordered
                                    scroll={{ x: param2.x, y: param2.y, }}
                                    columns={param2.columns}
                                    dataSource={param2.data}
                                    style={{ height: param2.height, }}
                                    onRow={(record) => {
                                        return {
                                            onClick: (event) => {
                                                this.onClickRowPublic2(record)
                                            },
                                        };
                                    }}
                                    rowClassName={(record) => this.setRowClassNamePublic2(record)}

                                />
                                <CommonPagination size="small" current={param2.page} total={param2.total} search='search'
                                    onShowSizeChange={this.onShowSizeChange2.bind(this)} complete={true} dataSource={param2.data}
                                    onChange={this.onChange2.bind(this)} />
                            </Card>
                        </Col>
                    </Col>
                </Row>
            </div>
        )
    }
}