import React, {useState, useRef, useEffect, useCallback} from 'react'
import { useModel } from 'umi'
import { Button, Spin } from 'antd';
import QRCode from '@/components/QRCode'
import styles from './style.less';

export default (props) => {
  const { initialState } = useModel('@@initialState');
  const [isLoading, setLoading] = useState(false);

  const qrcodeRef = useRef()

  const downloadQrcode = useCallback(() => {
    if (qrcodeRef.current) {
      qrcodeRef.current.download();
    }
  }, [])

  return isLoading ?
    <Spin
      size="small"
      style={{
        marginLeft: 8,
        marginRight: 8,
      }}
    />
  : (
      <div className={styles.qrcodebox}>
        <p>疫情监测结果表入口</p>
        <QRCode ref={qrcodeRef} width={200} content={initialState.report_url} />
        <p><Button onClick={downloadQrcode}>下载</Button></p>
      </div>
    )
}
