// 新科室
import React from 'react';
import { Tabs, Row, Col, Icon, Divider } from 'antd';
import UserAddFrom from './common/UserAdd'; // 用户基本信息
import LandingDepartmentFrom from './common/LandingDepartment'; // 登陆科室
import DistributionDepartmentFrom from './common/DistributionDepartment'; // 分配科室
import CrewScheduling from './common/CrewScheduling'; // 人员排班
import './style/index.less';

const TabPane = Tabs.TabPane;

export default class NewUser extends React.Component {
    constructor(porps) {
        super(porps);
        this.state = {
            activeKey: '1',
            userInfo: {}, //用户数据
        }
    }

    componentDidMount() {
        this.userInfoChange()
    }

    userInfoChange = () => {
        if (this.props.paras.userInfo) {
            let { userInfo } = this.props.paras
            this.setState({
                userInfo: userInfo,
            })
        }
    }
    // 调用公共组件的连接事件
    onRef1 = (ref) => {
        this.child1 = ref
    }

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

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

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

    // 导航栏切换
    callback = (key) => {
        this.setState({ activeKey: key }, () => {
            switch (key) {
                // case '1':
                //     this.child1.callback() 
                //     break;
                case '2':
                    this.child2.callback()
                    break;
                case '3':
                    this.child3.callback()
                    break;
                default:
                    break;
            }
        })
    }

    redireBack = () => {
        this.props.deleteSubMenuTabData(this.props.paras.targetKey, "用户信息");
    }

    render() {
        const backSpan = (
            <div style={{ background: '#f0f2f5' }}>
                <Row style={{ height: '60px', lineHeight: '50px' }}>
                    <Col span={24} style={{ height: '50px', background: '#fff', padding: ' 0 24px' }}>
                        <span style={{}}>{this.state.userInfo.userCode}</span>
                        <Divider type="vertical" style={{ margin: '0 20px', display: this.state.userInfo.userCode !== '' ? 'inline-block' : 'none' }} />
                        <span style={{}}>{this.state.userInfo.userDesc}</span>
                        <Divider type="vertical" style={{ margin: '0 20px', display: this.state.userInfo.userDesc !== '' ? 'inline-block' : 'none' }} />
                        <span style={{}}>{this.state.userInfo.userSexDesc}</span>
                        <Divider type="vertical" style={{ margin: '0 20px', display: this.state.userInfo.userSexDesc !== '' ? 'inline-block' : 'none' }} />
                        <span style={{}}>{this.state.userInfo.userDOB}</span>
                        <Divider type="vertical" style={{ margin: '0 20px', display: this.state.userInfo.userDOB !== '' ? 'inline-block' : 'none' }} />
                        <span style={{}}>{this.state.userInfo.userTitleDesc}</span>
                        <Divider type="vertical" style={{ margin: '0 20px', display: this.state.userInfo.userTitleDesc !== '' ? 'inline-block' : 'none' }} />
                        <span style={{}}>{this.state.userInfo.userCredTypeDesc}</span>
                        <Divider type="vertical" style={{ margin: '0 20px', display: this.state.userInfo.userCredTypeDesc !== '' ? 'inline-block' : 'none' }} />
                        <span style={{}}>{this.state.userInfo.userCredNo}</span>
                        <Divider type="vertical" style={{ margin: '0 20px', display: this.state.userInfo.userCredNo !== '' ? 'inline-block' : 'none' }} />
                        <span style={{}}>{this.state.userInfo.userMobile}</span>
                        <Divider type="vertical" style={{ margin: '0 20px', display: this.state.userInfo.userMobile !== '' ? 'inline-block' : 'none' }} />
                        <span style={{}}>{this.state.userInfo.userActive}</span>
                    </Col>
                </Row>
            </div>
        )
        // let tabsHeight = store.getState().tableHeight.y + 238 + 'px'
        return (
            <div className="new-department">
                <Tabs
                    activeKey={this.state.activeKey}
                    onChange={this.callback}
                    tabPosition="left"
                    type="card"
                    className="new_department_tabs"
                    style={{ width: '100%', height: '680px', overflow: 'auto' }}
                >
                    <TabPane tab="用户基本信息" key="1">
                        {backSpan}
                        <UserAddFrom userID={this.state.userInfo.userID} key={this.state.userInfo.userID} onRef={this.onRef1} />
                    </TabPane>
                    <TabPane tab="登陆科室" key="2">
                        {backSpan}
                        <LandingDepartmentFrom userID={this.state.userInfo.userID} onRef={this.onRef2} />
                    </TabPane>
                    <TabPane tab="分配科室" key="3">
                        {backSpan}
                        <DistributionDepartmentFrom userID={this.state.userInfo.userID} userCode={this.state.userInfo.userCode} onRef={this.onRef3} />
                    </TabPane>
                    <TabPane tab="人员排班" key="4">
                        {backSpan}
                        <CrewScheduling />
                    </TabPane>
                </Tabs>
            </div>
        )
    }
}