import React, { Component } from 'react';


import { getImageUrl, } from "educoder";

import './TPMright.css';

import { Progress, Tooltip } from 'antd';


class TPMRightSection extends Component {
  constructor(props) {
    super(props)
    this.state = {

      TPMRightSection: false,
      clickNewsubscripttype: false
    }
  }

  clickNewsubscript = (val) => {
    if (val === 0) {
      this.setState({
        TPMRightSection: true,
        clickNewsubscripttype: true
      })
    } else {
      this.setState({
        TPMRightSection: false,
        clickNewsubscripttype: false
      })
    }

  }

  render() {
    let { TPMRightSection, clickNewsubscripttype } = this.state;
    let { TPMRightSectionData } = this.props
    let Progresssum;
    if (TPMRightSectionData && TPMRightSectionData.complete_count != null) {
      Progresssum = (parseInt(TPMRightSectionData && TPMRightSectionData.complete_count) / parseInt(TPMRightSectionData && TPMRightSectionData.challenge_count)) * 100;
    }

    return (
      <div>
        <style>
          {
            `
         .altimgs{
             border-radius: 4px;
              width: 100px;
              height: 60px;
          }
                                              
                                  `
          }
        </style>
        {
          TPMRightSectionData === undefined ? "" :
            <div>
              <div className="edu-back-white pd302020zuoze mb10">
                <p className="font-16 mb20"><i className={"iconfont icon-chuangjianzhe1 audit_situationactive font-14"}></i>  创建者</p>
                <div className="df">
                  <a
                    href={TPMRightSectionData === undefined ? "" : TPMRightSectionData.creator === undefined ? "" : `/${TPMRightSectionData.creator.login}/classrooms`}>
                    <img alt="头像" className="radius mr10" height="36"
                      src={getImageUrl(TPMRightSectionData === undefined ? "" : TPMRightSectionData.creator === undefined ? "" : 'images/' + TPMRightSectionData.creator.image_url + "?1532489442")}
                      width="36" />
                  </a>
                  <div className="flex1">

                    <div className="creatorname  sortinxdirection space-between">
                      <div className={"creatornamelist color-grey-3"}>
                        {TPMRightSectionData === undefined ? "" : TPMRightSectionData.creator === undefined ? "" : TPMRightSectionData.creator.name}
                      </div>
                      <div className={"creatornamelist width80center"}>
                        <span className={"color888hezuo  font-14"}>共发布实训</span> <span className={"color-grey-3"}>{TPMRightSectionData.user_shixuns_count}</span> <span className={"color888hezuo"}>个</span>
                      </div>
                    </div>

                  </div>
                </div>
              </div>

              {this.props && this.props.is_jupyter === true ? "" : this.props && this.props.status > 1 ? <div className="edu-back-white padd252020px relative borderbottomf4">
                <div className="font-16 mb5">
                  <span><i className={"iconfont icon-jilu1 audit_situationactive font-14"}></i>  学习统计</span>
                  <span className={"sortinxdirection space-between fr"}>
                    <span className="color888hezuo font-14">已完成 {TPMRightSectionData && TPMRightSectionData.complete_count === null ? 0 : TPMRightSectionData && TPMRightSectionData.complete_count} 关 / 共 {TPMRightSectionData && TPMRightSectionData.challenge_count} 关</span>
                  </span>

                </div>

                <Progress percent={Progresssum} showInfo={false} status="active" strokeColor={{
                  '0%': '#29BD8B',
                  '100%': '#29BD8B',
                }} />
              </div> : ""}
              {
                TPMRightSectionData === undefined ? "" : TPMRightSectionData.tags === undefined ? "" : TPMRightSectionData.tags.length === 0 ? "" :
                  <div className="edu-back-white padd252020px mb10 relative">
                    <p className="font-16 mb20">
                      <span><i className={"iconfont icon-biaoqian2 audit_situationactive font-14"}></i>  技能标签</span>
                      <span className={"sortinxdirection space-between fr"}>
                        <span className="color888hezuo  font-14">已获得 {TPMRightSectionData && TPMRightSectionData.user_tag_count} 个 / 共 {TPMRightSectionData && TPMRightSectionData.tag_count} 个</span>
                      </span>

                    </p>
                    <div className={TPMRightSection === false ? "newedbox newedboxheight" : "newedbox newminheight"}>
                      <div className="clearfix" id="boxheight">
                        {TPMRightSectionData.tags.map((item, key) => {
                          return (
                            <span className={item.status === false ? "newedu-filter-btn fl" : "edu-filter-btn29BD8B fl"}
                              style={{ display: item.tag_name === " " || item.tag_name === "" ? "none" : "" }}
                              key={key}>{item.tag_name}</span>
                          )
                        })
                        }
                      </div>
                    </div>


                    <div
                      className={TPMRightSectionData.tags.length > 15 && clickNewsubscripttype === false ? "textcenter color-grey-9 mt20 rightjinengs" : "none"}
                      onClick={() => this.clickNewsubscript(0)}>
                      <span className="mr8">
                        <div>
                          <p className={"font-12"}>展开全部</p>
                          <p className={"font-12"}><i className={"iconfont icon-jiantou9 font-12"}></i></p>
                        </div>
                      </span>
                    </div>


                    <div className={clickNewsubscripttype === false ? "none" : "textcenter mt20 color-grey-9 rightjinengs"}
                      onClick={() => this.clickNewsubscript(1)}>
                      <span className="mr8">
                        <div>
                          <p className={"font-12"}><i className={"iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu- font-12"}></i></p>
                          <p className={"font-12"}>收起全部</p>
                        </div>
                      </span>
                    </div>

                  </div>


              }


              <div className="padding20 edu-back-white mb10 mt10" style={{
                display: TPMRightSectionData === undefined ? "none" : TPMRightSectionData.paths === undefined ? "" : TPMRightSectionData.paths.length === 0 ? "none" : "block"
              }}>
                <p className="mb20 font-16 clearfix"><i className={"iconfont icon-shu1 audit_situationactive font-14"}></i>  所属课程</p>
                <div className="recommend-list">
                  {
                    TPMRightSectionData === undefined ? "" : TPMRightSectionData.paths === undefined ? "" : TPMRightSectionData.paths.map((i, k) => {
                      if (k > 2) {

                      } else {
                        return (

                          <div className="recomments clearfix df" key={k}>

                            <a href={"/paths/" + i.id} height="96" width="128" target="_blank">

                              <img alt="实训" height="96" src={"/" + i.image_url} width="128" className={"altimgs"} />
                            </a>

                            <div className="ml10 flex1">
                              <a href={"/paths/" + i.id} target="_blank" data-tip-down={i.name}
                                className="color-grey-6 task-hide mb12 recomment-name">{i.name}</a>
                              <p className="clearfix mt8 font-12 color-grey-B4">

                                <Tooltip placement="bottom" title={"章节"}>
                                  <span className="mr10 fl squareIconSpan"><i
                                    className="iconfont icon-shixun fl mr3"></i>{i.stages_count}</span>
                                </Tooltip>

                                {/*<Tooltip placement="bottom" title={"经验值"}>*/}
                                {/*<span className="mr10 fl squareIconSpan"><i className="iconfont icon-jingyan fl mr3"></i>{i.score_count}</span>*/}
                                {/*</Tooltip>*/}

                                <Tooltip placement="bottom" title={"学习人数"}>
                                  <span className="mr10 fl squareIconSpan"><i
                                    className="iconfont icon-chengyuan fl mr3"></i>{i.members_count}</span>
                                </Tooltip>

                              </p>
                            </div>

                          </div>

                        )
                      }

                    })
                  }
                </div>
              </div>

              {TPMRightSectionData === undefined ? "" : TPMRightSectionData.paths === undefined ? "" : TPMRightSectionData.paths.length === 0 ? "" :
                this.props.user && this.props.user.main_site === true ? <div className="padding20 edu-back-white"
                  style={{
                    display:
                      TPMRightSectionData === undefined ? "none" : TPMRightSectionData.recommands === undefined ? "none" : TPMRightSectionData.recommands.length === 0 ? "none" : "block"
                  }}
                >
                  <p className="mb20 font-16 clearfix"><i className={"iconfont icon-tuijian audit_situationactive font-14"}></i>  推荐实训</p>
                  <div className="recommend-list">
                    {
                      TPMRightSectionData === undefined ? "" : TPMRightSectionData.recommands === undefined ? "" : TPMRightSectionData.recommands.map((item, key) => {
                        if (key > 2) {

                        } else {
                          return (
                            <div className="recomments clearfix df" key={key}>
                              <a href={"/shixuns/" + item.identifier + "/challenges"} target="_blank">
                                <img alt="69?1526971094" height="96" src={"/" + item.pic} width="128" className={"altimgs"} />
                              </a>
                              <div className="ml10 flex1">
                                <Tooltip placement="bottom" title={item.name}>
                                  <a href={"/shixuns/" + item.identifier + "/challenges"} target="_blank"
                                    className="color-grey-6 task-hide mb12 recomment-name">{item.name}</a>
                                </Tooltip>
                                <p className="clearfix mt8 font-12 color-grey-B4">
                                  <span className="fl">{item.stu_num} 人学习</span>
                                  <span className="fr color-orange pr10">{item.level}</span>
                                </p>

                              </div>
                            </div>
                          )
                        }

                      })
                    }
                  </div>
                </div> : ""
              }
            </div>
        }
      </div>
    )


  }
}

export default TPMRightSection;
