import React, { Component } from 'react';
import { setImagesUrl } from 'educoder';
import { Link } from "react-router-dom";
import LoadingSpin from '../../common/LoadingSpin';
import NodataPanel from '../../components/nodata-panel';
import './ShixunPaths.css';

class ShixunPathCard extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    let { pathList } = this.props;
    return (
      <div className="educontent" id="subjects_list_content">

        {
          pathList === null ? <LoadingSpin />
            : pathList && pathList.length > 0 ?
              (
                <div className="square-list clearfix">
                  {
                    pathList && pathList.map((item, key) => {
                      return (
                        <div className="squareCard" id={item.id} key={item.id}>
                          {
                            item.excellent === false ? "" :
                              <div className="tag_open">
                                <span className="tag_open_name">开放课程</span>
                              </div>
                          }
                          <Link to={"/paths/" + item.id} className="squareImg" >
                            <img alt="详情图片" src={setImagesUrl(item.image_url)} />
                          </Link>
                          <div className="mt20" style={{ marginLeft: "1px" }}>
                            <p className="task-hide mb10">
                              <Link to={"/paths/" + item.id} className="justify cardName">{item.name}</Link>
                            </p>
                            <p className="clearfix squareInfo">
                              <span className="fl pr squareLine mr20">章节: {item.stages_count}</span>
                              <span className="fl">学习人数: {item.members_count}</span>
                            </p>
                          </div>
                        </div>
                      )
                    })
                  }
                </div>
              ) : <NodataPanel />
        }

      </div>
    )
  }
}
export default ShixunPathCard;