import React, { useState, useEffect, useRef } from 'react';
import { message } from 'antd';
import styles from './index.less';
import commonStyles from '../common.less';
import { equipImageMap } from '@/config/image.js';
import AnSwitch from '../anSwitch';
import { getFeedbackDocumentsHttp, changeAirHttp } from '@/services/ant-design-pro/equipment';

export default ({ spaceId, projectId }) => {
  const {
    airOpen,
    airClose,
    temp_down,
    temp_up,
    temp_keep,
    arrow_down,
    arrow_up,
    wind_up,
    wind_down,
  } = equipImageMap;
  const hasAir = true;
  const [isOpen, setIsOpen] = useState(true);
  const [imgSrc, setImgSrc] = useState(null);
  const timer = useRef(null);
  const [spaceStatus, setStatusText] = useState('null');
  const airExpend = [
    {
      title: '温度调节',
      type: 'temp',
      downType: 4,
      upType: 2,
      leftImg: arrow_down,
      rightImg: arrow_up,
    },
    {
      title: '风量调节',
      type: 'wind',
      downType: 5,
      upType: 6,
      leftImg: wind_down,
      rightImg: wind_up,
    },
  ];
  const statusImg = (icon) => {
    switch (icon) {
      case 1:
        return setImgSrc(temp_keep);
        break;
      case 2:
        return setImgSrc(temp_down);
        break;
      case 3:
        return setImgSrc(temp_up);
        break;

      default:
        break;
    }
  };

  function changeSwitch(val) {
    const itemIdSum = val ? 12 : 10; // 10关闭 12开启
    changeAir(itemIdSum);
    setIsOpen(val);
  }

  const getAirInfo = () => {
    const paramsObj = {
      objectId: spaceId,
      projectId: projectId,
    };
    getFeedbackDocumentsHttp(paramsObj).then((res) => {
      const val = res.icon == 7 ? false : true;
      setIsOpen(val); // 开关
      setStatusText(res.spaceStatus); // 状态文案
      statusImg(res.icon); // icon
    });
  };

  const changeAir = (itemId) => {
    const paramsObj = {
      objectId: spaceId, // 空间id
      valueType: 1, // 固定为1
      itemId: itemId,
    };
    changeAirHttp(paramsObj).then((res) => {
      if (res.result == 'success') {
        message.success('指令下发成功');
        setTimeout(() => {
          getAirInfo();
        }, 500);
      } else {
        message.error('操作失败，请重试');
      }
    });
  };

  useEffect(() => {
    // timer = setInterval(() => {
    getAirInfo(); // 获取空调状态
    // }, 1000);
    // return () => {
    //   clearInterval(timer);
    // };
  }, []);

  const AirExpend = () => {
    if (isOpen) {
      return (
        <>
          <div className={styles.expend}>
            {airExpend.map((items, idx) => {
              return (
                <div className={styles.item} key={idx}>
                  <div>{items.title}</div>
                  <div className={styles.itemRight}>
                    <div className={styles.itemBg} onClick={() => changeAir(items.downType)}>
                      <img className={styles.itemImg} src={items.leftImg} />
                    </div>
                    <div className={styles.itemBg} onClick={() => changeAir(items.upType)}>
                      <img className={styles.itemImg} src={items.rightImg} />
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </>
      );
    } else {
      return <></>;
    }
  };

  return (
    <div className={styles.box}>
      <div className={styles.content}>
        <div className={styles.env}>
          <div className={styles.envLeft}>
            <span className={commonStyles.eqTitle}>空调</span>
            <div className={styles.airStatus}>
              <span className={styles.airStatusText}>{isOpen ? '空调已开启' : '空调已关闭'}</span>
              {isOpen && (
                <div className={styles.airStatusbox}>
                  <img className={styles.airStatusImg} src={imgSrc} />
                  <span className={styles.statusText}>{spaceStatus}</span>
                </div>
              )}
            </div>
          </div>
          <div className={styles.envRight}>
            <img className={styles.roomAirImg} src={isOpen ? airOpen : airClose} />
          </div>
          <div className={commonStyles.eqBtn}>
            <AnSwitch isOpen={isOpen} changeSwitch={changeSwitch} />
          </div>
        </div>
      </div>
      <AirExpend></AirExpend>
    </div>
  );
};
