import React, {useRef, useLayoutEffect} from 'react'

type Props = {
  type: 'userName' | 'departmentName'
  openid: string | number
}
// 企业微信open——data 组件
const WWOpenDataComponent: React.FC<Props> = ({type, openid}) => {
  const ref = useRef(null)
  const GWindow = window as any
  useLayoutEffect(() => {
    if (GWindow.WWOpenData && GWindow?.WWOpenData?.bind) {
      GWindow.WWOpenData.bind(ref.current)
      GWindow.WWOpenData.bindAll(document.querySelectorAll('ww-open-data'))
    }
  }, [GWindow.WWOpenData])

  if (process.env.NODE_ENV === 'development') return <span>{openid}</span>
  return GWindow.WWOpenData ? (
    <ww-open-data openid={openid} ref={ref} type={type} />
  ) : (
    <span>{openid}</span>
  )
}

export default WWOpenDataComponent