import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { Modal } from 'antd';
import styles from './index.less';
import Draggable from 'react-draggable';
import Slider from '../../Slider';
import Icon from '@/tenants-ui/SgIcon';
import { setEquipeHttp } from '@/services/sagacare_service/equipment';
import CurtainBtn from '../curtainBtn';
import { message } from 'antd';

export default ({
  isAll,
  hideModal,
  modalObj,
  isVertical,
  changeCurtainTex,
  curtainArr,
  projectId,
  changeCurtainItem,
}) => {
  const [startTime, setStartTime] = useState(0);
  const [renew, setRenew] = useState(true);
  const [disabled, setDisabled] = useState(false);
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });

  // 下发开度指令
  const setCurtainOrder = (vobj) => {
    var paramsArr = [];
    if (isAll) {
      curtainArr.forEach((item) => {
        paramsArr.push({
          code: 'EquipOpeningSet',
          value: vobj.value,
          id: item.equipId,
        });
      });
    } else {
      paramsArr.push({
        code: 'EquipOpeningSet',
        value: vobj.value,
        id: modalObj.equipId,
      });
    }

    changeCurtainItem();
    setEquipeHttp(paramsArr).then((res) => {
      // getHeat(); //todo
      message.success('指令已经下发');
    });
  };

  // // 滑动
  // const silderVal = (obj) => {
  //   const endTime = Date.parse(new Date());
  //   const dx = endTime - startTime;
  //   if (dx === 1000) {
  //     setStartTime(endTime);
  //     setCurtainOrder(obj);
  //   }
  // };
  // // 滑动开始
  // const mouseStart = () => {
  //   let nowTime = Date.parse(new Date());
  //   setStartTime(nowTime);
  //   setRenew(false);
  // };

  // 滑动停止
  const mouseEnd = (obj) => {
    setCurtainOrder(obj);
  };

  const draggleRef = useRef(null);
  const onStart = (_event, uiData) => {
    _event.stopPropagation();
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };

  return (
    <Modal
      open
      mask={false}
      centered
      footer={null}
      style={{
        width: '100%',
      }}
      modalRender={(modal) => (
        <Draggable
          disabled={disabled}
          bounds={bounds}
          onStart={(event, uiData) => onStart(event, uiData)}
        >
          <div ref={draggleRef}>{modal}</div>
        </Draggable>
      )}
      closable={false}
    >
      <div
        className={styles.heatModal}
        onClick={(event) => {
          event.stopPropagation();
          event.preventDefault();
        }}
        onMouseDown={(event) => {
          event.stopPropagation();
          event.preventDefault();
        }}
      >
        <div
          className={styles.closeIcon}
          onClick={(event) => {
            hideModal();
          }}
        >
          <Icon type="close" />
        </div>
        <div className={styles.modalTitle}>{isAll ? '窗帘' : modalObj.name}</div>
        <div className={styles.modalCont}>
          <Slider
            onlyLine={false}
            type={'curtain'}
            typeValue={0}
            typeName={'设定开度'}
            silderMouseEnd={mouseEnd}
          ></Slider>
          <CurtainBtn
            modalButton={true}
            citem={modalObj}
            isVertical={isVertical}
            isTotal={isAll}
            changeCurtainTex={changeCurtainTex}
            curtainArr={curtainArr}
            projectId={projectId}
          ></CurtainBtn>
        </div>
      </div>
    </Modal>
  );
};
