import React, { useEffect, useState } from 'react';
import { Pagination, Modal, Input, Radio, Button } from 'antd';
import { Link } from "react-router-dom";
import Nodata from 'forge/Nodata';
import Loading from "src/Loading";
import { timeAgo, getImageUrl } from 'educoder';
import { main_web_site_url } from '../../static';
import { checkTask } from '../../api';
import './index.scss';

const { TextArea } = Input;
export default (props) => {
  const { list, categoryArr, curPage, total, changePage, loading, showNotification, reloadList } = props;
  const [checkedId, setCheckedId] = useState('');
  const [visible, setVisible] = useState(false);
  const [isRepairDocument, setIsRepairDocument] = useState('0');
  const [repairAdvice, setRepairAdvice] = useState('');
  const pageSize = props.pageSize || 10;


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


  function refuseClick(id) {
    setCheckedId(id);
    setVisible(true);
  }

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

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

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

  function scale(scale) {
    if (scale > 10000) {
      return '10000人以上';
    } else if (scale > 1000) {
      return '1001 - 10000人';
    } else if (scale > 100) {
      return '101 - 1000人';
    } else if (scale > 10) {
      return '11 - 99人';
    } else {
      return '0 - 10人';
    }
  }

  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">{timeAgo(item.createdAt)}</span>
                    <span className="fr">
                      {item.status > 2 && item.status !== 9 && <span className="spanTitle color-grey-6 fl ml20">已同意</span>}
                      {item.status === 9 && <span className="spanTitle color-yellow fl ml20">已处理</span>}
                      {item.status === 2 && <span className="spanTitle color-red fl ml20">已拒绝</span>}

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

                      {item.status === 1 && <div className="fr text-center">
                        <Button type="primary" onClick={() => { window.open(`${main_web_site_url}/admin/tasks/export_task_files.zip?task_id=${item.id}`) }} className="edu-default-btn edu-blueback-btn">导出任务需求材料</Button>
                      </div>}
                    </div>
                    <div className="clearfix"></div>

                    <div className="width100">
                      <div className="width100">
                        <span className="with40 fl lineh-35">
                          <span className="color-grey-9 fl">主体名称:</span>
                          <span className="infos_item">{item.enterpriseName}</span>
                        </span>
                        <span className="inline-block lineh-35">
                          <span className="color-grey-9 fl">信用代码:</span>
                          <span className="infos_item">{item.enterpriseSimple ? item.enterpriseSimple.creditCode : ''}</span>
                        </span>
                      </div>
                    </div>
                    <div className="clearfix"></div>
                    <div className="width100">
                      <span className="with40 fl lineh-35">
                        <span className="color-grey-9 fl">联系手机:</span>
                        <span className="infos_item">{item.contactPhone}{item.belongTo && `（位置分析：${item.belongTo}）`}</span>
                      </span>
                      <span className="inline-block lineh-35">
                        <span className="color-grey-9 fl">IP地址:</span>
                        <span className="infos_item">{item.ip}{item.belongTo && `（位置分析：${item.belongTo}）`}</span>
                      </span>
                    </div>
                    <div className="clearfix"></div>
                    <div className="width100">
                      <span className="with40 fl lineh-35">
                        <span className="color-grey-9 fl">发布方式:</span>
                        <span className="infos_item mr15 fl">{item.publishMode == 1 ? '统筹任务' : '自主提交'}</span>
                      </span>
                      <span className="with25 fl lineh-35">
                        <span className="color-grey-9 fl">所在行业:</span>
                        <span className="infos_item" style={{ maxWidth: '100px' }}>{categoryArr[item.categoryId]}</span>
                      </span>
                      {
                        item.enterpriseSimple && <span className="with25 fl lineh-35">
                          <span className="color-grey-9 fl">企业规模:</span>
                          <span className="infos_item" style={{ maxWidth: '100px' }}>{scale(item.enterpriseSimple.scale)}</span>
                        </span>}

                      {/* <span className="inline-block lineh-35">
                        <span className="color-grey-9 fl">所在职位:</span>
                        <span className="infos_item">普通员工</span>
                      </span> */}
                    </div>

                  </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"
        >
          <Radio.Group
            className="mb10"
            value={isRepairDocument}
            onChange={(e) => { setIsRepairDocument(e.target.value) }}>
            <Radio value={'0'}>不允许重新发布</Radio>
            <Radio value={'1'}>允许修缮后重新发布</Radio>
          </Radio.Group>
          <TextArea
            value={repairAdvice}
            placeholder="(必填)我想说点什么呢,200字以内"
            autoSize={{ minRows: 6 }}
            className="applyText"
            onChange={(e) => { setRepairAdvice(e.target.value) }}
            maxLength={200}
          />
        </Modal>
      </React.Fragment>

  )
}