import React, { useState, useEffect, useCallback } from 'react';
import PageHeader from '@/components/PageHeader';
import TopNavigator from '../Environment/components/topNavigator';
import { FormattedMessage, history } from 'umi';
import SearchInput from '@/tenants-ui/SearchInput';
import styles from './index.less';
import Icon from '@/tenants-ui/Icon';
import { equipImageMap } from '@/config/image.js';

export default function Runtime(props) {
  const { maptemp6 } = equipImageMap;

  const [searchText, setSearchText] = useState();
  const [navigatorList] = useState([]);
  const [mapImg, setMapImg] = useState(maptemp6);

  const checkRecord = () => {
    history.push('/runtime/recordList');
    console.log('showR');
  };
  return (
    <div>
      <PageHeader
        title={<FormattedMessage id="menu.runtime" />}
        action={
          <div className={styles.headerRight}>
            <SearchInput
              placeholder="搜索空间"
              onSearch={(s) => {
                setSearchText(s || undefined);
              }}
              onCancel={() => {
                setSearchText();
              }}
            />
            <div className={styles.check} onClick={checkRecord}>
              <Icon style={{ marginRight: 6 }} type="document" />
              <span>查看加班记录</span>
            </div>
          </div>
        }
      />
      <div style={{ marginTop: '26px' }}>
        <TopNavigator type={'runtime'}></TopNavigator>
        <div className={styles.mapwrap}>
          <div className={styles.top}>
            <div className={styles.right}></div>
          </div>
          <div className={styles.map}>
            <div className={styles.specialRoom}></div>
            <img src={mapImg}></img>
          </div>
        </div>
      </div>
    </div>
  );
}
