import React, { Component } from 'react';
// import { Button } from 'antd'
import { WordsBtn, getImageUrl } from 'educoder';
import RealNameCertificationModal from '../modal/RealNameCertificationModal'
import '../../courses/css/Courses.css'
import {CNotificationHOC} from '../../courses/common/CNotificationHOC'


class AccountCertification extends Component {
  constructor(props){
    super(props);
    this.state={
      certification:1
    }
  }

  showRealNameCertificationModal = (index) => {
    this.setState({
      certification:index,
    })
    this.realNameCertificationModal.setVisible(true)
  }
    render() {
      let {certification}=this.state
      let {basicInfo} = this.props;
      return (
        <div>
          {this.state.certification===1?<RealNameCertificationModal ref="realNameCertificationModal" {...this.props}
              wrappedComponentRef={(form) => this.realNameCertificationModal = form} certification={certification}
          ></RealNameCertificationModal>:<RealNameCertificationModal ref="realNameCertificationModal" {...this.props}
          wrappedComponentRef={(form) => this.realNameCertificationModal = form} certification={certification}
      ></RealNameCertificationModal>}
          <div className="basicForm">
            <style>{`
                .basicForm .title {
                  font-size: 16px;
                  padding-left: 30px;
                  margin-bottom: 10px;
                }
              .flexTable {
                display: flex;
                flex-direction: column;
              }
              .flexRow {
                display: flex;
              }
                .flexRow .name {
                  margin-left: 46px;
                }
                .flexRow .description {
                  margin-left: 30px;
                  flex: 1;
                  color: #CDCDCD;
                }
                .flexRow .status {
                  width: 100px;
                  color: #28AC7F;
                }
            `}</style>
            <div className="title">认证信息</div>
            <div className="flexTable">
              <div className="flexRow lineh-20 mb20">
                <div className="name">实名认证</div>
                <div className="description">有些课程需要实名认证才能加入哟，还能获得500金币的奖励~ </div>
                <div className="status">
                  {
                    basicInfo && basicInfo.authentication =="uncertified" ?
                    <WordsBtn style="blue" className="borderBottom" onClick={()=>this.showRealNameCertificationModal(1)} >立即认证</WordsBtn>:
                    basicInfo && basicInfo.authentication =="applying" ? <span style={{color: '#FF6800'}}>待审核</span>:
                    <span><i className="iconfont icon-wancheng color-green font-16 mr3"></i>已认证</span>
                  }
                </div>
              </div>

              <div className="flexRow lineh-20">
                <div className="name">职业认证</div>
                <div className="description">教师认证完毕之后，可创建课堂、发布实训、免金币查看所有实训答案..  </div>
                <div className="status">
                  {
                    basicInfo && basicInfo.professional_certification =="uncertified" ?
                    <WordsBtn style="blue" className="borderBottom" onClick={()=>this.showRealNameCertificationModal(2)} >立即认证</WordsBtn>:
                    basicInfo && basicInfo.professional_certification =="applying" ? <span style={{color: '#FF6800'}}>待审核</span>:
                    <span><i className="iconfont icon-wancheng color-green font-16 mr3"></i>已认证</span>
                  }
                </div>
              </div>  
            </div>
          </div>
          <div style={{color: '#989898', marginLeft: '20px'}}>* 我们确保你所提供的信息均处于严格保密状态，不会泄露</div>
        </div>
      );
    }
}

export default AccountCertification;