import React from 'react';
import { getImageUrl, setImagesUrl, getUrl } from 'educoder';
import { Spin, Tooltip, Rate, Pagination } from 'antd';
import './shixunCss/shixunCard.scss';

export default ({ middleshixundata, pagination, typepvisible, pages, totalcount, shixunsPage }) => {
  function onPageChange(number) {
    shixunsPage(number)
  }

  return (
    <div className="educontent mb80 shixun-card">
      <Spin spinning={typepvisible} tip="正在获取相关数据..." size="large" style={{ marginTop: '15%' }}>
        {middleshixundata === undefined ? "" : middleshixundata.length === 0 ? <div className="edu-tab-con-box clearfix edu-txt-center">
          <img className="edu-nodata-img mb20" src={getUrl("/images/educoder/nodata.png")} />
          <p className="edu-nodata-p mb20">暂时还没有相关数据哦！</p>
        </div> : ""}

        <div className="mb20 clearfix">
          <div className="shixun_list_content">
            <div className="square-list clearfix">
              {middleshixundata === undefined || middleshixundata.length === 0 ? " " : middleshixundata.map((item, key) => {
                return (
                  <div className="square-Item" key={item.id} id={item.id}>
                    {
                      item.tag_name === null ? "" :
                        <div className="tag-green">
                          <span className="tag-name"> {item.tag_name}</span>
                        </div>
                    }
                    {
                      item.is_jupyter === true ?
                        <div className="tag-org">
                          <p className="tag-org-name intermediatecenter"> <span className="tag-org-name-test">Jupyter</span></p>
                        </div>
                        : ""}

                    <div className={item.power === false ? "closeSquare" : "none"}>
                      <img src={getImageUrl("images/educoder/icon/lockclose.svg")}
                        className="mt80 mb25" />
                      <p className="font-14 color-white">非试用内容，需要授权</p>
                    </div>

                    <a href={"/shixuns/" + item.identifier + "/challenges"} className="square-img" target="_blank">
                      <img src={setImagesUrl(`${item.pic}`)} />
                    </a>

                    <div className="square-main">
                      <p className="task-hide">
                        <a href={"/shixuns/" + item.identifier + "/challenges"} className="justify color-grey-name" title={item.name} target="_blank">
                          {item.name}
                        </a>
                      </p>

                      <p className="clearfix mt8 ml-3">
                        <span className="rateYoStar fl" style={{ padding: '0px', height: '20px', lineHeight: '19px', cursor: 'default' }} title="">
                          <Rate key={key} allowHalf defaultValue={item.score_info === null ? 5 : item.score_info} disabled />
                        </span>
                        <span className="fl ml25 font-12 color-grey-9 lineh-12 mt5">{item.score_info === null ? "5分" : item.score_info + "分"}</span>
                      </p>

                      <p className="clearfix mt8 font-12 color-grey-B4">
                        {item.is_jupyter === false ? <Tooltip placement="bottom" title={"关卡"}>
                          <span className="mr10 fl squareIconSpan">
                            <i className="iconfont icon-shixunguanqia fl mr3"></i>{item.challenges_count}
                          </span>
                        </Tooltip> : ""}

                        <Tooltip placement="bottom" title={"学习人数"}>
                          <span className="mr10 fl squareIconSpan" style={{ display: item.stu_num === 0 ? "none" : "block" }}>
                            <i className="iconfont icon-chengyuan fl mr3"></i>{item.stu_num}
                          </span>
                        </Tooltip>

                        <span className="fr color-grey-B3 squareIconSpan">{item.level}</span>
                      </p>

                    </div>
                  </div>
                )
              })
              }

            </div>
            <div className="both"></div>
            <div className={"ml425"}
              style={{ display: pagination ? "block" : "none" }}>
              <Pagination defaultCurrent={1} current={pages} total={totalcount || 1299} type="mini" pageSize={16} onChange={onPageChange} />
            </div>

          </div>

        </div>
      </Spin>
    </div>
  )
}