import React, { useState, useEffect, useCallback } from 'react';
import PageHeader from '@/components/PageHeader';
import Map from '@/components/map';
import TopNavigator from '../Environment/components/topNavigator';
import RunNavRight from './components/topNavRight';
import { FormattedMessage, history } from 'umi';
import { Input } from 'antd';
import styles from './index.less';
import mapstyles from '@/assets/css/map.less';
import Icon from '@/tenants-ui/Icon';
//import { equipImageMap } from '@/config/image.js';
//import { getMapList } from '@/services/ant-design-pro/environment';

type runtimeNavType = {
  normalRun: number;
  overtimeWork: number;
  overtimeBook: number;
};

const Runtime: React.FC = () => {
  // const { maptemp6 } = equipImageMap;

  const [searchText, setSearchText] = useState<string>();
  const [runtimeNav] = useState<runtimeNavType>({
    normalRun: 22,
    overtimeWork: 22,
    overtimeBook: 22,
  });
  //const [mapList, setMapList] = useState<API.MapInfo[]>([]);

  const checkRecord = () => {
    history.push('/runtime/recordList');
    console.log('showR');
  };
  //   useEffect(() => {
  //     getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
  //       var data: API.MapInfo[] = res.data || [];
  //       data.forEach((item, index) => {});
  //       setMapList(data);
  //     });
  //   }, []);
  return (
    <>
      <PageHeader
        title={<FormattedMessage id="menu.runtime" />}
        action={
          <div className={styles.headerRight}>
            {/* <SearchInput
              placeholder="搜索空间"
              onSearch={(s) => {
                setSearchText(s || undefined);
              }}
              onCancel={() => {
                setSearchText();
              }}
            /> */}
            <Input.Search
              size="large"
              allowClear
              style={{ width: '230px' }}
              placeholder={'搜索空间'}
              onSearch={(s) => {
                setSearchText(s || undefined);
              }}
            />
            <div className={styles.check} onClick={checkRecord} style={{ display: 'none' }}>
              <Icon className="" style={{ marginRight: 6 }} type="document" />
              <span>查看加班记录</span>
            </div>
          </div>
        }
      />
      <TopNavigator
        type={'runtime'}
        action={<RunNavRight runtimeNav={runtimeNav}></RunNavRight>}
      ></TopNavigator>
      <div className={styles.maptop}>
        <div className={styles.right}></div>
      </div>
      {/* <div className={styles.map}>
            <div className={styles.specialRoom}></div>
            <img src={mapImg}></img>
          </div> */}
      {/* <div
              className={mapstyles.house}
              style={{
                width: 180,
                height: 100,
              }}
            >
              <div className={mapstyles.allTime}>08:00-23:00</div>
              <div className={mapstyles.content}>
                <Icon className="" type="office" style={{ fontSize: 20 }}></Icon>
                <div className={mapstyles.name}>Jozy Zone</div>
              </div>
            </div> */}
      <Map
        type={'runtime'}
        render={(item, index) => {
          return (
            <div
              key={index + 'house'}
              className={mapstyles.house}
              style={{
                left: item.left,
                top: item.top,
                width: item.width,
                height: item.height,
                backgroundColor:
                  item.runTimeStatus == 'normalRun'
                    ? 'rgba(196, 196, 196, 0.2)'
                    : item.runTimeStatus == 'overtimeWork'
                    ? 'rgba(94, 139, 207, 0.2)'
                    : 'rgba(0, 220, 35, 0.2)',
              }}
            >
              <div className={mapstyles.allTime}>
                {(item.timeList || []).map(function (titem: string, tindex: number) {
                  return <span key={tindex + 'time'}>{titem},</span>;
                })}
              </div>
              <div className={mapstyles.content}>
                <Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
                <div className={mapstyles.name}>{item.localName}</div>
              </div>
            </div>
          );
        }}
      ></Map>
    </>
  );
};
export default Runtime;
