import React from "react";
import { Button ,Spin} from "antd";
import { WeaTop,WeaLeftRightLayout,WeaLocaleProvider,WeaAlertPage } from "ecCom";
import Tab from './Tab'
import {render} from 'react-dom';
import {observer} from 'mobx-react'
import {WeaTools} from 'ecCom';
import LeftTree from './LeftTree'
import {
  i18n
} from '../../public/i18n';

const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class Top extends React.Component {
     
    render () {
        const iconInfo = ecCom.WeaTools.getIconBGC('hrm')//图标
        const {newOutSide}  = this.props;
        const {tabName,selectedTabIndex,loading,hasRight,hrmName,topButton,dropMenuDatas} = newOutSide
        const errorMsg = getLabel('386507', "你无权查看{params}的外勤数据！").replace('{params}', hrmName);
        return (
            <div className="wea-top-demo" style= {{height:'100%'}}>
              <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@49272h`}
                buttons={topButton}
                title={<span >{getLabel('518268', "外勤签到")}</span>}
                icon={<i className={iconInfo.icon} />}
                iconBgcolor={iconInfo.iconBgcolor}
                style={{height:'100%'}}
                showDropIcon = {true}
                dropMenuDatas = {dropMenuDatas}
              >
              {
                selectedTabIndex == '2' ? 
                <div style={{height:'100%'}} >
                <Tab ecId={`${this && this.props && this.props.ecId || ''}_Tab@4b9xdz`} newOutSide = {newOutSide} />
                {
                    tabName(newOutSide)
                }
                </div>
               :
            <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@w1klsc`}
                  showBtn={false}
                  leftCom={<LeftTree ecId={`${this && this.props && this.props.ecId || ''}_LeftTree@9n208v`} newOutSide = {newOutSide} />}
                  leftWidth={250}
                  >
                  <div style={{height:'100%'}} >
                  <Tab ecId={`${this && this.props && this.props.ecId || ''}_Tab@sut2jc`} newOutSide = {newOutSide} />
                  {
                    !hasRight ?  <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@p843gm`}>
                    <div>{errorMsg}</div>
                    </WeaAlertPage>
                    :
                      tabName(newOutSide)
                  }
                  </div>
              </WeaLeftRightLayout>
              }
              
              </WeaTop>
          </div>
        )
    }
       
}