import React from 'react';
import { Button, Col, Form, Modal, Row, Upload, Icon, message } from 'antd';

import { config, networkUtils, enums } from '../../../utils';
const { api } = config;
const { sys } = api;

const FormItem = Form.Item;

const formItemLayout = {
  colon: false,
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
  style: {
    // marginBottom: 20,
  },
};

const ColProps = {
  xs: 24,
  sm: 24,
  md: 12,
  xl: 12,
  style: {},
};

const modal =
  ({
     mode,
     domain,
     readOnly,
     record,
     onOk,
     onCancel,
     dispatch,
     loading,
     form: {
       getFieldDecorator,
       validateFields,
       getFieldsValue,
     },
     ...modalProps
   }) => {

    const uploadProps = {
      action: sys.deploy,
      fileList: [],
      customRequest: (req) => {
        const formData = new FormData();
        formData.append('file', req.file);

        networkUtils.request({
          url: sys.deploy,
          method: 'upload',
          data: formData
        }).then((data) => {
          if (data.success) {
            message.success(enums.bpmOpResult.BPM_UPLOAD_SUCCESS);
          } else {
            message.error(data.message);
          }
        });
      },
    };

    const items = [{
      title: '附件上传',
      dataIndex: 'attachment',
      tag: <Upload {...uploadProps}><Button><Icon type="upload"/>选择文件</Button></Upload>,
      colProps: {
        xs: 24,
        sm: 24,
        md: 24,
        xl: 24,
      },
      formItemLayout: {
        labelCol: { span: 3 },
        wrapperCol: { span: 20 },
      },
    }];

    const handleOk = () => {
      validateFields((errors) => {
        if (errors) {
          return;
        }
        const data = {
          ...getFieldsValue(),
        };
        onOk(data);
      });
    };

    const handleCancel = () => {
      onCancel();
    };

    const modalOpts = {
      ...modalProps,
      onCancel: handleCancel,
      footer: [
        <Button key="back" onClick={handleCancel}>取消</Button>,
        <Button
          key="submit"
          type="primary"
          loading={loading.effects['definitions/deploy']}
          onClick={handleOk}
        >确认
        </Button>,
      ],
    };

    const renderItem = (item) => {
      return (
        <Col key={item.dataIndex} {...ColProps} {...item.colProps}>
          <FormItem
            label={item.title}
            hasFeedback={!readOnly && !item.tag.props.disabled && !!(item.options) && !!(item.options.rules)}
            {...formItemLayout}
            {...item.formItemLayout}
          >
            {getFieldDecorator(item.dataIndex, {
              ...item.options,
              initialValue: record[`${item.dataIndex}`] || (item.options && item.options.initialValue),
            })(item.tag)}
          </FormItem>
        </Col>
      );
    };

    return (
      <Modal {...modalOpts}>
        <Row type="flex" justify="start">
          {items.map(item => renderItem(item))}
        </Row>
      </Modal>
    );
  };

export default Form.create()(modal);
