import React, { Component } from 'react'
import { Modal, message } from 'antd'
import { FormItem } from 'wptpc-design'
class Index extends Component {
  state = {
    data: null,
    params: null
  };

  constructor (props) {
    super(props)

    let params = null
    if (props.params) {
      params = props.params
    }
    this.state = {
      params: {
        ...params
      }
    }
  }

  // 统一change
  onParamsChange = (k, v) => {
    const { params } = this.state
    const newParams = { ...params }
    this.setState(
      {
        params: { ...newParams, [k]: v }
      }
    )
  };

  onOk = (cb) => {
    if (!this.getCheck()) {
      return
    }
    const { params = {} } = this.state
    if (Object.values(params).some(item => item === '0')) {
      message.warning('内容数字不可以为 0!')
      return
    }
    if (typeof this.props.onOk === 'function') { this.props.onOk({ ...params }) }
    if (typeof cb === 'function') {
      // eslint-disable-next-line standard/no-callback-literal
      cb({ ...params })
    }
  };

  // 设置属性字段
  setDetail (v, k) {
    const { params } = this.state
    if (params) {
      params[k] = v
    }
    this.setState({
      params: params
    })
  }

  onChange = (e, key) => {
    const { value } = e.target
    const reg = /^-?[0-9]*(\.[0-9]*)?$/
    if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
      this.setDetail(value, key)
    }
  };

  render () {
    const {
      params = {}
    } = this.state
    const { onCancel, showModal } = this.props

    this.formSetting = [
      {
        label: '压测链接数',
        key: 'connects',
        value: params.connects,
        placeholder: '请输入 压测链接数 (仅数字有效)',
        isRequired: true,
        type: 'input',
        onChange: (e) => { this.onChange(e, 'connects') }
      },
      {
        label: '压测线程数',
        key: 'threads',
        value: params.threads,
        placeholder: '请输入 压测线程数 (仅数字有效)',
        isRequired: true,
        type: 'input',
        onChange: (e) => { this.onChange(e, 'threads') }
      },
      {
        label: '接口超过时间',
        key: 'timeout',
        value: params.timeout,
        placeholder: '请输入 接口超过时间 (仅数字有效)',
        isRequired: true,
        type: 'input',
        onChange: (e) => { this.onChange(e, 'timeout') }
      },
      {
        label: '压测持续时间',
        key: 'duration',
        value: params.duration,
        placeholder: '请输入 压测持续时间 (仅数字有效)',
        isRequired: true,
        type: 'input',
        onChange: (e) => { this.onChange(e, 'duration') }
      }
    ]
    return (
      <Modal
        title={'添加 case'}
        visible={showModal}
        width={900}
        onOk={this.onOk}
        onCancel={onCancel}
      >
        <FormItem
          getCheck={(cb) => {
            this.getCheck = cb
          }}
          onChange={this.onParamsChange}
          formSetting={this.formSetting}
          params={params}
        />
      </Modal>
    )
  }
}
export default Index