import React, { useState, useEffect, useCallback } from 'react';
import { FormattedMessage } from 'umi';

// import SearchInput from '@/tenants-ui/SearchInput';
import PageHeader from '@/components/PageHeader';
import TopNavigator from '../Environment/components/topNavigator';
import DeviceModal from './components/deviceModal';

import styles from './index.less';
import { equipImageMap } from '@/config/image.js';
import { Input } from 'antd';

export default function Equipment() {
  const {
    airMapTop,
    lampMapTop,
    maptemp3,
    maptemp4,
    maptemp5,
    envir_all,
    equip_air,
    equip_lamp,
    equip_water,
    envir_curtain,
    envir_humidification,
  } = equipImageMap;
  const [searchText, setSearchText] = useState();
  const [showModal, setShowModal] = useState(false);
  const [mapImg, setMapImg] = useState(maptemp3);
  const [explainImg, setExplainImg] = useState(null);

  const [navigatorList] = useState([
    {
      name: '全部设备',
      id: 'all',
      src: envir_all,
      num: 24.3,
      color: '#E5574F',
    },
    {
      name: '空调',
      id: 'air',
      src: equip_air,
      num: 11,
      color: '#5E8BCF',
    },
    {
      name: '照明',
      id: 'lamp',
      src: equip_lamp,
      num: 10,
      color: '#FFE823',
    },
    {
      name: '水机',
      id: 'water',
      src: equip_water,
      num: 33,
      color: '#9FB7CD',
    },
    {
      name: '窗帘',
      id: 'curtain',
      src: envir_curtain,
      num: 50,
      color: '#E89E32',
    },
    {
      name: '加湿器',
      id: 'humidification',
      src: envir_humidification,
      num: 36,
      color: '#2D553E',
    },
  ]);
  const navigatorChange = (item) => {
    //debugger;
    if (item.id == 'all') {
      setExplainImg(null);
      setMapImg(maptemp3);
    }
    if (item.id == 'air') {
      setExplainImg(airMapTop);
      setMapImg(maptemp4);
    }
    if (item.id == 'lamp') {
      setExplainImg(lampMapTop);
      setMapImg(maptemp5);
    }
  };
  const specialRoomClick = () => {
    console.log('showChart');
    setShowModal(true);
  };
  return (
    <div>
      <PageHeader
        title={<FormattedMessage id="menu.equipment" />}
        action={
          //   <SearchInput
          //     placeholder="搜索空间"
          //     onSearch={(s) => {
          //       setSearchText(s || undefined);
          //     }}
          //     onCancel={() => {
          //       setSearchText();
          //     }}
          //   />
          <Input.Search
            size="large"
            allowClear
            style={{ width: '20%' }}
            placeholder={'搜索空间'}
            onSearch={(s) => {
              setSearchText(s || undefined);
            }}
          />
        }
      />
      <div style={{ marginTop: '26px' }}>
        <TopNavigator
          navigatorList={navigatorList}
          type={'equipment'}
          navigatorChange={navigatorChange}
        ></TopNavigator>
        <div className={styles.mapwrap}>
          <div className={styles.top}>
            <div className={styles.right}>
              <img style={{ width: '100%' }} src={explainImg}></img>
            </div>
          </div>
          <div className={styles.map}>
            <div className={styles.specialRoom} onClick={specialRoomClick}></div>
            <img src={mapImg}></img>
          </div>
        </div>
      </div>

      {showModal && (
        <DeviceModal
          onClose={() => {
            setShowModal(false);
          }}
        ></DeviceModal>
      )}
    </div>
  );
}
