import React, { useEffect, useState, useCallback } from 'react';
import { Pagination, Modal, Input,  Form, } 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 { adminCheckAgreement } from '../../api';
import { httpUrl } from '../../fetch';
import './index.scss';

const { TextArea } = Input;
export default Form.create()((props) => {
  const { form, list, curPage, total, changePage, loading, showNotification, reloadList } = props;
  const { getFieldDecorator, validateFields, setFieldsValue } = form;
  const [checkedItem, setCheckedItem] = useState({});
  const [visible, setVisible] = useState(false);
  const pageSize = props.pageSize || 10;



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

  function dealAction() {
    validateFields((error, values) => {
      if (!error) {
        adminCheckAgreement({
          agreementId: checkedItem.id,
          type: checkedItem.type,
          params: {
            pass: 0,
            message: values.message
          }
        }).then(res => {
          if (res && res.message === 'success') {
            showNotification('操作成功');
            reloadList();
            setFieldsValue({
              message: '',
            });
            setVisible(false);
          }
        });
      }
    });
  }

  function agreeClick(item) {
    Modal.confirm({
      title: '确认审批通过?',
      onOk() {
        adminCheckAgreement({
          agreementId: item.id,
          type: item.type,
          params: {
            pass: 1,
          }
        }).then(res => {
          if (res && res.message === 'success') {
            showNotification('操作成功');
            reloadList();
          }
        })
      }
    });
  }

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

  const helper = useCallback(
    (label, name, rules, widget) => (
      <Form.Item label={label}>
        {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
      </Form.Item>
    ),
    []
  );

  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 && (item.user.nickname || item.user.login)}</a>
                    <span className="fl color-grey-9 mt3 mr15">{timeAgo(item.createdAt)}</span>
                    <span className="fr">
                      {item.status === 1 && <span className="spanTitle color-grey-6 fl ml20">已同意</span>}
                      {item.status === 0 && <span className="spanTitle color-red fl ml20">已驳回</span>}

                      {
                        item.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>
                  <div className="clearfix">
                    <div className="width100 lineh-35">
                      <span className="color-grey-9 fl">任务名称：</span>
                      <span className="fl lineh-35 ml5">
                        <Link className="primary-link" to={`/task/taskDetail/${item.containerId}`}>{item.taskName}</Link>
                      </span>
                    </div>
                    <div className="clearfix"></div>
                    <div className="width100 lineh-35">
                      <span className="color-grey-9 fl">任务编号：</span>
                      <span className="fl lineh-35 ml5">
                        {item.taskNumber}
                      </span>
                    </div>
                    <div className="clearfix"></div>

                    {
                      item.paperNumber && <React.Fragment>
                        <div className="width100 lineh-35">
                          <span className="color-grey-9 fl">成果编号：</span>
                          <span className="fl lineh-35 ml5">
                            {item.paperNumber}
                          </span>
                        </div>
                        <div className="clearfix"></div>
                      </React.Fragment>
                    }

                    <div className="width100 lineh-35 clearfix">
                      <span className="color-grey-9 fl">协议文件：</span>
                      {
                        item.busiAttachments && item.busiAttachments.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>
                    {/* <div className="width100 lineh-35">
                      <span className="color-grey-9 fl">驳回原因：</span>
                      <span className="infos_item">{item.content}</span>
                    </div> */}
                  </div>

                </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={dealAction}
          onCancel={() => { setVisible(false) }}
          className="form-edit-modal"
        >
          {
            helper('驳回原因', 'message', [{ required: visible, message: "请输入驳回的原因" }, { max: 200, message: '不能超过200字符' }],
              <TextArea
                placeholder="(必填)我想说点什么呢,200字以内"
                autoSize={{ minRows: 6 }}
                className="applyText"
              />
            )
          }

        </Modal>
      </React.Fragment>

  )
}
)