import React from 'react';
import {
  inject,
  observer
} from 'mobx-react';
import {
  WeaTop,
  WeaTab,
  WeaOrgTree,
  WeaLeftRightLayout,
  WeaEchart,
  WeaYear,
  WeaDialog,
  WeaPopoverHrm,
  WeaRightMenu,
  WeaTools,
  WeaErrorPage,
  WeaAlertPage,
  WeaDatePicker,
  WeaBrowser,
  WeaNewScroll
} from 'ecCom';
import {
  WeaTableNew
} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import {
  Modal,
  Row,
  Col,
  Button,
  Spin,
  Icon,
  Calendar,
  Tooltip,
  Timeline
} from 'antd';
import '../style/checking.less';
import * as mobx from 'mobx';
import isEmpty from 'lodash/isEmpty';
import cloneDeep from 'lodash/cloneDeep';
import toString from 'lodash/toString';
import moment from 'moment';
import debounce from 'lodash/debounce'
import * as Util from '../util/index';
import {
  win32
} from 'path';
import {
  i18n
} from '../public/i18n';
import {
  WeaLocaleProvider
} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const toJS = mobx.toJS;

@inject('hrmOldChecking')
@observer
class main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      iWidth: window.innerWidth,
      oHeight: 300
    }
    if (window.innerHeight > 850) {
      this.state.oHeight = 450;
    } else if (window.innerHeight > 600) {
      this.state.oHeight = window.innerHeight / 2 - 100;
    } else {
      this.state.oHeight = 200;
    }
    const {
      hrmOldChecking
    } = this.props;
    hrmOldChecking.init();
  }
  componentDidMount() {
    const {
      hrmOldChecking
    } = this.props;
    hrmOldChecking.hrmId = this.props.params.hrmId || '';
    this.getData();
    hrmOldChecking.getHrmNewWorkflwList();
    //document.title = hrmOldChecking.title;

    //窗口大小变化
    jQuery(window).resize(() => {
      this.setState({
        iWidth: window.innerWidth
      })
    });
  }

  componentWillReceiveProps(nextProps) {
    const {
      hrmOldChecking
    } = this.props;
    if (this.props.location.key !== nextProps.location.key) {
      hrmOldChecking.init();
      this.getData();
    }
  }
  getData = () => {
    const {
      hrmOldChecking
    } = this.props;
    const {
      tabkey
    } = hrmOldChecking;
    hrmOldChecking.getData(() => {
      tabkey == 1 && this.refs.chart && this.refs.chart.paint();
    });
  }

  getRightMenu = () => {
    const {
      hrmOldChecking
    } = this.props;
    let btns = [];
    btns.push({
      key: "add",
      icon: <i className='icon-coms-workflow'/>,
      content: getLabel('385037', "新建考勤流程"),
      onClick: key => {
        this.addChecking();
      }
    });
    return btns;
  }
  addChecking = () => {
    const {
      hrmOldChecking
    } = this.props;
    hrmOldChecking.updateNewVisible(true);
  }
  getTopButtons = () => {
    const {
      hrmOldChecking
    } = this.props;
    let btns = [];
    btns.push(
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@avkel6@1`} type="primary" onClick={()=>this.addChecking()} >{getLabel('385037',"新建考勤流程")}</Button>
    );
    return btns;
  }
  chooseUser = (e) => {
    const {
      hrmOldChecking
    } = this.props;
    let hrmId = '',
      hrmName = undefined;
    if (e.selected) {
      hrmId = e.node.props.id;
      hrmName = e.node.props.name;
    }
    if (hrmId) {
      hrmOldChecking.updateHrmId(hrmId);
      if (hrmName) hrmOldChecking.updateHrmName(hrmName);
      this.getData();
    }
  }
  changeUserRoot = (ids, names, datas) => {
    const {
      hrmOldChecking
    } = this.props;
    hrmOldChecking.updateUserRoot(datas);
  }
  resetUserRoot = () => {
    const {
      hrmOldChecking
    } = this.props;
    hrmOldChecking.updateUserRoot();
    hrmOldChecking.updateHrmId();
    hrmOldChecking.updateHrmName();
    this.getData();
  }
  changeTab = (key) => {
    const {
      hrmOldChecking
    } = this.props;
    hrmOldChecking.changeTabHandler(key);
    this.getData();
  }
  changeDateTab = (key) => {
    const {
      hrmOldChecking
    } = this.props;
    hrmOldChecking.changeDateTabHandler(key);
    this.getData();
  }
  reFresh = () => {
    const {
      hrmOldChecking
    } = this.props;
    this.getData();
  }
  changeDate = (v) => {
    const {
      hrmOldChecking
    } = this.props;
    const {
      dateTabkey
    } = hrmOldChecking;
    if (dateTabkey == '2') {
      v = new moment(v).format('YYYY-MM');
    } else {
      v = new moment(v).format('YYYY');
    }
    hrmOldChecking.changeDateHandler(v);
    this.getData();
  }
  handlerStatusClick = (item) => {
    const {
      hrmOldChecking
    } = this.props;
    hrmOldChecking.handlerStatusClick(item.type);
  }
  renderLeft = () => {
    const {
      hrmOldChecking
    } = this.props;
    const {
      oHeight
    } = this.state;
    let {
      tabkey,
      leftTitle,
      userRoot
    } = hrmOldChecking;
    userRoot = toJS(userRoot);
    const hrmId = this.props.params.hrmId || '';
    let org = <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@5zeki5`} dataUrl="/api/hrm/base/getHrmResourceTree" rootKey="rootManager"
                  treeNodeClick={this.chooseUser}
                  params={Array.isArray(userRoot) && userRoot[0] ? {rootid: userRoot[0].id} : {rootid:hrmId}}
              />
    return <div className="wea-hrm-checking-left" style={{height: window.innerHeight - 125}}>
      <div className="left-header">
        <div className="header-title bb align-center">
          {getLabel('32997',"人员组织")}
        </div>
      </div>
      <div className="left-body">
        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@6uzr3s`} isSingle={true}
          linkUrl="/hrm/resource/HrmResource.jsp?id=" title={getLabel('179',"人力资源")} type="1" viewAttr="2"
          replaceDatas={userRoot}
          customIcon="icon-coms-Reset"
          addOnClick={this.resetUserRoot}
          onChange={this.changeUserRoot}
        />
        {
          tabkey === '1'?
          <div style={{height: window.innerHeight - 235}}>
            {org}
          </div>:
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@4r111k`} height={oHeight} className="left-checking">
            {org}
          </WeaNewScroll>
        }
        {
          tabkey === '2' && this.renderDetail()
        }
      </div>
    </div>
  }
  // 截取很magic的a标签数据
  sliceA = (str) => {
    if (str.indexOf('a>') > -1 && str.indexOf('<a') > -1) {
      str = str.match(/\>(.+)</)[1];
    }
    return str
  }
  renderDetail = () => {
    const {
      hrmOldChecking
    } = this.props;
    const {
      oHeight
    } = this.state;
    let {
      calendarCheckedDay,
      calendarData
    } = hrmOldChecking;
    calendarData = toJS(calendarData);
    if (calendarCheckedDay) {
      let data = calendarData[calendarCheckedDay];
      return <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@mkdq0p`} height={window.innerHeight - 200 - oHeight} className="bt">
        <div className="detail-wrapper">
          <strong className="detail-header">
            <i className="icon-coms-New-schedule" />
            {data.date}&nbsp; {getLabel('20080',"考勤情况")}
          </strong>
          {isEmpty(data.signInfo) && <div className="empty align-center">{getLabel('386472',"当天没有考勤数据")}</div>}
          {!isEmpty(data.signInfo) && <Timeline ecId={`${this && this.props && this.props.ecId || ''}_Timeline@14di4e`}>
            {
              data.signInfo.map((i, index) => {
                return <Timeline.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@j1gd69@${index}`}>
                  {
                    i.item && i.item.map((d)=> {
                      return <div className="item">
                        <span className="title">{d.title}</span>&nbsp;:&nbsp;
                        <span className="value">{this.sliceA(d.value)}</span></div>
                    })
                  }
                </Timeline.Item>
              })
            }
            </Timeline>
          }
        </div>
      </WeaNewScroll>
    }
    return <div className="detail-wrapper align-center bt">
      <span>{getLabel('386473',"点击日历查看每天考勤情况")}</span>
    </div>
  }

  getLocale = () => {
    return {
      firstDayOfWeek: 0,
      lang: {
        format: {
          eras: [getLabel(383357, "公元前"), getLabel(383358, "公元")],
          months: [getLabel(1492, "一月"), getLabel(1493, "二月"), getLabel(383385, "三月"), getLabel(383387, "四月"), getLabel(1496, "五月"), getLabel(383392, "六月"),
            getLabel(383393, "七月"), getLabel(383394, "八月"), getLabel(383395, "九月"), getLabel(383396, "十月"), getLabel(383397, "十一月"), getLabel(383398, "十二月")
          ],
          shortMonths: [getLabel(1492, "一月"), getLabel(1493, "二月"), getLabel(383385, "三月"), getLabel(383387, "四月"), getLabel(1496, "五月"), getLabel(383392, "六月"),
            getLabel(383393, "七月"), getLabel(383394, "八月"), getLabel(383395, "九月"), getLabel(383396, "十月"), getLabel(383397, "十一月"), getLabel(383398, "十二月")
          ],
          weekdays: [getLabel(24626, "星期天"), getLabel(383399, "星期一"), getLabel(383400, "星期二"), getLabel(383402, "星期三"), getLabel(383403, "星期四"),
            getLabel(383404, "星期五"), getLabel(383405, "星期六")
          ],
          shortWeekdays: [getLabel(16106, "周日"), getLabel(16100, "周一"), getLabel(16101, "周二"), getLabel(16102, "周三"), getLabel(16103, "周四"), getLabel(16104, "周五"),
            getLabel(16105, "周六")
          ],
          veryShortWeekdays: [getLabel(16106, "周日"), getLabel(16100, "周一"), getLabel(16101, "周二"), getLabel(16102, "周三"), getLabel(16103, "周四"), getLabel(16104, "周五"), getLabel(16105, "周六")],
          ampms: [getLabel(383408, "上午"), getLabel(383409, "下午")],
          datePatterns: [`yyyy'${getLabel(383372,"年")}'M'${getLabel(383373,"月")}'d'${getLabel(383374,"日")}' EEEE`, `yyyy'${getLabel(383372,"年")}'M'${getLabel(383373,"月")}'d'${getLabel(383374,"日")}'`, "yyyy-M-d", "yy-M-d"],
          timePatterns: [`ahh'${getLabel(383411,"时")}'mm'${getLabel(383412,"分")}'ss'${getLabel(383414,"秒")}' 'GMT'Z`, `ahh'${getLabel(383411,"时")}'mm'${getLabel(383412,"分")}'ss'${getLabel(383414,"秒")}'`, "H:mm:ss", "ah:mm"],
          dateTimePattern: '{date} {time}'
        }
      },
    }
  }

  getTipText = (data) => {
    return <div>
      <div dangerouslySetInnerHTML={{__html: data.title}}></div>
      <div>{getLabel('24979',"开始时间")}： {data.start}</div>
      <div>{getLabel('743',"结束时间")}： {data.end}</div>
      {data.type && <div>{getLabel('500401',"类型")}： {data.type}</div>}
      <div>{data.workflowtype=='OVERTIME'?getLabel('132055',"时长（小时）"):getLabel('132014',"时长（天）")}： {data.count}</div>
    </div>
  }
  onMonthSelect = (date) => {
    const {
      hrmOldChecking
    } = this.props;
    let {
      dateTabkey,
      pDate
    } = hrmOldChecking;
    let select = new moment(date.time).format('YYYY-MM');
    if (pDate.slice(0, 7) == select) {
      hrmOldChecking.updateCalendarCheckedDay(date.getDayOfMonth());
    }
  }
  onyearMonthSelect = (date) => {
    const {
      hrmOldChecking
    } = this.props;
    let select = new moment(date.time).format('YYYY-MM');
    hrmOldChecking.changeDateHandler(select);
    hrmOldChecking.updateDateTabkey('2');
    this.getData();
  }
  monthDateCellRender = (date) => {
    const {
      hrmOldChecking
    } = this.props;
    let {
      dateTabkey,
      pDate,
      calendarData,
      statusActiveType
    } = hrmOldChecking;
    calendarData = toJS(calendarData);
    let select = new moment(date.time).format('YYYY-MM');
    if (pDate.slice(0, 7) == select) {
      let day = date.getDayOfMonth();
      const data = calendarData[day];
      if (data && (data.types.indexOf(statusActiveType) > -1 || statusActiveType == 'ALL' || data.types.indexOf('NORMAL') > -1)) {
        return (
          <div className="calendar-item">
              <span className="icon-wrapper">
                {
                  data.types && data.types.map((type, idx)=> {
                    if (idx > 4) return;
                    const ic = Util.getIconColor(type);
                    if (type == statusActiveType || statusActiveType == 'ALL') {
                      return  <i className={`${ic.icon}`} style={{color: ic.color, marginRight: 2}} title={ic.name}>
                              <span className="path1"></span>
                              <span className="path2"></span>
                              <span className="path3"></span>
                              <span className="path4"></span>
                          </i>
                    }
                  })
                }
              </span>
              <span className="tip" style={{color: data.isWorkDay?'#FF1B10':'#1B9B12'}}>{data.tip}</span>
              <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@yy7p26`} height={85}>
              {
                data.workflow && data.workflow.map((item, index)=> {
                  if (item.workflowtype == statusActiveType || statusActiveType == 'ALL') {
                    const ic = Util.getIconColor(item.workflowtype);
                    return <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@h7j0dw@${index}`} placement="right" title={this.getTipText(item)}>
                            <div className='workflow-item' style={{backgroundColor: ic.bcolor}}>
                              <div className="text-overflow" dangerouslySetInnerHTML={{__html: item.title}} style={{color: ic.color}}></div>
                            </div>
                      </Tooltip>
                  }
                })
              }
              </WeaNewScroll>
            </div>
        )
      }
    }
  }
  yearDateCellRender = (date) => {
    const {
      hrmOldChecking
    } = this.props;
    let {
      dateTabkey,
      pDate,
      yearData,
      statusActiveType
    } = hrmOldChecking;
    yearData = toJS(yearData);
    const d = date.getDayOfMonth();
    const m = date.getMonth() + 1;
    let data = {},
      ic = undefined;
    if (yearData !== undefined && !isEmpty(yearData)) {
      data = yearData[m][d];
      try {
        if (data.type !== 'NORMAL') ic = Util.getIconColor(data.type);
      } catch (e) {
        return <div className="date-item">{d}</div>
      }
    }
    let content;
    if (ic && (statusActiveType == data.type || statusActiveType == 'ALL')) {
      content = <span><i className={`${ic.icon}`} style={{color: ic.color}}>
                <span className="path1"></span>
                <span className="path2"></span>
                <span className="path3"></span>
                <span className="path4"></span>
              </i>
              {data.tip && <span className="tip" style={{color: data.isWorkDay?'#FF1B10':'#1B9B12'}}>{data.tip}</span>}
              </span>
    } else {
      content = <span>
        {data.tip && <span className="tip" style={{color: data.isWorkDay?'#FF1B10':'#1B9B12'}}>{data.tip}</span>}
        {d}
      </span>
    }
    return <div className="date-item">
      {content}
    </div>
  }
  renderCalendar = () => {
    const {
      hrmOldChecking
    } = this.props;
    let {
      dateTabkey,
      pDate,
      pDate1
    } = hrmOldChecking;
    return <div className="calendar-wrapper">
        {dateTabkey == '2' &&
          <Calendar ecId={`${this && this.props && this.props.ecId || ''}_Calendar@zf2tig`}
            mode="month"
            dateCellRender={this.monthDateCellRender}
            locale={this.getLocale()}
            onSelect={this.onMonthSelect}
            value={new Date(pDate)}
          />
        }
        {dateTabkey == '1' &&
          <WeaYear ecId={`${this && this.props && this.props.ecId || ''}_WeaYear@455zd2`} value={pDate1}
            dateCellRender={this.yearDateCellRender}
            onMonthSelect={this.onyearMonthSelect}
          />
        }
    </div>
  }

  onStsClick = (item) => {
    const {
      hrmOldChecking
    } = this.props;
    if (parseFloat(item.value) > 0) {
      hrmOldChecking.updateStsType(item.type);
      hrmOldChecking.getTableData();
      hrmOldChecking.updateVisible(true);
    } else {
      const content = getLabel('386474', "本月没有{params}数据！").replace('{params}', item.title);
      Modal.warning({
        title: i18n.confirm.defaultTitle(),
        content,
      });
    }
  }
  renderStatistics = () => {
    const {
      hrmOldChecking
    } = this.props;
    const {
      iWidth
    } = this.state;
    let {
      chartOptions,
      groupitem2,
      groupitem3,
      groupitem4,
      count
    } = hrmOldChecking;
    chartOptions = toJS(chartOptions);
    groupitem4 = toJS(groupitem4);
    groupitem3 = toJS(groupitem3);
    groupitem2 = toJS(groupitem2);
    return (
      <div style={{minWidth: 860}}>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@uwldcv`} className="statistics-wrapper">
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@t7s9mq`} span={8} className="chart-wrapper">
            <div className="chart-content">
              <div className="statistics-title bb">{getLabel('16732',"出勤统计")}</div>
                <div className="echart-item">
                  <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@hyedqt`} style={{height: 160, width: 160, display: 'inline-block'}}
                  ref="chart" option={chartOptions} useDefault={false}/>
                </div>
                <div className="echart-count">
                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0pq0qp`}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@d7sjb6`} span={12} className="number align-center cursor-pointer" style={{color: chartOptions.series[0].color[1]}} onClick={()=>this.onStsClick(chartOptions.series[0].data[1])}>{!isEmpty(chartOptions.series[0].data) && chartOptions.series[0].data[1].value} </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@mezh5d`} span={12} className="number align-center cursor-pointer" style={{color: chartOptions.series[0].color[0]}} onClick={()=>this.onStsClick(chartOptions.series[0].data[0])}>{!isEmpty(chartOptions.series[0].data) && chartOptions.series[0].data[0].value} </Col>
                  </Row>
                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@c7pcue`}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@47bnk5`} span={12} className="align-center">
                      <span className="dot mr15" style={{backgroundColor: chartOptions.series[0].color[1]}}></span>
                      <span className="">{!isEmpty(chartOptions.series[0].data) && chartOptions.series[0].data[1].name}（{i18n.label.day()}）</span>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3pj3uk`} span={12} className="align-center">
                      <span className="dot mr15" style={{backgroundColor: chartOptions.series[0].color[0]}}></span>
                      <span className="">{!isEmpty(chartOptions.series[0].data) && chartOptions.series[0].data[0].name}（{i18n.label.day()}）</span>
                    </Col>
                  </Row>
                </div>
            </div>
          </Col>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@dzmm1o`} span={16} className="abnormal-wrapper">
            <div className="statistics-title bb">{getLabel('132057',"异常考勤汇总")}</div>
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ps73j7`}>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@99rsef`} span={18} className="left br" style={{ paddingTop: iWidth >= 1684? 40: 10}}>
                {
                  groupitem2 && groupitem2.map((d, i)=> {
                    return <div className="item cursor-pointer" onClick={()=>this.onStsClick(d)}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@aru0uq@${i}`} span={8}>
                          <div className="icon-wrapper" style={{backgroundColor: d.color}}>
                            <i className={d.icon}/>
                          </div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@waaaj0@${i}`} span={16} className="message">
                          <div className="information">{d.value}</div>
                          <div>{d.title}{d.type=="OVERTIME"?`(${i18n.label.hour()})`:`(${i18n.label.day()})`}</div>
                        </Col>
                    </div>
                  })
                }
              </Col>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jyz6kv`} span={6} className="right">
                {
                  groupitem3 && groupitem3.map((d, i)=> {
                    return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kmw1aq@${i}`} className="cursor-pointer" onClick={()=>this.onStsClick(d)}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@mjmex3@${i}`} span={8} className="information" style={{textAlign:'left',paddingLeft:'30px'}}>{d.value}</Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5gzurq@${i}`} span={16} style={{textAlign:'left',paddingLeft:'15px'}}>{d.title}</Col>
                      </Row>
                  })
                }
              </Col>
            </Row>
          </Col>
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@bu14i8`} gutter = {36} className="detail">
          {
            groupitem4 && groupitem4.map((d, i)=> {
              return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vg0d86@${i}`} span={8} style={{marginBottom: 20}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@tptk22@${i}`} className="detail-title" title={d.title}>
                    {d.title}</Row>
                    <div className="detail-body">
                      {
                        d.item.map((i, index)=> {
                          return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2d9g1v@${index}`}>
                              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7wx5o9@${index}`} span={20} title={i.title}>{i.title}</Col>
                              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zykqvx@${index}`} span={4} title={i.value}>{i.value}</Col>
                            </Row>
                        })
                      }
                  </div>
                </Col>
            })
          }
        </Row>
      </div>
    )
  }
  onOperatesClick = (record, index, operate, flag, argumentString) => {
    if (toJS(operate) && toJS(operate).href.indexOf('addChecking') > -1) {
      this.addChecking();
    }
  }

  getBtns = () => {
    let btns = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dv0r5u@1`} onClick={()=>console.log("more")} >{i18n.button.more()}</Button>];
    return btns;
  }

  render() {
    const {
      hrmOldChecking
    } = this.props;
    const {
      getStatusList,
      statusActiveType,
      tabDatas,
      tabkey,
      dateTabDatas,
      dateTabkey,
      pDate,
      hasRight,
      leftTitle,
      hrmName,
      loading,
      newVisible,
      visible,
      table
    } = hrmOldChecking;
    let {
      newWorklist
    } = hrmOldChecking;
    newWorklist = toJS(newWorklist);
    const statusList = getStatusList();
    const {
      query
    } = this.props.location;
    const getMsg = (name) => {
      const content = getLabel('386475', "您无权查看 {params} 的考勤数据！").replace('{params}', name);
      return content;
    }
    return (
      <div className="wea-hrm-checking">
          <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@vphkfx`} />
          <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@8zgzrw`}
            visible={visible}
            onCancel={()=>hrmOldChecking.updateVisible(false)}
            closable
            style={{width: 900, height: window.innerHeight-250>500?500:window.innerHeight-250}}
            title = {getLabel('386477',"考勤明细")}
            icon="icon-coms-hrm"
            iconBgcolor='#217346'
            moreBtn={{datas:[]}}
          >
            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@p46r5s`} height={window.innerHeight-250>500?500:window.innerHeight-250} ref="scrollBar">
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@45kkjn`}
                  comsWeaTableStore={table}
                  hasOrder={true}
                  needScroll={true}
                  onOperatesClick={this.onOperatesClick}
                />
            </WeaNewScroll>
          </WeaDialog>
          <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@e0k2op`}
            visible={newVisible}
            className="new-hrm-workflow"
            onCancel={()=>hrmOldChecking.updateNewVisible(false)}
            closable
            style={{width: 600, height: 400}}
            title = {getLabel('385037',"新建考勤流程")}
            icon="icon-portal-workflow"
            iconBgcolor='#0079de'
          >
            <div className="new-hrm-workflow-body">
              <div className="new-hrm-workflow-wrapper">
                <div className="hearder"><i className="icon-coms-hrm"/>{getLabel('15882',"人事管理")}<span>(</span>{newWorklist.length}<span>)</span></div>
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@y66kpb`} height={270}>
                {
                  !isEmpty(newWorklist) && newWorklist.map((item)=> {
                    return <div className="cursor-pointer item" onClick={()=> {hrmOldChecking.handlerNewWorkflow(item)}}>{item.title}</div>
                  })
                }
                </WeaNewScroll>
              </div>
            </div>
          </WeaDialog>
          <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@yw9iss`} spining={loading}>
            <div style={query.fromcard? {display:'none'} :  {display:''}}>
              <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@r5ckz8`}
                title={`${hrmName || `'${getLabel('130758',"我")}'`}${getLabel('125404',"的考勤")}`}
                icon={<i className='icon-coms-hrm'/>}
                iconBgcolor='#217346'
                buttons={this.getTopButtons()}
                buttonSpace={10}
                showDropIcon={true}
                dropMenuDatas={this.getRightMenu()}
              />
            </div>
                {this.renderLeft()}
                <div style={{width: '100%', paddingLeft: 221}}>
                  <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@7v4mva`}
                    selectedKey={tabkey}
                    keyParam='key'
                    datas={[{title:getLabel('16558',"考勤统计"),key:"1"},{title:getLabel('386476',"考勤日历"),key:"2"}]}
                    onChange={this.changeTab}
                  />
                  <div className="picker-wrapper checking icon-cls">
                    <div style={{width: 140, paddingLeft: 10, display:'none'}} className="text-overflow" title={hrmName} >{leftTitle}&nbsp;:&nbsp;&nbsp;{hrmName}</div>
                    {[{title: i18n.label.year(),key:"1"}, {title: i18n.label.month() ,key:"2"}].map((item)=> {
                      return <div span={1} onClick={this.changeDateTab.bind(this, item.key)} className={`cursor-pointer date-item ${item.key===dateTabkey?'active':'' }`}>
                        {item.title}
                        </div>
                      }
                    )}
                    <WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@kmnk8j`} arrow type={dateTabkey == '1' ? 'year': 'month'} date={pDate} onChange={this.changeDate}/>
                    <span className="icon-coms-Refresh cursor-pointer" style={{left: dateTabkey=='1'?96: 120}} onClick={this.reFresh}/>
                    {
                      tabkey == '2' && <div className="status-info clearfix" style={{maxWidth: tabkey==2?window.innerWidth -700:window.innerWidth -900, float: 'right'}}>
                        {
                          statusList && statusList.map((item)=> {
                            return <span className={`item cursor-pointer ${item.type == statusActiveType?'active':''}`} style={{width: window.e9_locale.userLanguage === 8 && 60}} onClick={()=> this.handlerStatusClick(item)} title={item.title}>
                              <i className={`${item.icon}`} style={{color: item.color}}>
                                <span className="path1"></span>
                                <span className="path2"></span>
                                <span className="path3"></span>
                                <span className="path4"></span>
                              </i>
                              <span className="name" title={item.name} style={{width: window.e9_locale.userLanguage === 8 && 45}}>{item.name}</span>
                            </span>
                          })
                        }
                      </div>
                    }
                  </div>
                  <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@0vvlq2`} height={window.innerHeight - 153 - 65} className="bt">
                    {!hasRight && <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@gkdsq5`} >
                      <div>{getMsg(hrmName)}</div>
                    </WeaAlertPage>}
                    {
                      hasRight && <div className="hrm-checking-content icon-cls">
                        {tabkey == '1' && this.renderStatistics()}
                        {tabkey == '2' && this.renderCalendar()}
                      </div>
                    }
                  </WeaNewScroll>
                </div>
          </Spin>
        </div>
    )
  }
}

export default main