import React, { memo, useEffect, useState } from 'react';
import { Button, Modal } from 'antd';
import qqChat from  '../../glcc/img/qqChat.png';
import bg from './glcc.png';
import './index.scss';



function QzModal() {

  const [visible, setVisible] = useState(false);

  useEffect(() => {
    let qzModalTime = localStorage.qzModalTime;
    let nowTime = new Date().getTime();
    if (qzModalTime) {
      if (nowTime - qzModalTime > 24 * 3600 * 1000) {
        // 延时展示，保证渲染modal不会白屏
        setTimeout(()=>{setVisible(true);},800)
        localStorage.setItem('qzModalTime', nowTime);
      }
    } else {
      setTimeout(()=>{setVisible(true);},800)
      localStorage.setItem('qzModalTime', nowTime);
    }
  }, [])

  return (
    <Modal
      title="Basic Modal"
      visible={visible}
      onCancel={() => { setVisible(false) }}
      footer={null}
      className='qzModal'
      width='900px'
      maskClosable={false}
      centered
    >
      {/* <img src={window.location.href.indexOf('osredm.jk')>-1?bg_local: bg} /> */}
      <img className="big_picture" src={bg} />
      <img className="qqchat" src={qqChat} />
      <a target="_blank" href="/glcc" className="qz-btn"></a>
    </Modal>
  )
}

export default memo(QzModal);