import React, { useEffect, useState } from 'react';
import { Icon, Pagination } from 'antd';
import { getImageUrl } from 'educoder';
import Nodata from 'forge/Nodata';
import { taskStatusAllArr } from '../../static';
import Loading from "src/Loading";
import './index.scss';

const statusArr = [];
for (const item of taskStatusAllArr) {
  statusArr[item.dicItemCode] = item.dicItemName;
}

const classArr = ['', 'list-done', 'list-error', 'list-red', 'list-yellow', 'list-pay', '', 'list-pay', 'list-gray',];
export default (props) => {
  const { list, itemClick, curPage, total, changePage, loading } = props;
  const pageSize = props.pageSize || 10;


  function goUser(login) {
    window.location.href = `/users/${login}`;
  }


  return (
    loading ? <Loading /> :
      <React.Fragment>
        {
          list.map(item => {
            return (
              <div className="list-box" key={item.id}>
                <div className="list-content">
                  <div className="list-title mb10" onClick={() => { itemClick(item.id) }}>
                    <div className="title-content text-ellipsis">{item.name}</div>
                    {item.status && <span className={classArr[item.status]}>{item.exceptClosedBoolean ? '已关闭' : statusArr[item.status]}</span>}
                    {(item.status !== 8) && item.delayTime.indexOf('延期') > -1 ? <span className="list-yellow">延期中</span>
                      : <React.Fragment>
                        {(item.status !== 8) && item.cancelStatus === 1 && <span className="list-yellow">手动延期中</span>}
                        {(item.status !== 8) && item.delayed && item.cancelStatus === 0 && item.delayCount>0 && <span className="list-yellow">系统自动延期中</span>}
                      </React.Fragment>
                    }

                  </div>
                  <div className="list-other">
                    <span className="user-box mr30" onClick={() => { goUser(item.user && item.user.login) }}>
                      <img alt="" className="head-log-small" src={getImageUrl(item.user && item.user.logo)} />
                      <span>{(item.user && item.user.nickname) || (item.user && item.user.login)}</span>
                    </span>
                    <span className="font-14 mr30"><i className="iconfont icon-dianjiliang mr3 font-12" />{item.visits || 0}</span>
                    <span className="font-14 mr30"><Icon type="user" /><span className="color-orange">{item.papersCount || 0}</span>人参与</span>
                    {(item.status !== 8) && <span className="color-orange mr30 font-14"><i className="mr5 iconfont icon-shijian color-grey9 font-14"></i>{item.delayTime}</span>}
                  </div>
                </div>

                <span className="price color-deep-blue ">
                  <span className="font-16">￥</span>
                  <span className="font-24">{item.bounty}</span>
                </span>
              </div>
            )
          })
        }

        {list.length > 0 ?
          <div className="edu-txt-center mt20 mb20">
            {total > pageSize && <Pagination
              showQuickJumper
              onChange={(page) => { changePage(page) }}
              current={curPage}
              total={total}
              showTotal={total => `共 ${total} 条`}
            />}
          </div> :
          <Nodata _html="暂无数据" />}
      </React.Fragment>

  )
}