/* eslint-disable function-paren-newline */
import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Button } from 'antd';
import * as commonUtils from '../../utils/utils';
import * as commonConfig from '../../utils/config';
import * as commonFunc from './commonFunc';
import styles from '../../index.less';

const FormItem = Form.Item;

class CommonCalculatorComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  /**   渲染前只执行一次   */
  componentWillMount() {
    this.assignmentWillProps(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.assignmentWillProps(nextProps);
  }

  assignmentWillProps = (props) => {
    this.setState({ disabled: props.enabled === undefined ? true : !props.enabled });
  }

  handleClick = (e, child) => {
    this.props.onButtonChange('calculator', child);
  }

  handleField = () => {
    this.props.onField();
  };

  render() {
    const { disabled } = this.state; /* 中文部分 */
    const { masterConfig, gdsformconst, gdsjurisdiction } = this.props;
    const gdsconfigformslave = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '') : [];
    const barContent = [];
    const button = JSON.parse(JSON.stringify(commonConfig.jsqData));
    button.forEach((btn) => {
      const btnConfig = commonFunc.getConfig('', btn.sName, gdsconfigformslave, gdsformconst, gdsjurisdiction, btn.showName);
      if (btnConfig.bVisible) {
        barContent.push(
          <Col span={5} key={btn.sName}>
            <Button disabled={disabled} onClick={e => this.handleClick(e, btn.showName)}>
              {btnConfig.showName}
            </Button>
          </Col>);
      }
    });
    return (
      <FormItem className={styles.subForm} style={{ marginTop: 0 }}>
        <Row type="flex" justify="space-between">
          <Col span={5}>
            <Button disabled={disabled} onClick={e => this.handleClick(e, 1)}>1</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, 4)}>4</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, 7)}>7</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, 0)}>0</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, '(')}>(</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, '>=')}>&gt;=</Button>
          </Col>
          <Col span={5}>
            <Button disabled={disabled} onClick={e => this.handleClick(e, 2)}>2</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, 5)}>5</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, 8)}>8</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, '00')}>00</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, ')')}>)</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, '<=')}>&lt;=</Button>
          </Col>
          <Col span={5}>
            <Button disabled={disabled} onClick={e => this.handleClick(e, 3)}>3</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, 6)}>6</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, 9)}>9</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, '.')}>.</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, '>')}>&gt;</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, '=')}>=</Button>
          </Col>
          <Col span={5}>
            <Button disabled={disabled} onClick={e => this.handleClick(e, '+')}>+</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, '-')}>-</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, '*')}>*</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, '/')}>/</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, '<')}>&lt;</Button>
            <Button disabled={disabled} onClick={e => this.handleClick(e, '<>')}>&lt; &gt;</Button>
          </Col>
        </Row>

        <Row type="flex" justify="space-between">
          {barContent}
          <Col span={5}>
            <Button disabled={disabled} onClick={this.handleField}>验证</Button>
          </Col>
        </Row>
      </FormItem>
    );
  }
}

export default CommonCalculatorComponent;