import React, {Component} from 'react';

import {BrowserRouter as Router, Route, Link} from "react-router-dom";

import axios from 'axios';

import {getImageUrl,} from "educoder";

import './TPMright.css';

import {Icon, Tooltip} from 'antd';

// import "antd/dist/antd.css";

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

      TPMRightSection: false,
      clickNewsubscripttype: false
    }
  }

  // componentDidMount() {
  //   let id=this.props.match.params.shixunId;
  //
  //   let shixunsDetailsURL=`/shixuns/`+id+`/show_right.json`;
  //
  //   axios.get(shixunsDetailsURL).then((response)=> {
  //         if(response.status===200){
  //             this.setState({
  //               TPMRightSectionData: response.data
  //           });
  //         }
  //     }).catch((error)=>{
  //       console.log(error)
  //     });
  // }

  // shouldComponentUpdate(nextProps, nextState) {
  //      return nextProps.TPMRightSectionData !== this.state.TPMRightSectionData
  // }
  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
    console.log(this.props)
    return (
      <div>
        {
          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 ? "" : `/users/${TPMRightSectionData.creator.login}/courses`}>
                    <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"}>
                        {TPMRightSectionData === undefined ? "" : TPMRightSectionData.creator === undefined ? "" : TPMRightSectionData.creator.name}
                      </div>
                      <div className={"creatornamelist width80center"}>
                        {TPMRightSectionData.user_shixuns_count}
                      </div>
                    </div>
                    <div className="clearfix">
                      <span className={"fr color888hezuo"}>发布实训项目</span>
                      {/*<span className="ml20">粉丝 <span id="user_h_fan_count">{TPMRightSectionData.fans_count}</span></span>*/}
                      {/* <a href="/watchers/unwatch?className=fr+user_watch_btn+edu-default-btn+edu-focus-btn&amp;object_id=3039&amp;object_type=user&amp;shixun_id=61&amp;target_id=3039" className="fr edu-default-btn user_watch_btn edu-focus-btn" data-method="post" data-remote="true" id="cancel_watch" rel="nofollow">取消关注</a> */}
                    </div>

                  </div>
                </div>
              </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-12">已获得 {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"}></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-"}></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">所属课程</p>
                <div className="recommend-list">
                  {
                    TPMRightSectionData === undefined ? "" : TPMRightSectionData.paths === undefined ? "" : TPMRightSectionData.paths.map((i, k) => {

                      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"/>
                          </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">推荐实训</p>
                  <div className="recommend-list">
                    {
                      TPMRightSectionData === undefined ? "" : TPMRightSectionData.recommands === undefined ? "" : TPMRightSectionData.recommands.map((item, key) => {
                        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"/>
                            </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">
                                {item.stu_num} 人学习
                              </p>
                              <p className="edu-txt-right color-orange pr10">{item.level}</p>
                            </div>
                          </div>
                        )
                      })
                    }
                  </div>
                </div> : ""
              }
            </div>
        }
      </div>
    )


  }
}

export default TPMRightSection;