import React, { useEffect, useState, } from 'react';
import { Modal, Form, Input, } from 'antd';
import RenderHtml from 'src/components/render-html';
import Upload from 'military/components/Upload';
import ExportWord from 'military/components/ExportWord';
import { uploadAgreePaper,getAgreement } from "../../api";

import '../../index.scss';


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

  const [fileList, setFileList] = useState([]);
  const [content,setContent]=useState('');

  useEffect(()=>{
    visible && getAgreement({title:'协议模板'}).then(res=>{
      if(res.data){
        setContent(res.data.content);
      }
    })
  },visible)


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

  function uploadAgree() {
    validateFields((err, values) => {
      if (!err) {
        uploadAgreePaper({
          paperId: checkedItem.id,
          params: {
            files: values.files,
          }
        }).then(res => {
          if (res.message === 'success') {
            setFieldsValue({
              files: '',
            });
            setVisible(false);
            showNotification("上传协议成功！");
            reloadList();
          } else {
            showNotification(res.message || "上传协议失败")
          }
        })
      }
    })
  }

  return (
    <Modal
      title="签订协议"
      visible={visible}
      onOk={uploadAgree}
      onCancel={() => { setVisible(false) }}
      className="form-edit-modal"
    >
      <div className="task-popup-content">
        {/* paperAuditing */}
        {checkedItem.paperAuditing && <p className=" mb10 color-orange task_tip">审核意见：{checkedItem.paperAuditing.message}</p>}
        <ExportWord 
          className="icon icon-attachment font-13 color-blue"
          title="协议模板.doc"
          fileName="协议模板"
          wordId="wordExpert"
        />

        <Form.Item className="upload-form" label="协议上传" required={true}>
          <Upload
            load={uploadFunc}
            size={50}
            showNotification={showNotification}
            fileList={fileList}
          />
          {getFieldDecorator('files', {
            rules: [{ required: visible, message: "请上传文件" }],
            validateFirst: true
          })(<Input style={{ display: 'none' }} />)}
        </Form.Item>
        <div id="wordExpert" style={{display:'none'}} >
          <RenderHtml className="break_word_comments imageLayerParent" value={content} />
        </div>
      </div>
    </Modal>
  )
}
)