import React , { useEffect , useState } from 'react';
import Modals from '../PublicModal/Index';
import { Button } from 'antd';
import axios from 'axios';

import ProfileImg from './images/profile.png';
import './Index.scss';

function ProfileModal({visible,onCancel,history}) {
  const [ modalVis , setModalVis ] = useState(visible);
  const [ addMemberCheck , setAddMemberCheck ] = useState(false);

  useEffect(()=>{
    axios.interceptors.response.use((response) => {
      if (response && (response.data.status === 411 || response.data.status === 412)) {
        setModalVis(true);
        if(response.data.status === 412){
          setAddMemberCheck(true);
        }
      }
      return response;
      }, (error) => {
    });
  },[])

  useEffect(()=>{
    setModalVis(visible);
  },[visible])
  
  function onOk(){
    onCancel();
    setModalVis(false);
    setTimeout(function(){
      window.open(`/settings/profile`,"_blank");
    },200)
  }

  function onNo() {
    onCancel();
    setModalVis(false);
  }

  return(
    <Modals 
      title="完善资料" 
      onCancel={onNo} 
      visible={modalVis}
      btn={
        addMemberCheck?
        <div>
          <Button type={'primary'} size={"large"} onClick={onNo}>好的</Button>
        </div>
        :
        <div>
          <Button size={"large"} onClick={onNo}>暂不补充</Button>
          <Button type={'primary'} size={"large"} onClick={onOk}>好的</Button>
        </div>
      }  
    >
      <div className="contents">
        <img src={ProfileImg} alt=""/> 
        {
          addMemberCheck ?
          <p>目标用户个人资料不完整，需提醒目标用户补充资料后以进行后续操作</p>
          :
          <p>您目前的个人资料不完整，需要补充资料以进行后续操作。是否前往补充个人信息？</p>
        }
      </div>
    </Modals>
  )
}
export default ProfileModal;