// 组员管理
import React from 'react';
import { Select, Row, Col, Button, Divider, Popconfirm, message, Icon, Form, DatePicker, Table } from 'antd';
import { $http } from '../../../containers/config/https';


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




export default class MembeModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            dataMembe: [],  // 添加分组数据
            hospId: '',  // 医院下拉id
            locId: '',  // 科室id
            membeSelectData: [],//组员下拉框数据
            membeModalDate: [],//回显数据
            medGrpId: '',//分组主键
            userId: '',//组员主键
        };
        // 添加分组table
        this.columnsMembe = [{
            title: '当前诊疗组',
            dataIndex: 'medGroupDesc',
            key: '1',
            align: "center",
        }, {
            title: '人员工号',
            dataIndex: 'userCode',
            key: '2',
            align: "center",
        }, {
            title: '姓名',
            // dataIndex: 'userDesc',
            key: '3',
            align: "center",
            render(record) {
                let config = {
                    'Y': '(组长)',
                    'N': '',
                    '': ''
                }
                return record.userDesc + config[record.medGroupUserLeader]
            }
        }, {
            title: '操作',
            key: '4',
            align: "center",
            render: (text, record) => (
                <span>
                    <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>
                    <Divider type="vertical" />
                    {record.medGroupUserLeader === 'Y' ? <span className='span' onClick={() => this.handleEdit(record, 'N')} style={{ color: 'rgba(240,65,52,1)' }} >取消组长</span> : <span className='span' onClick={() => this.handleEdit(record, 'Y')} >设为组长</span>}
                </span>
            ),
        }]

    }

    componentDidMount() {


        if (this.props.membeModalDate && JSON.stringify(this.props.membeModalDate) !== "{}") {
            let data = this.props.membeModalDate

            this.callbackData(data) //回显数据

        }
    }

    // 实时更新
    componentWillReceiveProps(nextProps) {
        const { membeModalDate } = this.state
        const newdata = nextProps.membeModalDate


        if (membeModalDate !== newdata) {
            this.callbackData(nextProps.membeModalDate) //回显数据
        }

    }

    //回显数据
    callbackData = (data) => {
        this.setState({
            hospId: data.hospID,
            locId: data.locID, //  回显数据
            medGrpId: data.medGroupID,
        }, () => {
            // 组员下拉框加载
            this.membeSelect()
            this.medGrpUserAry()//列表数据
        })
    }

    //列表数据
    medGrpUserAry = () => {
        let data = {
            "params": [{
                medGroupID: this.state.medGrpId,
            }]
        };
        $http.post('urlADS', this, {
            code: "01040052",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    for (var i = 0; i < res.result.medGrpUserAry.length; i++) {
                        res.result.medGrpUserAry[i].key = i;
                    }

                    this.setState({
                        dataMembe: res.result.medGrpUserAry,
                    })
                }
            }
        });
    }


    //删除组员
    handleDelete = (record) => {
        let data = {
            "params": [{
                medGroupUserLogID: record.medGroupUserLogID,
                updateUserID: JSON.parse(window.sessionStorage.userData).userID, //修改人
            }]
        };
        $http.post('urlADS', this, {
            code: "01040047",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    message.success(res.errorMessage);
                    this.membeSelect()  // 组员下拉框加载
                    this.medGrpUserAry()//列表数据
                }
            }
        });
    }

    //设为取消组长
    handleEdit = (record, str) => {
        let data = {
            "params": [{
                medGroupUserLogID: record.medGroupUserLogID,
                updateUserID: JSON.parse(window.sessionStorage.userData).userID, //修改人
                medGroupID: this.state.medGrpId,
                medGroupUserLeader: str
            }]
        };
        $http.post('urlADS', this, {
            code: "01040048",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    message.success(res.errorMessage);
                    this.medGrpUserAry()//列表数据
                }
            }
        });
    }


    // 组员下拉框加载
    membeSelect = () => {
        let data = {
            "params": [{
                hospID: this.state.hospId,
                locID: this.state.locId,
                selectFlag: 'Y'

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


    userIdChange = (event) => {
        this.setState({
            userId: event
        })
    }

    // 组员添加
    handleAdd = () => {
        let data = {
            "params": [{
                userID: this.state.userId,
                medGroupID: this.state.medGrpId,
                updateUserID: JSON.parse(window.sessionStorage.userData).userID,
            }]
        };
        $http.post('urlADS', this, {
            code: "01040032",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    message.success(res.errorMessage);

                    this.membeSelect()  // 组员下拉框加载
                    this.medGrpUserAry()//列表数据
                }
            }
        });
    }

    render() {
        return (
            <div>
                <Row className="mB30">
                    <Col span={18} >
                        <Select style={{ width: '100%' }} placeholder="输入名称选择人员" value={this.state.userId} onChange={(event) => { this.userIdChange(event) }}>
                            {this.state.membeSelectData.map(item => <Option key={item.userID} value={item.userID}  >{item.userDesc}</Option>)}
                        </Select>
                    </Col>
                    <Col span={4} offset={2} style={{ textAlign: 'right' }}>
                        <Button icon="plus" onClick={this.handleAdd} style={{ background: 'rgba(247,128,93,1)', color: '#fff', marginRight: '10px' }}>加入</Button>
                    </Col>
                </Row>
                <Row >
                    <Col span={24} >
                        <Table bordered dataSource={this.state.dataMembe} columns={this.columnsMembe} pagination={false} style={{ maxHeight: '400px', minHeight: '200px', overflow: 'auto' }} />
                    </Col>
                </Row>
            </div>
        )
    }
}
