import React, { useEffect, useState, useCallback } from 'react';
import { Pagination, Modal, Input, Radio, Form, InputNumber } 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 { checkPublicity } 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;

  const [isAccepted, setIsAccepted] = useState('');
  const [isReconsidered, setIsReconsidered] = useState('');
  const [isChanged, setIsChanged] = useState('');



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

  function dealAction() {
    validateFields((error, values) => {
      if (!error) {
        checkPublicity({
          complaintMaterialId: checkedItem.id,
          ...values,
        }).then(res => {
          if (res && res.message === 'success') {
            showNotification('操作成功');
            reloadList();
            setFieldsValue({
              isAccepted: '',
              reason: '',
            });
            setVisible(false);
          }
        });
      }
    });

  }

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

  const helper = useCallback(
    (label, name, rules, widget, rightDom) => (
      <Form.Item label={label}>
        {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
        {rightDom}
      </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">
                      <a className="edu-default-btn edu-orangeline-btn ml20 fl" onClick={() => { goUserMes(item.user.id) }}>私信</a>
                      {item.status === 2 && <a className="edu-default-btn edu-blueline-btn ml20 fl" onClick={() => { deal(item) }}>处理</a>}
                    </span>
                  </li>
                  <div className="clearfix">

                    {/* <div className="width100">
                      <span className="with40 fl lineh-35">
                        <span className="color-grey-9 fl">联系手机:</span>
                        <span className="infos_item">{item.contactPhone}（位置分析：河北-唐山）</span>
                      </span>
                      <span className="inline-block lineh-35">
                        <span className="color-grey-9 fl">IP地址:</span>
                        <span className="infos_item">{item.ip}（位置分析：北京-北京）</span>
                      </span>
                    </div> */}

                    <div className="clearfix"></div>
                    <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.taskId}`}>{item.paperNumber}</Link>
                      </span>
                    </div>
                    <div className="clearfix"></div>
                    <div className="width100 lineh-35 clearfix">
                      <span className="color-grey-9 fl">申诉材料：</span>
                      {
                        item.materials && item.materials.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>
                    {/* {item.taskResultProof.status === 0 && <p className="color-orange lineh-35 "><span className="fl color-orange mr5">拒绝原因:</span>{item.advice}</p>} */}
                  </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('是否受理', 'isAccepted', [{ required: true, message: "请选择是否受理" }],
              <Radio.Group
                className="mb10"
                onChange={(e) => { setIsAccepted(e.target.value); setIsReconsidered(''); setIsChanged(''); }}
              >
                <Radio value={'1'}>受理</Radio>
                <Radio value={'0'}>不受理</Radio>
              </Radio.Group>
            )
          }

          {
            isAccepted === '1' && helper('复议评审', 'isReconsidered', [{ required: true, message: "请选择是否启动复议评审" }],
              <Radio.Group
                className="mb10"
                onChange={(e) => { setIsReconsidered(e.target.value); setIsChanged(''); }}
              >
                <Radio value={'1'}>启动</Radio>
                <Radio value={'0'}>不启动</Radio>
              </Radio.Group>
            )
          }

          {
            isAccepted === '1' && isReconsidered === '0' && helper('公示结果', 'isChanged', [{ required: true, message: "请选择是否更改公示结果" }],
              <Radio.Group
                className="mb10"
                onChange={(e) => { setIsChanged(e.target.value) }}
              >
                <Radio value={'1'}>更改</Radio>
                <Radio value={'0'}>不更改</Radio>
              </Radio.Group>
            )
          }

          {
            isAccepted === '1' && isReconsidered === '0' && isChanged === '1' && helper('延长公示', 'delayDuration',
              [{ required: true, message: "请输入延长天数" }],
              <InputNumber
                placeholder="您打算延长多少天呢"
                max={150}
                min={0}
              />,
              ' 天'
            )
          }

          {
            helper('原因', 'reason', [{ required: true, message: "请输入原因" }, { max: 200, message: '不能超过200字符' }],
              <TextArea
                placeholder="(必填)我想说点什么呢,200字以内"
                autoSize={{ minRows: 6 }}
                className="applyText"
              />
            )
          }


        </Modal>
      </React.Fragment>

  )
}
)