import React, { Component } from 'react'
import { Modal, Upload, Button, message } from 'antd'
import { FormItem } from 'wptpc-design'

export default class Index extends Component {
  uploadProps = {
    name: 'file',
    headers: {
      credentials: 'include'
    },
    beforeUpload: file => {
      if (!file.name.endsWith('.pmml') && !file.name.endsWith('.model')) {
        message.warning('请上传pmml或model格式的文件')
        return false
      }
      if (file == null) {
        message.warn('请选择模型文件')
        return false
      }
      this.props.onChange('file', file)
      return false
    }
  };

  render () {
    const { showModal, params, onChange, onOk, onCancel, fetching } = this.props
    const formSetting = [{
      label: '模型名称',
      type: 'input',
      key: 'name'
    },
    {
      label: '模型描述',
      type: 'textarea',
      key: 'description'
    },
    {
      label: '模型版本',
      type: 'input',
      key: 'version'
    }, {
      label: '',
      key: 'file',
      render: () => {
        return (
          <div style={{ marginLeft: '120px' }}>
            <Upload {...this.uploadProps}>
              <Button type="primary">上传模型文件</Button>
            </Upload>
            <p>文件类型：.pmml or .model</p>
          </div>
        )
      }
    }]
    return (
      <Modal
        title={'模型上传'}
        visible={showModal}
        onOk={onOk}
        onCancel={onCancel}
        okButtonProps={{ disabled: fetching }}
        destroyOnClose
      >
        <FormItem formSetting={formSetting} params={params} onChange={onChange} />
      </Modal>
    )
  }
}