import { Button, Result } from 'antd'
import React, { ErrorInfo } from 'react'

export class ErrorBoundary extends React.Component<
  Record<string, any>,
  { hasError: boolean; errorInfo: string }
> {
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, errorInfo: error.message }
  }

  componentDidCatch(error: any, errorInfo: ErrorInfo) {
    // You can also log the error to an error reporting service
    // eslint-disable-next-line no-console
    console.log(error, errorInfo)

  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <Result
          style={{
            height: '100%',
            background: '#fff',
          }}
          title="错误信息"
          extra={
            <>
              <div
                style={{
                  maxWidth: 620,
                  textAlign: 'start',
                  backgroundColor: 'rgba(255,229,100,0.3)',
                  borderInlineStartColor: '#ffe564',
                  borderInlineStartWidth: '9px',
                  borderInlineStartStyle: 'solid',
                  padding: '20px 45px 20px 26px',
                  margin: 'auto',
                  marginBlockEnd: '30px',
                  marginBlockStart: '20px',
                }}
              >
                <p>{this.state.errorInfo}</p>
              </div>
              <Button
                danger
                type="primary"
                onClick={() => {
                  window.location.reload()
                }}
              >
                刷新页面
              </Button>
            </>
          }
        />
      )
    }
    return this.props.children
  }

  state = { hasError: false, errorInfo: '' }
}