import React , { useEffect , useState } from 'react';
import Modals from '../PublicModal/Index';
import { Button } from 'antd';
import cookie from 'react-cookies';
import ProfileImg from './images/profile.png';
import './Index.scss';

function SupplyPhoneModal({visible}) {
  const [ modalVis , setModalVis ] = useState(visible);

  useEffect(()=>{
    setModalVis(visible);
    if(visible){
      cookie.remove('supplyphone');
    }
  },[visible])
  
  function onOk(){
    setModalVis(false);
    setTimeout(function(){
      window.open(`/settings/phone`,"_blank");
    },200)
  }

  function onNo() {
    setModalVis(false);
  }

  return(
    <Modals 
      title="您的账号尚未绑定手机号码" 
      onCancel={onNo} 
      visible={modalVis}
      btn={
        <div>
          <Button size={"large"} onClick={onNo}>再想想</Button>
          <Button type={'primary'} size={"large"} onClick={onOk}>马上绑定</Button>
        </div>
      }  
    >
      <div className="contents">
        <img src={ProfileImg} alt=""/> 
        <p>请绑定手机号以获取平台更多短信服务及找回密码服务</p>
      </div>
    </Modals>
  )
}
export default SupplyPhoneModal;