import React, { useState, useEffect, useCallback } from 'react';
import styles from './index.less';
import commonStyles from '../common.less';
import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
import CurtainBtn from './curtainBtn';
import { getObjectDataEqpGroupHttp } from '@/services/sagacare_service/equipment';

const { curtain_open_row, expend_down, expend_up } = equipImageMap;

export default ({ spaceId, projectId }) => {
  const [isMore, setIsMore] = useState(false); // 可以展开
  const [flagSvg, setFlagSvg] = useState(false); // 箭头方向
  const [suspendDownFlag, setSuspendDownFlag] = useState(true); // 总向下暂停
  const [suspendUpFlag, setSuspendUpFlag] = useState(false); // 总向下暂停
  const [count, setCount] = useState(2); // 倒计时
  const [countText, setCountText] = useState(); // 倒计时文案
  const [curtainArr, setCurtainArr] = useState([]); // 窗帘数据
  const [preTime, setPreTime] = useState(Date.now());
  const [curtainText, setCurtainText] = useState('');
  function handleExpend() {
    setFlagSvg(!flagSvg);
  }
  const changePreTime = useCallback((val) => {
    setPreTime(val);
  });
  const changeCurtainTex = useCallback((val) => {
    setCurtainText(val);
  });
  useEffect(() => {
    const params = {
      criteria: {
        projectId: projectId,
        spaceId: spaceId,
        type: 0,
      },
      orders: [{ column: 'sortNum', asc: true }],
    };
    getObjectDataEqpGroupHttp(params).then((res) => {
      let arr = res.content || [];
      if (arr.length > 1) {
        setIsMore(true);
      } else {
        setIsMore(false);
      }
      setCurtainArr(arr);
    });
  }, []);

  return (
    <div className={commonStyles.box}>
      <div className={commonStyles.content}>
        <div className={commonStyles.env}>
          <div className={commonStyles.envLeft}>
            <span className={commonStyles.eqTitle}>{isMore ? '窗帘' : curtainArr[0]?.name}</span>
            <div className={`${commonStyles.eqStatus} ${commonStyles.pdt10}`}>
              <span>{curtainText}</span>
            </div>
            {isMore && (
              <div className={commonStyles.showAll} onClick={handleExpend}>
                <img className={commonStyles.showImg} src={flagSvg ? expend_up : expend_down}></img>
                <div className={commonStyles.showAllText}>显示全部</div>
              </div>
            )}
          </div>
          <div className={commonStyles.envRight}>
            <img className={commonStyles.roomEqImg} src={curtain_open_row} />
          </div>
          {!flagSvg && (
            <div className={commonStyles.eqCirculBtn}>
              <CurtainBtn
                id=""
                isTotal={true}
                preTime={preTime}
                changePreTime={changePreTime}
                changeCurtainTex={changeCurtainTex}
                curtainArr={curtainArr}
                projectId={projectId}
              ></CurtainBtn>
            </div>
          )}
        </div>
      </div>
      {curtainArr.map((item, idx) => {
        if (flagSvg) {
          return (
            <div className={`${styles.lampChild} ${commonStyles.flexBetween}`} key={item.id}>
              <div className={commonStyles.eqTitle}>{item.name}</div>
              <div className={commonStyles.dsflex}>
                <CurtainBtn
                  id={item.id}
                  isTotal={false}
                  preTime={preTime}
                  changePreTime={changePreTime}
                  changeCurtainTex={changeCurtainTex}
                  curtainArr={curtainArr}
                  projectId={projectId}
                ></CurtainBtn>
              </div>
            </div>
          );
        }
      })}
    </div>
  );
};
