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

export default ({ hideColour, colourObj }) => {
  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,
  });

  // useEffect(() => {
  //   console.log('colourObj', colourObj);
  // }, [colourObj]);

  // 下发色温指令
  const setHeatOrder = (vobj) => {
    var paramsArr = [];
    paramsArr.push({
      id: colourObj.id,
      code: colourObj.tempSetCode,
      value: vobj.value,
    });
    console.log('每个温度请求参数', paramsArr);
    // changeManualTempHttp(paramsArr).then((res) => {
    //   getHeat(); //todo
    // });
  };

  // 滑动
  const silderVal = (obj) => {
    const endTime = Date.parse(new Date());
    const dx = endTime - startTime;
    if (dx === 1000) {
      setStartTime(endTime);
      setHeatOrder(obj);
    }
  };
  // 滑动开始
  const mouseStart = () => {
    let nowTime = Date.parse(new Date());
    setStartTime(nowTime);
    setRenew(false);
  };
  // 滑动停止
  const mouseEnd = (obj) => {
    setHeatOrder(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="heatModal">
        <div
          className="closeIcon"
          onClick={() => {
            hideColour();
          }}
        >
          <Icon type="close" />
        </div>
        <div className="modalTitle">{colourObj.localName}</div>
        <div className="modalCont">
          <Slider
            onlyLine={true}
            typeValue={colourObj.tempSet || colourObj.minTempSet}
            minValue={colourObj.minTempSet}
            maxValue={colourObj.maxTempSet}
            type={'underfloorHeat'}
            silderPercentValue={silderVal}
            silderMouseEnd={mouseEnd}
            silderMouseStart={mouseStart}
          ></Slider>
        </div>
      </div>
    </Modal>
  );
};
