import React, { useState, useEffect, useCallback } from 'react';
import PageHeader from '@/components/PageHeader';
import Map from '@/components/map';
import TopNavigator from '@/components/topNavigator';
import RunNavRight from './components/topNavRight';
import { FormattedMessage, history } from 'umi';
import { Popover } from 'antd';
import styles from './index.less';
import mapstyles from '@/assets/css/map.less';
import Icon from '@/tenants-ui/Icon';
import SearchInput from '@/components/SearchInput';
import moment from 'moment';

import { getMapList, queryDeviceTimeManage } from '@/services/ant-design-pro/environment';

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

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

  const [searchText, setSearchText] = useState<{ text: any }>();
  const [runtimeNav, setRuntimeNav] = useState<runtimeNavType>({});
  const [mapList, setMapList] = useState<API.MapInfo[]>([]);
  const [mapCombineList, setMapCombineList] = useState<any[]>([]);
  const [selFloorId, setSelFloorId] = useState<string>();
  const [selTime, setSelTime] = useState<string>(moment().format('YYYYMMDD'));
  const [spaceTimeList, setSpaceTimeList] = useState<any[]>([]);

  //楼层切换的回调
  const changeFloorId = (data: string) => {
    debugger;
    setSelFloorId(data);
  };
  const checkRecord = () => {
    history.push('/runtime/recordList');
    console.log('showR');
  };
  //时间切换的回调
  const changeTime = (time) => {
    debugger;
    var timeStr = time.format('YYYYMMDD');
    setSelTime(timeStr);
  };
  //获取地图 mapList
  useEffect(() => {
    if (selFloorId) {
      getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: '' }).then(
        (res) => {
          debugger;
          var data: API.MapInfo[] = (res.data || {}).spaceList || [];
          setMapList(data);
        },
      );
    }
  }, [selFloorId]);

  //获取时间列表 spaceTimeList
  useEffect(() => {
    if (selFloorId && selTime) {
      //debugger;
      queryDeviceTimeManage({
        //floorId: selFloorId,
        floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
        //date: selTime,
        date: 20220212,
      }).then(function (res) {
        debugger;
        var resdata = res || {};
        setRuntimeNav({
          normalRun: resdata.workTimeNum,
          overtimeWork: resdata.overTimeNum,
          overtimeBook: resdata.meetTimeNum,
        });
        var resList = res.content || [];
        resList.forEach((ritem) => {
          ritem.runTimeStatus = 'normalRun';
          var timeList = [];
          if (ritem.hasOwnProperty('workTimeStartTime')) {
            var timeStrArr = [ritem.workTimeStartTime, ritem.workTimeEndTime];
            timeList.push(timeStrArr);
          }
          if (ritem.hasOwnProperty('meetTime')) {
            ritem.runTimeStatus = 'overtimeBook';
            ritem.meetTime.forEach((meetitem) => {
              var timeStrArr = [meetitem.meetTimeStartTime, meetitem.meetTimeEndTime];
              timeList.push(timeStrArr);
            });
          }
          if (ritem.hasOwnProperty('overTimeStartTime')) {
            var timeStrArr = [ritem.overTimeStartTime, ritem.overTimeEndTime];
            timeList.push(timeStrArr);
            ritem.runTimeStatus = 'overtimeWork';
          }
          ritem.showTimeList = timeList;
          ritem.showTimeStr =
            timeList.length > 0 ? timeList[0][0] + '-' + timeList[timeList.length - 1][1] : '';
        });
        setSpaceTimeList(resList);
      });
    }
  }, [selFloorId, selTime]);

  useEffect(() => {
    //mapList,spaceTimeList 这两个数据的结合
    debugger;
    console.log('dfsd-------', mapList, spaceTimeList);
    if (mapList && mapList.length > 0 && spaceTimeList && spaceTimeList.length > 0) {
      var combineList = [];
      mapList.map(function (mitem) {
        var spaceId = mitem.spaceId;
        var filterSpace = spaceTimeList.filter((ele) => {
          return ele.id == spaceId;
        });

        var combine = Object.assign({}, mitem, filterSpace[0]);
        combineList.push(combine);
      });
      setMapCombineList(combineList);
    }
  }, [mapList, spaceTimeList]);

  return (
    <>
      <PageHeader
        title={<FormattedMessage id="menu.runtime" />}
        action={
          //   <div className={styles.headerRight}>
          //     <div className={styles.check} onClick={checkRecord} style={{ display: 'none' }}>
          //       <Icon className="" style={{ marginRight: 6 }} type="document" />
          //       <span>查看加班记录</span>
          //     </div>
          //   </div>
          <SearchInput
            mapList={mapList}
            onSearch={(s) => {
              setSearchText({ text: s });
            }}
          />
        }
      />
      <TopNavigator
        type={'runtime'}
        action={<RunNavRight runtimeNav={runtimeNav} changeTime={changeTime}></RunNavRight>}
        changeFloorId={changeFloorId}
      ></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
        searchText={searchText}
        selFloorId={selFloorId}
        mapList={mapCombineList}
        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 == 'overtimeBook'
                    ? 'rgba(0, 220, 35, 0.2)'
                    : item.runTimeStatus == 'overtimeWork'
                    ? 'rgba(94, 139, 207, 0.2)'
                    : 'rgba(196, 196, 196, 0.2)',
              }}
            >
              <div className={mapstyles.allTime}>
                {/* {(item.timeList || []).map(function (titem: string, tindex: number) {
                  return <span key={tindex + 'time'}>{titem},</span>;
                })} */}
                {item.showTimeList && item.showTimeList.length > 1 && (
                  <Popover
                    content={(item.showTimeList || []).map((timeItem) => {
                      return (
                        <div>
                          {timeItem[0]}-{timeItem[1]}
                        </div>
                      );
                    })}
                    trigger="hover"
                    style={{ color: 'none' }}
                  >
                    <span>{item.showTimeStr}</span>
                  </Popover>
                )}
                {item.showTimeList && item.showTimeList.length == 1 && (
                  <span>{item.showTimeStr}</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;
