import { Modal, Spin, Form, Input } from 'antd';
import { useState, useEffect } from 'react';
import styles from '../../RenderForm/index.less';
import { getHistoryFormDetail } from '../../../Services';
import AuditButton from '@/webPublic/FormInsertDiy/AuditButton';
import HistoryForm from '@/webPublic/FormInsertDiy/HistoryForm';
import ButtonDiy from '@/baseComponent/ButtonDiy';
import { ModalInfo } from '@/baseComponent/Modal';
import { router } from 'umi';
import RenderForm from '../../RenderForm';

const TextArea = Input.TextArea;

function AuditModal({ form, selectRows, children, getPage }) {
  const [visible, setVisible] = useState(false);

  function submitCb(res) {
    // ModalInfo(`提交${res ? '成功' : '失败'}！`, { onOk: () => router.goBack() });
    ModalInfo(`提交${res ? '成功' : '失败'}！`, {
      onOk: () => {
        setVisible(false);
        getPage();
      },
    });
  }

  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(
    () => {
      if (!visible) {
        return form.resetFields();
      }
      const code = selectRows && selectRows[0] && selectRows[0].code;
      if (typeof code === 'undefined') return;
      setLoading(true);
      getHistoryFormDetail({ code }).then(res => {
        setLoading(false);
        if (res && !res.errMsg) {
          setData({ ...res, hisTaskForm: { ...res.hisTaskForm, formKeys: [] } });
        }
      });
    },
    [visible],
  );

  const footer = data ? (
    <div style={{ padding: 16, textAlign: 'center' }}>
      <AuditButton
        data={data} // 为 'affair/getIdFormDetail' 接口请求到的数据
        callback={submitCb} // 提交完成后回调函数
        form={form} // form表单控件
        taskIds={selectRows.map(i => i.taskId)}
      />
    </div>
  ) : null;
  const { getFieldDecorator } = form;

  return (
    <>
      <Modal
        width={900}
        visible={visible}
        title="批量审核"
        footer={footer}
        onCancel={() => setVisible(false)}
      >
        <Spin spinning={loading}>
          {data && data.isHandle && !!data.taskFormKey ? (
            <RenderForm
              postData={data}
              get="web"
              isCg="no"
              obj={data.hisTaskForm.formData}
              table="new"
              form={form}
            />
          ) : null}
          <div>
            <h3 style={{ padding: 12, paddingBottom: 0, fontWeight: 'bold' }}>审批说明:</h3>
            <span style={{ display: 'block', textAlign: 'center' }}>
                  {getFieldDecorator('reason')(
                    <TextArea
                      placeholder="请输入审批理由"
                      style={{ width: '95%', margin: 12, height: 120, color: '#7F8B95' }}
                    />,
                  )}
                </span>
          </div>
        </Spin>
      </Modal>
      {children({ onShow: () => setVisible(true) })}
    </>
  );
}

export default Form.create()(AuditModal);