// 人员分组
import React from 'react';
import { Select, Input, Row, Col, Button, Spin, Divider, Popconfirm, message, Icon, Modal } from 'antd';
import { $http } from '../../containers/config/https';
import PubilcTablePagination from '../common/PubilcTablePagination.jsx'; // 公共table组件
import PersGroupingModalFrom from './component/PersGroupingModal'   //添加分组
import MembeModal from './component/MembeModal'   //组员管理
import MedicalOASetModalFrom from './component/MedicalOASetModal'   //医嘱权限设置
import MedGroupBedModal from './component/MedGroupBedModal'   //病区床位管理



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

export default class PersAudit extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visibleGroup: false,
            visibleMembe: false,
            visibleMemOAS: false,
            visibleMedBed: false,
            // 表格数据
            tableData: [],
            // 表格数据总条数
            total: 0,
            showLoading: true,
            page: 1,
            pageSize: 10,
            hospitalData: [], // 医院集合
            deptDrData: [], // 科室集合
            deptGrpData: [], // 分组集合
            hosp: JSON.parse(window.sessionStorage.userData).hospID,   // 医院 //所属医院：
            doctora: '', //医生姓名
            deptDr: '', //科室名称
            deptGrp: '', //分组名称
            active: 'Y', //状态
            persGroupTitle: '添加新分组', //新增分组框内容
            persGroupingDate: {}, //编辑分组框内容回显
            clickChange: false,
        };
        this.columns = [

            {
                key: 1,
                title: '分组名称',
                dataIndex: 'medGroupDesc',
                align: "center",
                width: 300,
            },
            {
                key: 6,
                title: '科室名称',
                dataIndex: 'locDesc',
                align: "center",
                width: 300,
            },
            {
                key: 2,
                title: '生效日期',
                dataIndex: 'medGroupStartDate',
                align: "center",
                width: 200,
            },
            {
                key: 3,
                title: '失效日期',
                dataIndex: 'medGroupEndDate',
                align: "center",
                width: 200,
            },
            {
                key: 4,
                title: '状态',
                dataIndex: 'medGroupActive',
                align: "center",
                width: 200,
                render(medGroupActive) {
                    let config = {
                        'Y': '有效',
                        'N': '失效'
                    }
                    return config[medGroupActive];
                }
            },
            {
                title: '操作',
                key: 5,
                align: "center",
                width: 500,
                fixed: 'right',
                render: (text, record) => {
                    return (
                        <span>
                            <span className='span' onClick={() => this.handleMembe(record)} >组员管理</span>
                            <Divider type="vertical" />
                            <span className='span' onClick={() => this.handleMeOAS(record)}  >医嘱权限设置</span>
                            {record.locTypeCode === 'W' ? (<span><Divider type="vertical" />
                                <span className='span' onClick={() => this.handleMedBed(record)}  >病区床位设置</span></span>) : null}
                            <Divider type="vertical" />
                            <Icon type="edit" style={{ color: '#108EE9' }}></Icon>
                            <span className='span' onClick={() => this.handleEdit(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() {
        // 医院列表加载
        this.searachHospDr()
        // 科室加载
        this.hospDrChange(this.state.hosp)

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


    // 回车查询
    handleKeydown = (e) => {
        if (e.keyCode === 13) {
            this.search() // 查询
        }
    }

    // 查询
    search = (e) => {
        this.setState({ page: 1, pageSize: 10 }, () => {
            // 初始化列表数据
            this.handleQuery()
        })
    }


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

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


    // 查询
    handleQuery = () => {
        let { page, pageSize } = this.state;

        let data = {
            params: [{
                "DocDesc": this.state.doctor || '', //医生姓名
                "hospID": this.state.hosp || '', //医院
                "medGroupDesc": this.state.deptGrp || '', //分组名称
                "locID": this.state.deptDr || '', //科室Id
                "medGroupActive": this.state.active || '', //状态
            }],
            pagination: [{
                pageSize: pageSize,
                currentPage: page,
                sortColumn: 'code',
                sortOrder: 'asc'
            }]
        };
        $http.post('urlS', this, {
            code: "01040029",
            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({
                        tableData: res.result.Data,
                        total: res.result.TotalCount,
                    })
                } else {
                    this.setState({
                        tableData: [],
                        total: 0
                    })
                }
            }
        });

        this.child.handleLoading()
    }

    // 查询条件 --- 分组
    deptGrpChange = (e) => {
        this.setState({ deptGrp: e });
    }

    // 查询条件 --- 医生
    doctorChange = (e) => {
        this.setState({ doctor: e.target.value });
    }

    // 查询条件 ---状态
    activecChange = (e) => {
        this.setState({ active: e });
    }


    // 添加分组
    handleAdd = () => {
        this.setState({
            persGroupTitle: '添加新分组',
            visibleGroup: true,
            persGroupingDate: {},
        })
    }

    // 编辑分组
    handleEdit = (record) => {
        this.setState({
            persGroupingDate: record,
            persGroupTitle: '编辑分组',
            visibleGroup: true,
        })

    }

    // 组员管理
    handleMembe = (record) => {
        this.setState({
            visibleMembe: true,
            persGroupingDate: record,
        })
    }

    // 医嘱权限
    handleMeOAS = (record) => {
        this.setState({
            visibleMemOAS: true,
            persGroupingDate: record,
        })
    }

    // 病区床位管理
    handleMedBed = (record) => {
        this.setState({
            visibleMedBed: true,
            persGroupingDate: record,
            clickChange: !this.state.clickChange,
        })
    }

    // Modal确认
    handleOk = (e) => {
        this.setState({
            visibleGroup: false,
            visibleMembe: false,
            visibleMemOAS: false,
            visibleMedBed: false,
        });
        // 重新调用查询方法
        this.handleQuery();
    }

    // Modal取消
    handleCancel = (e) => {

        this.setState({
            visibleGroup: false,
            visibleMembe: false,
            visibleMemOAS: false,
            visibleMedBed: false,
        });
        this.handleQuery() //查询
    }



    // 医院列表加载
    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 = (value) => {
        this.setState({ hosp: value, deptDr: '' });

        this.setState({
            deptDrData: [], //清空下拉框
        })

        if (!value) {
            return false
        }

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

    // 科室切换
    hospLocChange = (value) => {
        this.setState({ deptDr: value, deptGrp: '' });

        this.setState({
            deptGrpData: [], //清空下拉框
        })

        if (!value) {
            return false
        }

        let data = {
            "params": [{
                locID: value,
            }]
        };
        $http.post('urlS', this, {
            code: "01040044",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        deptGrpData: res.result, // 分组集合

                    })
                }
            }
        });
    }

    // 删除

    handleDelete = (record) => {
        let data = {
            "params": [{
                updateUserID: JSON.parse(window.sessionStorage.userData).userID, //修改人
                medGroupID: record.medGroupID
            }]
        };
        $http.post('urlADS', this, {
            code: "01040031",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    message.success(res.errorMessage);
                    // 重新调用查询方法
                    this.handleQuery();
                }
            }
        });
    }


    render() {
        // 组件所需参数
        const param = {
            // 表头配置
            columns: this.columns,
            // 表格数据
            data: this.state.tableData,
            // 数据总条数
            total: this.state.total,
            // 数据页数
            page: this.state.page,
            x: 1700
        }
        return (
            <Spin tip="加载中..." spinning={this.state.showLoading}>
                <div style={{ width: '100%', height: '100%' }}>
                    <div className="table-operations">
                        <Row style={{ minHeight: '80px', padding: '0 24px 24px 24px' }}>
                            <Col span={20}>
                                所属医院：  <Select allowClear value={this.state.hosp} style={{ width: '150px', margin: '23px 15px 0 0' }} showSearch optionFilterProp="title1" onChange={(event) => { this.hospDrChange(event) }} placeholder="所属医院">
                                    {this.state.hospitalData.map(item => <Option title={item.descripts} title1={item.descripts + '^' + item.descriptsSPCode} key={item.id} value={item.id}  >{item.descripts}</Option>)}
                                </Select>
                                科室名称：<Select allowClear value={this.state.deptDr} onChange={(event) => { this.hospLocChange(event) }} showSearch optionFilterProp="title1" style={{ width: '150px', margin: '23px 15px 0 0' }} placeholder="科室名称">
                                    {this.state.deptDrData.map(item => <Option title={item.descripts + '^' + item.descriptsSPCode} key={item.id} value={item.id}  >{item.descripts}</Option>)}
                                </Select>
                                分组名称： <Select allowClear value={this.state.deptGrp} onChange={(event) => { this.deptGrpChange(event) }} style={{ width: '150px', margin: '23px 15px 0 0' }} showSearch optionFilterProp="title1" placeholder="分组名称">
                                    {this.state.deptGrpData.map(item => <Option title={item.descripts} title1={item.descripts + '^' + item.descriptsSPCode} key={item.id} value={item.id}  >{item.descripts}</Option>)}
                                </Select>
                                医生： <Input onKeyUp={(e) => { this.handleKeydown(e); }} allowClear={true} value={this.state.doctor} onChange={(event) => { this.doctorChange(event) }} placeholder="医生" style={{ width: '150px', margin: '23px 15px 0 0' }} />
                                状态：<Select allowClear value={this.state.active} onChange={(event) => { this.activecChange(event) }} style={{ width: '150px', margin: '23px 15px 0 0' }} placeholder="状态">
                                    <Option value="">全部</Option>
                                    <Option value="Y">有效</Option>
                                    <Option value="N">失效</Option>
                                </Select>
                                <Button onClick={this.search} style={{ margin: '23px 15px 0 0', background: 'rgba(255,255,255,1)' }}>查询</Button>
                            </Col>
                            <Col span={4} style={{ textAlign: 'right' }}>
                                <Button icon="plus" onClick={this.handleAdd} style={{ background: 'rgba(247,128,93,1)', color: '#fff', margin: '23px 15px 0 0' }}>新分组</Button>
                            </Col>
                        </Row>
                    </div>
                    <div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>
                    <div style={{ padding: 24 }}>
                        {/* handelThis将夫组件的属性与方法给子组件访问 */}
                        <PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} />
                    </div>
                    <div>
                        {/* 添加编辑分组 */}
                        <Modal
                            title={this.state.persGroupTitle}
                            visible={this.state.visibleGroup}
                            onOk={this.handleOk}
                            footer={false}
                            onCancel={this.handleCancel}
                        >
                            <PersGroupingModalFrom handleOk={this.handleOk} persGroupingDate={this.state.persGroupingDate} key={this.state.text} />
                        </Modal>
                    </div>
                    <div>
                        {/* 组员管理 */}
                        <Modal
                            title="组员管理"
                            visible={this.state.visibleMembe}
                            onOk={this.handleOk}
                            onCancel={this.handleCancel}
                        >
                            <MembeModal membeModalDate={this.state.persGroupingDate} />
                        </Modal>
                    </div>
                    <div>
                        {/* 医嘱权限设置 */}
                        <Modal
                            title="医嘱权限设置"
                            visible={this.state.visibleMemOAS}
                            onOk={this.handleOk}
                            onCancel={this.handleCancel}
                            width='800px'
                        >
                            <MedicalOASetModalFrom membeOASetModalDate={this.state.persGroupingDate} />
                        </Modal>
                    </div>
                    <div>
                        {/* 病区床位管理 */}
                        <Modal
                            title="病区床位管理"
                            visible={this.state.visibleMedBed}
                            onOk={this.handleOk}
                            onCancel={this.handleCancel}
                            width='800px'
                        >
                            <MedGroupBedModal GroupBedModalDate={this.state.persGroupingDate}
                                medGroupID={this.state.persGroupingDate.medGroupID} key={this.state.clickChange}
                            />
                        </Modal>
                    </div>
                </div>
            </Spin>
        )
    }
}