import React, { useState } from 'react'
import { Modal } from 'antd'

const Drag = (props) => {

  const [style, setStyle] = useState({ left: 0, top: 100 })

  const inWindow = (left, top, startPosX, startPosY) => {
    const H = document.body.clientHeight;
    const W = document.body.clientWidth;
    if (
      (left < 20 && startPosX > left) ||
      (left > W - 20 && startPosX < left) ||
      (top < 20 && startPosY > top) ||
      (top > H - 20 && startPosY < top)
    ) {
      document.body.onmousemove = null;
      document.body.onmouseup = null;
      return false;
    }
    return true;
  }

  const onMouseDown = (e) => {
    const startPosX = e.clientX;
    const startPosY = e.clientY;
    document.body.onmousemove = (e) => {
      const left = e.clientX - startPosX + style.left;
      const top = e.clientY - startPosY + style.top;
      if (inWindow(e.clientX, e.clientY, startPosX, startPosY)) {
        setStyle({ left, top })
      }
    }; // 鼠标放开时去掉移动事件
    document.body.onmouseup = function () {
      document.body.onmousemove = null;
    }
  }

  return (
    <Modal
      getContainer={false}
      {...props}
      style={style}
      title={
        <div style={{ width: '100%', cursor: 'move' }} onMouseDown={onMouseDown}>
          {props.title}
        </div>
      }
    >
      {
        props.children
      }
    </Modal>
  )

}

export default Drag