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 { changeManualTempHttp } from '@/services/sagacare_service/equipment';
import { message } from 'antd';
import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
import cx from 'classnames';

export default ({ projectId, hideModal, changeDeviceObj, deviceObj, minValue, maxValue }) => {
  const {
    up_Arrow,
    down_Arrow,
    openair,
    air_close,
    wind_small,
    wind_big,
    wind_auto,
    airsunred,
    airsunblack,
    aircoldblue,
    aircoldblack,
    aircloudgreen,
    aircloudblack,
    icon_adjust,
  } = equipImageMap;

  const [disabled, setDisabled] = useState(false);
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });
  const windGearArr = [0, 1, 2, 3]; // 风量3/5个档位
  // 滑动停止
  const mouseEnd = (obj) => {
    deviceObj.tempSet2 = obj.value;
    deviceObj.nowTemp2 = obj.value;

    changeOneAir('temp', obj.value);
  };
  // useEffect(() => {
  //   console.log('deviceObj', deviceObj);
  // }, [deviceObj]);

  function changeOneAir(btnType, value) {
    if (!deviceObj.open) return;
    var deviceObjCopy = { ...deviceObj };
    var nowairGear = deviceObj.airGear2;
    var nowAutoGear = deviceObj.isAutoGear2;
    if (btnType == 'gear' && value == 'windLow') {
      //降挡
      if (nowairGear > 1) {
        nowairGear = nowairGear - 1;
        nowAutoGear = 0;
        deviceObjCopy.airGear2 = nowairGear;
        deviceObjCopy.isAutoGear2 = nowAutoGear;
      } else {
        return;
      }
    }
    if (btnType == 'gear' && value == 'windUp') {
      //升档
      if (nowairGear < 3) {
        nowairGear = nowairGear + 1;
        nowAutoGear = 0;
        deviceObjCopy.airGear2 = nowairGear;
        deviceObjCopy.isAutoGear2 = nowAutoGear;
      } else {
        return;
      }
    }

    if (btnType == 'gear' && value == 'auto') {
      nowAutoGear = deviceObj.isAutoGear2 == 1 ? 0 : 1;
      deviceObjCopy.isAutoGear2 = nowAutoGear;
    }
    var rval;
    if (btnType == 'mode') {
      deviceObjCopy.airMode2 = value;
      rval = value;
    }
    if (btnType == 'gear') {
      rval = nowAutoGear == 1 ? 4 : nowairGear;
    }
    if (btnType == 'temp') {
      rval = value;
    }
    var nowModel = deviceObj.allModel.find((item) => {
      return item.id == btnType;
    });

    const paramArr = [
      {
        id: deviceObj.id,
        code: nowModel.code,
        value: rval,
      },
    ];

    //  下达指令
    changeManualTempHttp(paramArr)
      .then((res) => {
        changeDeviceObj(deviceObjCopy);
      })
      .catch(() => {
        //wx.hideLoading();
      });
  }

  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}>{deviceObj.name}</div>
        <div className={styles.modalCont}>
          {deviceObj?.boundPoint?.tempSetBound && (
            <div className={styles.sliderItem}>
              <Slider
                onlyLine={true}
                typeValue={deviceObj.nowTemp2 || minValue}
                minValue={minValue}
                maxValue={maxValue}
                type={'oneair'}
                typeName={'温度调节'}
                silderMouseEnd={mouseEnd}
              ></Slider>
            </div>
          )}
          {deviceObj?.boundPoint?.gearSetBound && (
            <div className={cx(styles.airControlItem)}>
              <div className={styles.airControlItemBox}>
                <div className={cx(styles.airCommonText)}>风速</div>
                <div className={cx(styles.envnumCommon, styles.airEnvnumComon)}>
                  {windGearArr.map(function (item, index) {
                    return (
                      <span
                        className={cx(styles.envnumCommonWind, {
                          [styles.windBlack]: item == deviceObj.airGear2,
                        })}
                        key={index + 'wind'}
                      >
                        {item}
                      </span>
                    );
                  })}
                </div>
              </div>
              <div className={styles.airCommonSwitch}>
                <div>
                  <div
                    className={cx(styles.switch, {
                      [styles.disabled]: deviceObj.airGear2 <= 1 || !deviceObj.open,
                    })}
                    onClick={() => {
                      changeOneAir('gear', 'windLow');
                    }}
                  >
                    <img className={styles.wimg} src={wind_small} />
                  </div>
                  <div className={styles.switchName}>调小</div>
                </div>
                <div>
                  <div
                    className={cx(styles.switch, {
                      [styles.disabled]: deviceObj.airGear2 >= 3 || !deviceObj.open,
                    })}
                    onClick={() => {
                      changeOneAir('gear', 'windUp');
                    }}
                  >
                    <img className={styles.wimg} src={wind_big} />
                  </div>
                  <div className={styles.switchName}>调大</div>
                </div>
                <div>
                  <div
                    className={cx(styles.switch, {
                      [styles.yell]: deviceObj.isAutoGear2 == 1,
                      [styles.disabled]: !deviceObj.open,
                    })}
                    onClick={() => {
                      changeOneAir('gear', 'auto');
                    }}
                  >
                    <img className={styles.wimg} src={wind_auto} />
                  </div>
                  <div className={styles.switchName}>自动</div>
                </div>
              </div>
            </div>
          )}
          {deviceObj?.boundPoint?.modeSetBound && (
            <div className={cx(styles.airControlItem)}>
              <div className={styles.airControlItemBox}>
                <div className={cx(styles.airCommonText)}>模式</div>
                <div className={cx(styles.envnumCommon, styles.airEnvnumComon)}>
                  {deviceObj.airMode2 == 2 ? '制热' : deviceObj.airMode2 == 1 ? '制冷' : '通风'}
                </div>
              </div>
              <div className={styles.airCommonSwitch}>
                <div>
                  <div
                    className={cx(styles.switch, {
                      [styles.yell]: deviceObj.airMode2 == 1,
                      [styles.disabled]: !deviceObj.open,
                    })}
                    onClick={() => {
                      changeOneAir('mode', 1);
                    }}
                  >
                    <img className={styles.wimg} src={aircoldblack} />
                  </div>
                  <div className={styles.switchName}>制冷</div>
                </div>
                <div>
                  <div
                    className={cx(styles.switch, {
                      [styles.yell]: deviceObj.airMode2 == 2,
                      [styles.disabled]: !deviceObj.open,
                    })}
                    onClick={() => {
                      changeOneAir('mode', 2);
                    }}
                  >
                    <img className={styles.wimg} src={airsunblack} />
                  </div>
                  <div className={styles.switchName}>制热</div>
                </div>
                <div>
                  <div
                    className={cx(styles.switch, {
                      [styles.yell]: deviceObj.airMode2 == 3,
                      [styles.disabled]: !deviceObj.open,
                    })}
                    onClick={() => {
                      changeOneAir('mode', 3);
                    }}
                  >
                    <img className={styles.wimg} src={aircloudblack} />
                  </div>
                  <div className={styles.switchName}>通风</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
};
