// 设备管理 导航条的右侧
import React, { useState, useEffect } from 'react';
import { DatePicker } from 'antd';
import cx from 'classnames';
import styles from './index.less';
import moment from 'moment';
import { projectObj } from '@/config/api.js';

export type TopNavRightProps = {
  runtimeNav: any;
  changeTime: (time: any) => void;
};

const TopNavRight: React.FC<TopNavRightProps> = ({ runtimeNav, changeTime }) => {
  const dateFormat = 'YYYY/MM/DD';
  return (
    <>
      <div className={styles.right}>
        <div className={styles.allList}>
          <div className={styles.item}>
            <div className={cx(styles.normalRun, styles.circle)}></div>
            <div className={styles.title}>正常运行</div>
            <div className={styles.num}>{runtimeNav.normalRun}</div>
          </div>
          <div
            className={styles.item}
            style={{ display: projectObj.projectId == 'Pj3301100002' ? 'none' : '' }}
          >
            <div className={cx(styles.overtimeWork, styles.circle)}></div>
            <div className={styles.title}>加班</div>
            <div className={styles.num}>{runtimeNav.overtimeWork}</div>
          </div>
          <div className={styles.item}>
            <div className={cx(styles.overtimeBook, styles.circle)}></div>
            <div className={styles.title}>会议预约</div>
            <div className={styles.num}>{runtimeNav.meetingBook}</div>
          </div>
        </div>
        <div className={styles.date}>
          <DatePicker
            bordered={false}
            defaultValue={moment()}
            format={dateFormat}
            allowClear={false}
            inputReadOnly={true}
            autoFocus={true}
            onChange={changeTime}
          />
        </div>
      </div>
    </>
  );
};
export default TopNavRight;
