import React from 'react'
import { Route, Switch, useParams } from 'react-router-dom'

import { Spin } from 'antd'

// 图片放大组件
const PictureAmplifierwithRoute: React.FC = () => {
  const { PicLink }: { PicLink: string } = useParams()
  return (
    <div id={PicLink} style={{ width: '100%' }}>
      <img src={decodeURIComponent(PicLink)} style={{ width: '100%' }} />
    </div>
  )
}

const PictureAmplifier: React.FC = () => {
  return (
    <Switch>
      <React.Suspense
        fallback={
          <div style={{ margin: '50% auto', textAlign: 'center' }}>
            <Spin />
          </div>
        }
      >
        <Route key={'PicAmplifier'} exact path={['/PicAmplifier/:PicLink']} component={PictureAmplifierwithRoute} />
      </React.Suspense>
    </Switch>
  )
}
export default PictureAmplifier
