// 父组件
import React, { useState } from "react";
import ShowData from './ShowData'

export default function Page() {
  // 声明一堆数据
  const [show, setshow] = useState(false)
  const [title, settitle] = useState('')
  const [data, setdata] = useState(null)
  const [userInfo, setuserInfo] = useState(null)
  const [isOwner, setisOwner] = useState(null)

  // 弹框打开时传入数据
  function showData(_title, _data, _userInfo, _isOwner) {
    settitle(_title)
    setdata(_data)
    setuserInfo(_userInfo)
    setisOwner(_isOwner)
    setshow(true)
  }

  // 弹框关闭
  function onClose(success) {
    setshow(false)
  }

  return (
    <div>
      <button onClick={showData}>展示弹框</button>
      <ShowData
        show={show}
        onClose={onClose}
        title={title}
        data={data}
        userInfo={userInfo}
        isOwner={isOwner}
      />
    </div>
  )
}


// 封装弹框组件
import { Modal } from 'antd'

export default function ShowData(show, onClose, title, data, userInfo, isOwner) {
  return (
    <Modal
      title={title}
      open={show}
      onCancel={() => onClose(false)}>
        展示的内容，可能用到props传进来的数据们
    </Modal>
  )
}

// 父组件
import React from "react";
import useShowData from './useShowData'

export default function Page() {
  const [show, ShowDataModal] =  useShowData()

  // 弹框打开
  function showData(title, data, userInfo, isOwner) {
    // 通过调用方法打开弹框，不用再声明这些变量了
    show(onClose, title, data, userInfo, isOwner)
  }

  // 弹框关闭
  function onClose(success) {
    // 通过判断success，来判断弹框想做的时完成了，还是说只是关闭的弹框，自定义
  }

  return (
    <div>
      <button onClick={showData}>展示弹框</button>
      {/* 此处需要把dom放进来 */}
      {ShowDataModal}
    </div>
  )
}

// 封装弹框组件
import React, { useState, useRef } from "react";
import { Modal } from 'antd'

export default function useShowData() {
  // 同样声明一堆数据，这些都是此组件要用到的
  const [show, setshow] = useState(false)
  const [title, settitle] = useState('')
  const [data, setdata] = useState(null)
  const [userInfo, setuserInfo] = useState(null)
  const [isOwner, setisOwner] = useState(null)
  // 使用 useRef 声明，这个方法会在弹框关闭时调用
  const onClose = useRef(null)
  
  // 展示弹框
  function showModal(_onClose, _title, _data, _userInfo, _isOwner) {
    // 从传入的参数中依次读取赋值，可以更友好的做值的检测处理
    settitle(_title)
    setdata(_data)
    setuserInfo(_userInfo)
    setisOwner(_isOwner)
    // 赋值弹框被关闭的方法
    onClose.current = _onClose
    setshow(true)
  }

  return [showModal, (
    <Modal
      title={title}
      open={show}
      onCancel={() => onClose.current(false)}>
        展示的内容，可能用到props传进来的数据们
    </Modal>
  )]
}