import React, { useState, useCallback, useMemo} from 'react';
import { Modal, Form, Input, } from 'antd';
import Upload from 'military/components/Upload';
import { complainPaper, publicityComplain, } from "../../api";
import '../../index.scss';

const { TextArea } = Input;

export default Form.create()(props => {
  const { visible, setVisible, checkedItem, detailStatus, form, showNotification, reloadList } = props;
  const { getFieldDecorator, validateFields, setFieldsValue, } = form;

  const [fileList, setFileList] = useState([]);

  // 上传附件后得到的文件数组
  function uploadFunc(fileList, files) {
    setFileList(fileList);
    setFieldsValue({
      files,
    });
  }

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

  function complain() {
    validateFields((error, values) => {
      if (!error) {
        if (detailStatus === 5) {
          publicityComplain({
            content: values.complainValue,
            files: values.files,
            paperId: checkedItem.id,
          }).then(res => {
            complainDeal(res);
          });
        } else {
          complainPaper({
            paperId: checkedItem.id,
            params: {
              content: values.complainValue,
              files: values.files,
            }
          }).then(res => {
            complainDeal(res);
          });
        }
      }
    });
  }

  function complainDeal(res) {
    if (res && res.message === 'success') {
      showNotification('申诉提交成功');
      setVisible(false);
      setFileList(null);
      setFieldsValue({
        files: ''
      });
      reloadList();
    }
  }


  return (
    <Modal
      title="申诉"
      visible={visible}
      onOk={complain}
      onCancel={() => { setVisible(false) }}
      className="form-edit-modal"
    >
      {checkedItem.checkStatus == 2 && detailStatus === 3 && <p className=" mb10 color-orange task_tip">审核意见：{checkedItem.auditing.message}</p>}
      <p className="edu-txt-center lineh-20 mb10">你的申诉信息将发送给平台管理员</p>
      <p className="edu-txt-center lineh-20">请如实填写有效的申诉原由，我们将尽快完成审核</p>
      {
        helper('complainValue', [{ required: visible, message: "(必填)请在此输入发起申诉的原因，最大限制100个字符" },
        { max: 100, message: '长度不能超过100个字符' }],
          <TextArea
            placeholder="(必填)请在此输入发起申诉的原因，最大限制100个字符"
            autoSize={{ minRows: 6 }}
            className="applyText"
          />
        )
      }

      <Form.Item className="upload-form" label="附件上传" required={true}>
        <Upload
          className="commentStyle"
          load={uploadFunc}
          size={50}
          showNotification={showNotification}
          fileList={fileList}
        />
        {getFieldDecorator('files', {
          rules: [{ required: visible, message: "请上传文件" }],
          validateFirst: true
        })(<Input style={{ display: 'none' }} />)}
      </Form.Item>
    </Modal>
  )
}
)