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';
import HeatButton from './heatButton';
import CurtainModal from './curtainModal';

const {
  curtain_close,
  curtain_down,
  curtain_horizon,
  curtain_open,
  curtain_stop,
  curtain_up,
  curtain_vertical,
} = equipImageMap; //expend_down, expend_up

export default ({ spaceId, projectId }) => {
  const [isVertical, setIsVertical] = useState(true); // 是不是垂直窗帘
  const [isMore, setIsMore] = useState(false); // 可以展开
  const [isAll, setIsAll] = useState(true); // 箭头方向
  const [modalFlag, setModalFlag] = 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('');
  const [modalObj, setModalObj] = useState({});

  function handleExpend() {
    setIsAll(!isAll);
  }
  const changePreTime = useCallback((val) => {
    setPreTime(val);
  });
  const changeCurtainTex = useCallback((val) => {
    setCurtainText(val);
  });
  const queryCurtain = () => {
    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);
    });
  };
  useEffect(() => {
    queryCurtain();
    return () => {
      //debugger;
      setCurtainArr([]);
    };
  }, [spaceId]);

  const showModal = useCallback((item) => {
    setModalFlag(true);
    setModalObj(item || {});
  }, []);
  const hideModal = useCallback(() => {
    setModalFlag(false);
  }, []);
  const changeCurtainItem = useCallback(() => {
    queryCurtain();
    // setCurtainArr((arr) => {
    //   var arr2 = arr.map((item) => {
    //     if (item.id == modalObj.id) {
    //       item.openValue = value;
    //     }
    //     return item;
    //   });
    //   return arr2;
    // });
  });
  return (
    <div className={commonStyles.box}>
      <div className={commonStyles.content}>
        <div className={commonStyles.env}>
          <div className={commonStyles.envLeft}>
            <span className={commonStyles.eqTitle}>
              {curtainArr.length > 1 ? '窗帘' : curtainArr?.[0]?.name}
            </span>
            <div className={`${commonStyles.eqStatus} ${commonStyles.pdt10}`}>
              <span>{curtainText}</span>
            </div>
            {curtainArr.length > 1 && (
              <div className={styles.showAll}>
                <HeatButton changeIsAll={handleExpend} isAll={isAll}></HeatButton>
              </div>
            )}
          </div>
          <div className={commonStyles.envRight}>
            <img
              src={
                curtainArr?.[0]?.equipmentType == 1 ||
                curtainArr?.[0]?.equipmentType == 2 ||
                curtainArr?.[0]?.equipmentType == 3
                  ? curtain_horizon
                  : curtain_vertical
              }
            />
          </div>
          {curtainArr.length == 1 && (
            <div className={styles.eqCirculBtn}>
              <CurtainBtn
                citem={curtainArr?.[0]}
                isVertical={isVertical}
                isTotal={false}
                showModal={showModal}
                preTime={preTime}
                changePreTime={changePreTime}
                changeCurtainTex={changeCurtainTex}
                curtainArr={curtainArr}
                projectId={projectId}
              ></CurtainBtn>
            </div>
          )}
        </div>
      </div>
      {!isAll && (
        <>
          {curtainArr.map((item, idx) => {
            return (
              <div className={`${styles.lampChild} ${commonStyles.flexBetween}`} key={item.id}>
                <div className={styles.leftflex}>
                  <div className={styles.eqTitle}>{item.name}</div>
                  {item?.isOpenSet == 1 && (
                    <div className={styles.opening}>开度{item.openValue}%</div>
                  )}
                </div>
                <div>
                  <CurtainBtn
                    citem={item}
                    isVertical={isVertical}
                    isTotal={false}
                    showModal={showModal}
                    preTime={preTime}
                    changePreTime={changePreTime}
                    changeCurtainTex={changeCurtainTex}
                    curtainArr={curtainArr}
                    projectId={projectId}
                  ></CurtainBtn>
                </div>
              </div>
            );
          })}
        </>
      )}
      {isAll && (
        <div className={styles.controlDiv}>
          <CurtainBtn
            citem={curtainArr?.[0]}
            isVertical={isVertical}
            isTotal={true}
            preTime={preTime}
            changePreTime={changePreTime}
            changeCurtainTex={changeCurtainTex}
            curtainArr={curtainArr}
            showModal={showModal}
            projectId={projectId}
          ></CurtainBtn>
        </div>
      )}
      {modalFlag && (
        <CurtainModal
          hideModal={hideModal}
          modalObj={modalObj}
          isVertical={isVertical}
          preTime={preTime}
          changePreTime={changePreTime}
          changeCurtainTex={changeCurtainTex}
          curtainArr={curtainArr}
          projectId={projectId}
          isAll={isAll}
          changeCurtainItem={changeCurtainItem}
        ></CurtainModal>
      )}
    </div>
  );
};
