/* eslint-disable no-trailing-spaces */
import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
// import '@ant-design/compatible/assets/index.css';
import { Input } from 'antd-v4';
import styles from '../../index.less';

const FormItem = Form.Item;
class ShowTableEditComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value,
      gdsformconst: this.props.gdsformconst,
      editable: this.props.editable || false,
      must: this.props.must,
    };
  }

  componentWillReceiveProps(nextProps) {
    const { value, must } = nextProps;
    if (value !== '') {
      this.setState({ value, must });
    }
    if (nextProps.editable !== this.state.editable) {
      this.setState({ editable: nextProps.editable });
      if (nextProps.editable) {
        this.cacheValue = this.state.value;
      }
    }
    if (nextProps.status && nextProps.status !== this.props.status) {
      if (nextProps.status === 'save') {
        this.props.onChange(this.state.value);
      } else if (nextProps.status === 'cancel') {
        this.setState({ value: this.cacheValue, validateStatus: 'success', errorMsg: null });
        this.props.onChange(this.cacheValue);
      }
    }
  }
  shouldComponentUpdate(nextProps, nextState) {
    if (nextState.value !== nextProps.value) return true;
    return nextProps.editable !== this.state.editable ||
      nextState.value !== this.state.value;
  }
  handlevalidate = (value) => {
    if (value !== '') {
      return {
        validateStatus: 'success',
        errorMsg: null,
      };
    }
    const textName = this.state.gdsformconst.filter(item => (item.sName === 'required'))[0].showName;
    return {
      validateStatus: 'error',
      errorMsg: textName,
    };
  };
  handleChange(e) {
    const { value } = e.target;
    this.setState({ value });
    // if (this.props.must === false) {
    //   return;
    // }
    this.setState({
      validateStatus: this.handlevalidate(value).validateStatus,
      errorMsg: this.handlevalidate(value).errorMsg,
    });
    this.props.onChange(value);
  }

  render() {
    const { editable, value, must } = this.state;
    const textName = this.state.gdsformconst.filter(item => (item.sName === 'required'))[0].showName;
    return (
      <div>
        {
          editable ?
            <div>
              <FormItem
                validateStatus={this.state.validateStatus}
                help={this.state.errorMsg}
                className={styles.editInput}
              >
                {
                  must ?
                    <Input
                      placeholder={textName}
                      onChange={e => this.handleChange(e)}
                      value={value}
                    />
                    :
                    <Input
                      onChange={e => this.handleChange(e)}
                      value={value}
                    />
                }
              </FormItem>
            </div>
            :
            <div className={styles.editSpan}>
              <span>{value}</span>
            </div>
        }
      </div>
    );
  }
}

export default ShowTableEditComponent;