import React, { useState, useEffect, useCallback, useRef } from 'react';
import commonStyles from '../common.less';
import styles from './index.less';
import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
import { setEquipeHttp } from '@/services/sagacare_service/equipment';
import cx from 'classnames';
import { message } from 'antd';

const { curtain_close, curtain_open, curtain_down, curtain_stop, curtain_up, icon_adjust } =
  equipImageMap;

export default ({
  modalButton,
  citem,
  isTotal,
  preTime,
  changePreTime,
  changeCurtainTex,
  curtainArr,
  projectId,
  isVertical,
  showModal,
}) => {
  const [downFlag, setDownFlag] = useState(false);
  const [upFlag, setUpFlag] = useState(false);
  const [count, setCount] = useState();
  let setTimer = useRef(null);
  const sendData = (setType) => {
    let arr = [];
    if (isTotal) {
      curtainArr.forEach((item) => {
        arr.push({
          code: 'EquipSwitchSet',
          value: setType == 'on' ? 1 : setType == 'off' ? 0 : 2,
          id: item.equipId,
        });
      });
    } else {
      const params = {
        projectId: projectId,
        id: citem.equipId, // 设备ID/窗帘组ID
        code: 'EquipSwitchSet', // 设备编码 窗帘：CFSSES
        value: setType == 'on' ? 1 : setType == 'off' ? 0 : 2, // 窗帘 1 移动/停止
      };
      arr.push(params);
    }
    return arr;
  };
  const stopCurtain = () => {
    changeCurtainTex('');
    setDownFlag(false);
    setUpFlag(false);
    clearInterval(setTimer.current);

    const paramsArr = sendData();
    setEquipeHttp(paramsArr);
  };
  const handleCurtain = (setType) => {
    //const nowTime = Date.now();
    // if (nowTime - preTime <= 2000) return; // 请求间隔 2秒
    // changePreTime(Date.now());
    const paramsArr = sendData(setType);
    setEquipeHttp(paramsArr).then((res) => {
      message.success('指令已经下发');
    });
    if (setType == 'off') {
      setDownFlag(true);
      setUpFlag(false);
    } else {
      setUpFlag(true);
      setDownFlag(false);
    }
    setCount(2);
    setTimer.current = setInterval(() => {
      setCount((count) => {
        return count - 1;
      });
    }, 1000);
  };

  useEffect(() => {
    if (count == 2) changeCurtainTex('指令下发中…');
    if (count == 1) changeCurtainTex('再次点击停止窗帘');
    if (count === 0) {
      changeCurtainTex('');
      setDownFlag(false);
      setUpFlag(false);
      clearInterval(setTimer.current);
    }
  }, [count]);
  return (
    <div className={cx(commonStyles.dsflex, { [styles.modalButton]: modalButton })}>
      {showModal && citem?.isOpenSet == 1 && (
        <div
          className={`${commonStyles.circulBtn}  ${commonStyles.mgr8}`}
          onClick={(event) => {
            event.stopPropagation();
            showModal && showModal(citem);
          }}
        >
          <div className={commonStyles.controlBtn}>
            <img className={commonStyles.btnIcon} src={icon_adjust}></img>
          </div>
        </div>
      )}
      <div
        onClick={(event) => {
          event.stopPropagation();
          handleCurtain('off');
        }}
        className={`${commonStyles.circulBtn} ${commonStyles.mgr8}`}
      >
        <div className={cx(commonStyles.controlBtn, { [commonStyles.yell]: downFlag })}>
          {downFlag && <div>{count}</div>}
          {!downFlag && (
            <img
              className={commonStyles.btnIcon}
              src={
                citem?.equipmentType == 1 || citem?.equipmentType == 2 || citem?.equipmentType == 3
                  ? curtain_close
                  : curtain_down
              }
            ></img>
          )}
        </div>
        {modalButton && <div className={commonStyles.controlTxt}>关闭</div>}
      </div>
      {citem?.stopSet == 1 && (
        <div
          className={`${commonStyles.circulBtn}  ${commonStyles.mgr8}`}
          onClick={(event) => {
            event.stopPropagation();
            stopCurtain();
          }}
        >
          <div className={cx(commonStyles.controlBtn,commonStyles.stopBtn)}>
            <img className={commonStyles.btnIcon} src={curtain_stop}></img>
          </div>
          {modalButton && <div className={commonStyles.controlTxt}>暂停</div>}
        </div>
      )}

      <div
        onClick={(event) => {
          event.stopPropagation();
          handleCurtain('on');
        }}
        className={`${commonStyles.circulBtn}`}
      >
        <div className={cx(commonStyles.controlBtn, { [commonStyles.yell]: upFlag })}>
          {upFlag && <div>{count}</div>}
          {!upFlag && (
            <img
              className={commonStyles.btnIcon}
              src={
                citem?.equipmentType == 1 || citem?.equipmentType == 2 || citem?.equipmentType == 3
                  ? curtain_open
                  : curtain_up
              }
            ></img>
          )}
        </div>
        {modalButton && <div className={commonStyles.controlTxt}>打开</div>}
      </div>
    </div>
  );
};
