import React, { useEffect, useState, } from 'react';
import { Pagination, Modal, Input } from 'antd';
import { Link } from "react-router-dom";
import Nodata from 'forge/Nodata';
import Loading from "src/Loading";
import { timeAgo, getImageUrl,goUser,goUserMes } from 'educoder';
import { checkProof } from '../../api';
import { httpUrl } from '../../fetch';
import './index.scss';

const { TextArea } = Input;
export default (props) => {
  const { list, curPage, total, changePage, loading, showNotification, reloadList } = props;
  const [checkedItem, setCheckedItem] = useState('');
  const [visible, setVisible] = useState(false);
  const [advice, setRepairAdvice] = useState('');
  const pageSize = props.pageSize || 10;

  function agreeClick(item) {
    Modal.confirm({
      title: '是否确认审批通过?',
      onOk() {
        checkProof({
          id: item.taskResultProof.id,
          isPassed: 1,
          taskId: item.id,
          advice: "",
        }).then(res => {
          if (res && res.message === 'success') {
            showNotification('操作成功');
            reloadList();
          }
        })
      }
    });
  }

  function refuseClick(item) {
    setCheckedItem(item);
    setVisible(true);
  }

  function refuse() {
    if (!advice) {
      showNotification('请输入拒绝的理由');
      return;
    }
    checkProof({
      id: checkedItem.taskResultProof.id,
      taskId: checkedItem.id,
      isPassed: 0,
      advice: advice
    }).then(res => {
      if (res && res.message === 'success') {
        showNotification('操作成功');
        reloadList();
        setRepairAdvice('');
        setVisible(false);
      }
    });
  }


  function downFile(item) {
    let url = httpUrl + '/busiAttachments/download/' + item.id;
    window.open(url);
  }



  return (
    loading ? <Loading /> :
      <React.Fragment>
        {
          list.map(item => {
            return (
              <div className="list-box" key={item.id}>

                <img alt="" className="radius mr15" height="50px" src={item.user && getImageUrl(item.user.logo)} width="50px" />
                <div className="flex1">
                  <li className="clearfix mb20">
                    <a className="user-box fl mr15 color-grey-3 font-16" onClick={() => { goUser(item.user.login) }}>{item.user.nickname || item.user.login}</a>
                    <span className="fl color-grey-9 mt3 mr15">{timeAgo(item.createdAt)}</span>
                    <span className="with40 fl lineh-35">
                      <span className="color-grey-9 fl">主体名称:</span>
                      <span className="infos_item">{item.enterpriseName}</span>
                    </span>
                    <span className="fr">
                      {item.taskResultProof.status === 1 && <span className="spanTitle color-grey-6 fl ml20">已同意</span>}
                      {item.taskResultProof.status === 0 && <span className="spanTitle color-red fl ml20">已拒绝</span>}

                      {
                        item.taskResultProof.status === 2 && <React.Fragment>
                          <a className="edu-default-btn edu-orangeline-btn ml20 fl" onClick={() => { goUserMes(item.user.id) }}>私信</a>
                          <a className="edu-default-btn edu-blueline-btn ml20 fl" onClick={() => { agreeClick(item) }}>同意</a>
                          <a className="edu-default-btn edu-greyline-btn ml20 fl" onClick={() => { refuseClick(item) }}>拒绝</a>
                        </React.Fragment>
                      }
                    </span>
                  </li>
                  <ul className="clearfix">
                    <div className="width100 lineh-35" style={{ display: "inline-flex" }}>
                      <span className="color-grey-9 fl">任务编号:</span>
                      <span className="infos_item mr15">{item.number}</span>
                      <span className="fl lineh-35 ml5">
                        <Link className="primary-link" to={`/task/taskDetail/${item.id}`}>{item.name}</Link>
                      </span>
                    </div>

                    <div className="clearfix"></div>
                    <div className="width100 lineh-35">
                      <span className="color-grey-9 fl">评选胜出（{item.taskResultProof.winnerName.split(',').length}）：</span>
                      <span className="infos_item">{item.taskResultProof.winnerName}</span>
                    </div>
                    <div className="clearfix"></div>
                    <div className="width100 lineh-35 clearfix">
                      <span className="color-grey-9 fl">佐证材料：</span>
                      {
                        item.taskProofAttachments && item.taskProofAttachments.map(fileItem => {
                          return <span className="file-list-prof " key={fileItem.id}>
                            <a onClick={() => { downFile(fileItem) }}><i className="iconfont icon-fujian color-green font-14 mr3"></i>
                              {fileItem.fileName} </a>
                            <span className="ml10 color-grey-9">({fileItem.fileSizeString})</span>
                          </span>
                        })
                      }
                    </div>

                    {item.taskResultProof.status === 0 && <p className="color-orange lineh-35 "><span className="fl color-orange mr5">拒绝原因:</span>{item.advice}</p>}
                  </ul>

                </div>
              </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="暂无数据" />}

        <Modal
          title="拒绝原因"
          visible={visible}
          onOk={refuse}
          onCancel={() => { setVisible(false) }}
          className="form-edit-modal"
        >
          <TextArea
            value={advice}
            placeholder="(必填)我想说点什么呢,200字以内"
            autoSize={{ minRows: 6 }}
            className="applyText"
            onChange={(e) => { setRepairAdvice(e.target.value) }}
            maxLength={200}
          />
        </Modal>
      </React.Fragment>

  )
}