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,
  WeaInputNumber,
  WeaDropdown,
} from "ecCom";
import { WeaTableNew } from "comsMobx";
const WeaTable = WeaTableNew.WeaTable;
import {
  Modal,
  Row,
  Col,
  Button,
  Spin,
  Icon,
  Calendar,
  Tooltip,
  Timeline,
} from "antd";
import "../style/newChecking.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";
import AbsenceDialog from "./absenceDetail/Dialog";
const getLabel = WeaLocaleProvider.getLabel;
const toJS = mobx.toJS;
let __this;
const ButtonGroup = Button.Group;
const { ButtonSelect } = WeaDropdown;

const WorkInfo = (props) => {
  const { groupitem, onStsClick } = props;

  return (
    <div className="work work-padding">
      <div>
        {groupitem &&
          groupitem.map((item) => {
            const { icon, value, title, color } = item;
            return (
              <div className="item">
                <div className="icon" style={{ backgroundColor: color }}>
                  <i className={icon} />
                </div>
                <div className="info">
                  <div className="value" onClick={() => onStsClick(item)}>
                    {value}
                  </div>
                  <div className="title" title={title}>
                    {title}
                  </div>
                </div>
              </div>
            );
          })}
      </div>
    </div>
  );
};

const LeaveInfo = (props) => {
  const { groupitem, onStsClick, hasBorder } = props;

  const datasLen = groupitem.length;
  let width;
  if (datasLen === 1) {
    width = "100%";
  } else if (datasLen === 2) {
    width = "50%";
  } else {
    width = "33.3%";
  }

  return (
    <div
      className="leave-info-content"
      style={{ justifyContent: datasLen < 4 ? "space-around" : "flex-start" }}
    >
      {groupitem &&
        groupitem.map((item, index) => {
          const { value, title } = item;
          return (
            <div
              key={index}
              className="item"
              style={{ width, textAlign: datasLen < 4 && "center" }}
            >
              <span onClick={() => onStsClick(item)}>{value}</span>
              <span title={title}>{title}</span>
            </div>
          );
        })}
    </div>
  );
};

const SignInfo = (props) => {
  const { groupitem, onStsClick } = props;

  return (
    <div className="sign">
      {groupitem &&
        groupitem.map((d) => {
          const { value, title } = d;

          return (
            <div className="cursor-pointer" onClick={() => onStsClick(d)}>
              <span className="sign-value abnormal-font">{value}</span>
              <span className="sign-title hrm-over-flow" title={title}>
                {title}
              </span>
            </div>
          );
        })}
    </div>
  );
};

const NoData = (props) => {
  const { tip, loading } = props;

  if (loading) {
    return null;
  }

  return (
    <div className="no-data">
      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@o3bfwq`}
        type="flex"
        justify="space-around"
        align="middle"
        className="outterow"
      >
        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@faje8e`} span={24} style={{ textAlign: "center" }}>
          <i className="icon-coms-NoData f28" />
          <span
            style={{ verticalAlign: "super", marginLeft: 5 }}
            className="wea-f14"
            title={tip}
          >
            {tip}
          </span>
        </Col>
      </Row>
    </div>
  );
};

@inject("hrmChecking")
@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;
    }
    this.onStsClick.bind(this);
    __this = this;
    const { hrmChecking } = this.props;
    hrmChecking.init();
  }
  componentDidMount() {
    const { hrmChecking, hrmCard } = this.props;
    hrmChecking.hrmId = this.props.params.hrmId || "";
    this.getData();
    hrmChecking.getHrmNewWorkflwList();
    hrmChecking.getwfinfo();
    if(hrmCard){
      hrmCard.setTopButtons(this.getTopButtons.bind(this));
      hrmCard.setTopRightMenus(this.getRightMenu.bind(this));
      hrmCard.setTopShowDropIcon(true);
    }
    //document.title = hrmChecking.title;
  }
  componentWillReceiveProps(nextProps) {
    const { hrmChecking } = this.props;
    if (this.props.location.key !== nextProps.location.key) {
      hrmChecking.init();
      this.getData();
    }
  }
  getData() {
    const { hrmChecking } = this.props;
    const { tabkey } = hrmChecking;
    hrmChecking.getData(() => {
      tabkey == 1 && this.refs.chart && this.refs.chart.paint();
    });
  }

  componentDidUpdate() {
    this.props.setParentRightMenu &&
      this.props.setParentRightMenu(this.getRightMenu());
  }

  getRightMenu() {
    const { hrmChecking } = 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 { hrmChecking } = this.props;
    hrmChecking.updateNewVisible(true);
  }
  getTopButtons() {
    const { hrmChecking } = this.props;
    let btns = [];
    btns.push(
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pvyiyy@topBtn`} type="primary" onClick={() => this.addChecking()}>
        {getLabel("385037", "新建考勤流程")}
      </Button>
    );
    return btns;
  }
  chooseUser(e) {
    const { hrmChecking } = this.props;
    let hrmId = "",
      hrmName = undefined;
    if (e.selected) {
      hrmId = e.node.props.id;
      hrmName = e.node.props.name;
    }
    if (hrmId) {
      hrmChecking.updateHrmId(hrmId);
      if (hrmName) hrmChecking.updateHrmName(hrmName);
      this.getData();
    }
  }
  changeUserRoot(ids, names, datas) {
    const { hrmChecking } = this.props;
    hrmChecking.updateUserRoot(datas);
  }
  resetUserRoot() {
    const { hrmChecking } = this.props;
    hrmChecking.updateUserRoot();
    hrmChecking.updateHrmId();
    hrmChecking.updateHrmName();
    this.getData();
  }
  changeTab(key) {
    const { hrmChecking } = this.props;
    hrmChecking.changeTabHandler(key);
    this.getData();
  }
  changeDateTab(key) {
    const { hrmChecking } = this.props;
    hrmChecking.changeDateTabHandler(key);
    this.getData();
  }
  reFresh() {
    const { hrmChecking } = this.props;
    this.getData();
  }
  changeDate(v) {
    const { hrmChecking } = this.props;
    const { dateTabkey } = hrmChecking;
    if (dateTabkey == "2") {
      v = new moment(v).format("YYYY-MM");
    } else {
      v = new moment(v).format("YYYY");
    }
    hrmChecking.changeDateHandler(v);
    this.getData();
  }
  handlerStatusClick(item) {
    const { hrmChecking } = this.props;
    hrmChecking.handlerStatusClick(item.type);
  }
  renderLeft() {
    const { hrmChecking } = this.props;
    const { oHeight } = this.state;
    let { tabkey, leftTitle, userRoot } = hrmChecking;
    userRoot = toJS(userRoot);
    const hrmId = this.props.params.hrmId || "";
    let org = (
      <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@novss4`}
        dataUrl="/api/hrm/base/getHrmResourceTree"
        rootKey="rootManager"
        treeNodeClick={this.chooseUser.bind(this)}
        params={
          Array.isArray(userRoot) && userRoot[0]
            ? { rootid: userRoot[0].id }
            : { rootid: hrmId }
        }
      />
    );
    return (
      <div
        className="attendence-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@7otf28`}
            isSingle={true}
            linkUrl="/hrm/resource/HrmResource.jsp?id="
            title={getLabel("179", "人力资源")}
            type="1"
            viewAttr="2"
            replaceDatas={userRoot}
            customIcon="icon-coms-Reset"
            addOnClick={this.resetUserRoot.bind(this)}
            onChange={this.changeUserRoot.bind(this)}
          />
          {tabkey === "1" ? (
            <div style={{ height: window.innerHeight - 235 }}>{org}</div>
          ) : (
            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@9fqpl0`} 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;
  }
  getNavbarHeight = () => {
   return $('.e9theme-layout2-navbar').height()
  }

  renderDetail() {
    const { hrmChecking } = this.props;
    const { oHeight } = this.state;
    let { calendarCheckedDay, sData } = hrmChecking;
    if (calendarCheckedDay) {
      return (
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@l51d0b`}
          height={window.innerHeight - 200 - oHeight - this.getNavbarHeight()}
          className="bt"
        >
          <div className="detail-wrapper">
            <strong className="detail-header">
              <i className="icon-coms-New-schedule" />
              {sData.date}&nbsp; {getLabel("20080", "考勤情况")}
            </strong>
            {isEmpty(sData.signInfo) && (
              <div className="empty align-center">
                {getLabel("386472", "当天没有考勤数据")}
              </div>
            )}
            {!isEmpty(sData.signInfo) && (
              <Timeline ecId={`${this && this.props && this.props.ecId || ''}_Timeline@07qho9`}>
                {sData.signInfo.map((i, index) => {
                  return (
                    <Timeline.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@jdhzs1@${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>
          {getLabel("506048", "时长")}： {data.count}
        </div>
      </div>
    );
  }
  onMonthSelect(date) {
    const { hrmChecking } = this.props;
    let { dateTabkey, pDate } = hrmChecking;
    let select = new moment(date.time).format("YYYY-MM");
    if (pDate.slice(0, 7) == select) {
      hrmChecking.updateCalendarCheckedDay(date.getDayOfMonth());
    }
  }
  onyearMonthSelect(date) {
    const { hrmChecking } = this.props;
    let select = new moment(date.time).format("YYYY-MM");
    hrmChecking.changeDateHandler(select);
    hrmChecking.updateDateTabkey("2");
    this.getData();
  }
  monthDateCellRender(date) {
    const { hrmChecking } = this.props;
    let { dateTabkey, pDate, calendarData, statusActiveType } = hrmChecking;
    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];
      const components = [];
      if (
        data &&
        (data.types.indexOf(statusActiveType) > -1 ||
          statusActiveType == "ALL" ||
          data.types.indexOf("NORMAL") > -1)
      ) {
        components.push(
          <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@eothkc`}
              height={data.workflow && data.workflow.length > 0 ? 45 : 15}
            >
              {data.workflow &&
                data.workflow.map((item, i) => {
                  if (
                    item.workflowtype == statusActiveType ||
                    statusActiveType == "ALL"
                  ) {
                    const ic = Util.getIconColor(item.workflowtype);
                    return (
                      <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@8kx8c0@${i}`} 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>
        );
      }
      if (data && data.signInfo) {
        components.push(
          data.signInfo.map((info, i) => {
            const { title, signTime } = info;

            return (
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@wd0lvm@${i}`} className="calendar-sign-info">
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6t3eg1@${i}`}
                  span={24}
                  className="text-overflow"
                  title={`${title}: ${signTime}`}
                >{`${title}: ${signTime}`}</Col>
              </Row>
            );
          })
        );
      }
      return components;
    }
  }
  yearDateCellRender(date) {
    const { hrmChecking } = this.props;
    let { dateTabkey, pDate, yearData, statusActiveType } = hrmChecking;
    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 { hrmChecking } = this.props;
    let { dateTabkey, pDate, pDate1 } = hrmChecking;
    return (
      <div className="calendar-wrapper">
        {dateTabkey == "2" && (
          <Calendar ecId={`${this && this.props && this.props.ecId || ''}_Calendar@3ikg64`}
            mode="month"
            dateCellRender={this.monthDateCellRender.bind(this)}
            // startOfMonth={26}
            locale={this.getLocale()}
            onSelect={this.onMonthSelect.bind(this)}
            value={new Date(pDate)}
          />
        )}
        {dateTabkey == "1" && (
          <WeaYear ecId={`${this && this.props && this.props.ecId || ''}_WeaYear@6cz5ay`}
            value={pDate1}
            dateCellRender={this.yearDateCellRender.bind(this)}
            onMonthSelect={this.onyearMonthSelect.bind(this)}
          />
        )}
      </div>
    );
  }

  onStsClick(item) {
    const { hrmChecking } = this.props;
    const { id } = item;

    if (parseFloat(item.value) > 0) {
      hrmChecking.updateStsType(item.type);
      if (id === "leaveDays") {
        hrmChecking.openAbsenceDialog();
      } else {
        const { type } = item;
        if (type === "OVERTIME") {
          hrmChecking.getOverTimeTabDatas().then(() => {
            hrmChecking.getTableData();
          });
        } else {
          hrmChecking.getTableData();
        }
        hrmChecking.updateVisible(true);
      }
    } else {
      const content = getLabel("386474", "本月没有{params}数据！").replace(
        "{params}",
        item.title
      );
      Modal.warning({
        title: i18n.confirm.defaultTitle(),
        content,
      });
    }
  }
  renderStatistics() {
    const { hrmChecking } = this.props;
    const { iWidth } = this.state;
    let {
      chartOptions,
      groupitem2,
      groupitem3,
      groupitem4,
      groupitem5,
      count,
    } = hrmChecking;
    chartOptions = toJS(chartOptions);
    groupitem4 = toJS(groupitem4);
    groupitem3 = toJS(groupitem3);
    groupitem2 = toJS(groupitem2);
    groupitem5 = toJS(groupitem5);

    const { hasLeaveInfo, loading } = hrmChecking;

    return (
      <div>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5ubv2f`} className="statistics-wrapper" style={{ display: "block" }}>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gevw02`} 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@aoil9y`}
                  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@669upx`}>
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@o1k7rv`}
                    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@bn8vsg`}
                    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@wui1pj`}>
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@q7ghoh`} span={12} className="align-center hrm-over-flow">
                    <span
                      className="dot mr15"
                      style={{
                        backgroundColor: chartOptions.series[0].color[1],
                      }}
                    ></span>
                    <span
                      className=""
                      title={`${
                        !isEmpty(chartOptions.series[0].data) &&
                        chartOptions.series[0].data[1].name
                      }`}
                    >
                      {!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@z5wjc8`} span={12} className="align-center hrm-over-flow">
                    <span
                      className="dot mr15"
                      style={{
                        backgroundColor: chartOptions.series[0].color[0],
                      }}
                    ></span>
                    <span
                      className=""
                      title={`${
                        !isEmpty(chartOptions.series[0].data) &&
                        chartOptions.series[0].data[0].name
                      }`}
                    >
                      {!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@wy2082`} span={16} className="abnormal-wrapper">
            <div className="statistics-title bb">
              {getLabel("132057", "异常考勤汇总")}
            </div>
            <div
              className="abnormal-wrapper-left"
              style={{
                width:
                  jQuery(".attendence-checking").innerWidth() < 1300 && "74%",
              }}
            >
              <WorkInfo ecId={`${this && this.props && this.props.ecId || ''}_WorkInfo@4cv3pc`}
                groupitem={groupitem2}
                onStsClick={(d) => this.onStsClick(d)}
              />
              <div style={{ height: "50%" }}>
                <div className="leave-info-header">
                  <span className="icon">
                    <i className="icon-coms-content-o" />
                  </span>
                  <span className="title">
                    {getLabel("503887", "请假信息")}
                  </span>
                </div>
                {hasLeaveInfo ? (
                  <LeaveInfo ecId={`${this && this.props && this.props.ecId || ''}_LeaveInfo@fluc6j`}
                    groupitem={groupitem5}
                    onStsClick={(d) => this.onStsClick(d)}
                  />
                ) : (
                  <NoData ecId={`${this && this.props && this.props.ecId || ''}_NoData@kyb7ks`}
                    tip={getLabel("503888", "暂无请假信息")}
                    loading={loading}
                  />
                )}
              </div>
            </div>
            <div
              className="abnormal-wrapper-right"
              style={{
                width:
                  jQuery(".attendence-checking").innerWidth() < 1300 && "26%",
              }}
            >
              <SignInfo ecId={`${this && this.props && this.props.ecId || ''}_SignInfo@5d92ur`}
                groupitem={groupitem3}
                onStsClick={(d) => this.onStsClick(d)}
                hasBorder
              />
            </div>
          </Col>
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ypl2t2`} gutter={36} className="detail">
          {groupitem4 &&
            groupitem4.map((d, i) => {
              return (
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1xe7eq@${i}`} span={8} style={{ marginBottom: 20 }}>
                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@1vptry@${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@46bdcd@${index}`}>
                          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ufjixx@${index}`}
                            span={20}
                            className="hrm-over-flow"
                            title={i.title}
                          >
                            {i.title}
                          </Col>
                          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@rukup9@${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@i6dog7`} onClick={() => console.log("more")}>{i18n.button.more()}</Button>,
    ];
    return btns;
  }

  handleInputChange = (value) => {
    this.props.hrmChecking.setInputValue(value);
  };

  handleButtonGroupClick = (bool) => {
    this.props.hrmChecking.setIsDay(bool);
  };

  render() {
    const { hrmChecking } = this.props;
    const {
      getStatusList,
      statusActiveType,
      tabDatas,
      tabkey,
      dateTabDatas,
      dateTabkey,
      pDate,
      hasRight,
      leftTitle,
      hrmName,
      loading,
      newVisible,
      visible,
      table,
      setDialogHeight,
      kqDetailDialogHeight,
      stsType,

      overTimeTabDatas,
      overTimeTabkey,
      handleOverTimeTabClick,
      tofirstUpperCase,
      groupwfinfo
    } = hrmChecking;
    let { newWorklist } = hrmChecking;
    newWorklist = toJS(newWorklist);
    const statusList = getStatusList();
    const { query } = this.props.location;

    const getMsg = (name) => {
      const content = getLabel(
        "386475",
        "您无权查看 {params} 的考勤数据！"
      ).replace("{params}", name);
      return content;
    };

    let coms = [
      <div style={query.fromcard ? { display: "none" } : { display: "" }}>
              <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@8mum9v@1`}
                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@qhy0lw@1`}
                selectedKey={tabkey}
                keyParam="key"
                datas={[
                  {
                    title:
                      window.e9_locale.userLanguage == "8"
                        ? "Attendence Report"
                        : getLabel("16558", "考勤统计"),
                    key: "1",
                  },
                  { title: getLabel("386476", "考勤日历"), key: "2" },
                ]}
                onChange={this.changeTab.bind(this)}
              />
              <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:
                      window.e9_locale.userLanguage == "8"
                        ? "Year"
                        : i18n.label.year(),
                    key: "1",
                  },
                  { title: i18n.label.month(), key: "2" },
                ].map((item, i) => {
                  return (
                    <div
                      span={1}
                      onClick={this.changeDateTab.bind(this, item.key)}
                      style={
                        i > 0 && window.e9_locale.userLanguage == "8"
                          ? { margin: "0 10px" }
                          : {}
                      }
                      className={`cursor-pointer date-item ${
                        item.key === dateTabkey ? "active" : ""
                      }`}
                    >
                      {item.title}
                    </div>
                  );
                })}
                <div
                  style={{
                    marginLeft: window.e9_locale.userLanguage == "8" && 10,
                  }}
                >
                  <WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@dl0cdi@datepicker`}
                    arrow
                    type={dateTabkey == "1" ? "year" : "month"}
                    date={pDate}
                    onChange={this.changeDate.bind(this)}
                  />
                </div>
                <span
                  className="icon-coms-Refresh cursor-pointer"
                  style={{ marginLeft: 5 }}
                  onClick={this.reFresh.bind(this)}
                />
                {tabkey == "2" && (
                  <div
                    className="status-info clearfix"
                    style={{
                      maxWidth:
                        tabkey == 2
                          ? window.innerWidth - 700
                          : window.innerWidth - 900,
                      float: "right",
                    }}
                  >
                    {window.e9_locale.userLanguage != "8"
                      ? statusList &&
                        statusList.map((item) => {
                          return (
                            <span
                              className={`item cursor-pointer ${
                                item.type == statusActiveType ? "active" : ""
                              }`}
                              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}>
                                {item.name}
                              </span>
                            </span>
                          );
                        })
                      : statusList && (
                          <ButtonSelect ecId={`${this && this.props && this.props.ecId || ''}_ButtonSelect@ssaf6p`}
                            type="small"
                            btnProps={{
                              style: {
                                padding: 0,
                                background: "transparent",
                                border: "none",
                                color: "#000",
                                fontSize: 14,
                              },
                            }}
                            datas={statusList.reverse().map((item) => {
                              return {
                                key: item.type,
                                text: (
                                  <span>
                                    <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
                                      style={{ marginLeft: 10 }}
                                      title={item.name}
                                    >
                                      {item.name}
                                    </span>
                                  </span>
                                ),
                                show: (
                                  <span>
                                    <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
                                      style={{ marginLeft: 10 }}
                                      title={item.name}
                                    >
                                      {item.name}
                                    </span>
                                  </span>
                                ),
                              };
                            })}
                            menuOnClick={(key, e) =>
                              this.handlerStatusClick({ type: key })
                            }
                          />
                        )}
                  </div>
                )}
              </div>
              <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@873va8@scroll`}
                height={window.innerHeight - $(".e9header-right").height() - 10 - $(".wea-new-top-wapper").height() - $(".wea-tab").height() - $(".picker-wrapper").height() - 10 - $(".pt-menu-horizontal").height()}
                className="bt"
              >
                {!hasRight && (
                  <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@trut6v`}>
                    <div>{getMsg(hrmName)}</div>
                  </WeaAlertPage>
                )}
                {hasRight && (
                  <div className="hrm-checking-content icon-cls">
                    {tabkey == "1" && this.renderStatistics()}
                    {tabkey == "2" && this.renderCalendar()}
                  </div>
                )}
              </WeaNewScroll>
            </div>
    ];

    if(!query.fromcard){
      coms = (
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@7asvpr`} datas={this.getRightMenu()}>
            {coms}
        </WeaRightMenu>
      )
    }

    return (
      <div className="attendence-checking">
        <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@vlriwi`} />
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1owcla`}
          visible={visible}
          onCancel={() => hrmChecking.updateVisible(false)}
          closable
          style={{ width: 900, height: 500 }}
          title={getLabel("386477", "考勤明细")}
          icon="icon-coms-hrm"
          iconBgcolor="#217346"
          moreBtn={{ datas: [] }}
          onChangeHeight={(h) => setDialogHeight(h)}
        >
          {stsType === "OVERTIME" && (
            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@2qwfys`}
              datas={overTimeTabDatas}
              selectedKey={overTimeTabkey}
              keyParam="key"
              onChange={handleOverTimeTabClick}
            />
          )}
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@xg1n6d`}
            comsWeaTableStore={table}
            hasOrder={true}
            needScroll={true}
            scroll={{ y: kqDetailDialogHeight - 80 }}
            onOperatesClick={this.onOperatesClick.bind(this)}
          />
        </WeaDialog>
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@hegaeo`}
          visible={newVisible}
          className="new-hrm-workflow"
          onCancel={() => hrmChecking.updateNewVisible(false)}
          closable
          style={{ width: 600, height: 400 }}
          title={getLabel("385037", "新建考勤流程")}
          icon="icon-portal-workflow"
          iconBgcolor="#0079de"
          hasScroll
        >
          <div className="new-hrm-workflow-body">
              {
                  groupwfinfo && groupwfinfo.map(info => {
                    const { img, color, typeName, wfs } = info;
                    return (
                      <div className="new-hrm-workflow-wrapper" style={{borderTop:`3px solid ${color}`}}>
                        <div className="hearder">
                          <span>
                            <i className={img} style={{color}}/>
                          </span>
                          <span >
                            { `${typeName}(${wfs.length})` }
                          </span>
                        </div>
                        <div>
                          {
                            wfs.map(item => {
                              return <div className="cursor-pointer item" onClick={()=> {hrmChecking.handlerNewWorkflow(item)}}>{item.title}</div>
                            })
                          }
                        </div>
                      </div>
                    )
                  })
                }
            </div>
        </WeaDialog>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@rp9oef`} spining={loading}>
            {coms}
        </Spin>
        <AbsenceDialog ecId={`${this && this.props && this.props.ecId || ''}_AbsenceDialog@hkyys7`} store={hrmChecking} />
      </div>
    );
  }
}

//窗口大小变化
jQuery(window).resize(function () {
  if (__this) {
    __this.setState({
      iWidth: window.innerWidth,
    });
  }
});
export default main;