/**
 * 钟是志
 * 2019年11月5日
 * 流程引擎 ChildForm组件
 *
 * */


import ButtonDiy from '@/baseComponent/ButtonDiy';
import ModalDiy from '@/baseComponent/ModalDiy';
import React, { Component, Fragment } from 'react';
import { mustHaveValue } from '@/baseComponent/utils';
import {  Badge, Icon } from 'antd';
import FormArray from './FormArray';

export default class ChildForm extends Component {

  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
      formValues: [{
        formKey: Math.random(),
      }],
      requireOtherFiled: {},
    };
  }


  changeShow = () => {
    const { value } = this.props;
    const { showModal } = this.state;
    if (!value || typeof value !== 'object' || !Array.isArray(value)) {
      this.setState({
        formValues: [{
          formKey: Math.random(),
        }],
        showModal: !showModal,
      });
    } else {
      let formValues = [];
      for (let item of value) {
        formValues.push(
          {
            formKey: Math.random(),
            ...item,
          });
      }
      this.setState({
        formValues,
        showModal: !showModal,
      });
    }

  };

  formStateChange = (value, key, index) => {
    let oldValue = this.state.formValues;
    oldValue[index][key] = value;
    this.setState({
      formValues: oldValue,
    });
  };
  addOneForm = () => {
    let oldValue = this.state.formValues;
    oldValue.push({
      formKey: Math.random(),
    });
    this.setState({
      formValues: oldValue,
    });
  };

  deleteOneForm = (index) => {
    let oldValue = this.state.formValues;
    oldValue.splice(index, 1);
    this.setState({
      formValues: oldValue,
    });
  };

  componentDidMount() {

  }

  handleOk = () => {
    const { formValues } = this.state;
    const { config } = this.props;
    const { componentProps: { thisFields } } = config;
    for (let item of formValues) {
      if (!mustHaveValue(thisFields, item)) {
        return false;
      }
    }
    this.props.onChange(formValues, config.key);
    this.changeShow();
    return false;
  };

  render() {
    const { showModal, formValues } = this.state;
    const { config, disabled } = this.props;
    const { componentProps: { thisFields } } = config;
    const modalProps = {
      handleOk: this.handleOk,
      title: config.name,
      handleCancel: this.changeShow,
      width: 800,
    };
    if(disabled){
      modalProps.footer = null;
    }
    const Fields = [];

    for(let item of thisFields){
      if(item.comName !== 'Label'){
        Fields.push(item.name);
      }
    }
    const Filter = [];
    for(let item of thisFields){
      let name = '';
      if(item.defaultValue){
       name = item.defaultValue.replace(/[\r\n]/g,"");
      }
      if(item.comName === 'Label' && name &&  Fields.indexOf(name) > -1){
          continue;
      }else{
        Filter.push(item);
      }
    }


    return (
      <Fragment>
        <ButtonDiy name={disabled ? '查看' : '编辑'}
                   handleClick={this.changeShow}/>

        {showModal ?
          <ModalDiy {...modalProps}>
            {
              formValues.map((x, index) => {
                return (
                  <div
                    style={{
                      border: '1px solid gray',
                      width: '95%',
                      margin: '0 auto',
                      marginBottom: '15px',
                    }}
                    key={x.formKey}>
                    {
                      disabled ?
                        <Badge count={
                          <Icon type={'check'}
                                style={{
                                  color: '#52c41a',
                                  paddingTop: '20px',
                                  paddingRight: '20px',
                                }}/>
                        }
                        >
                        <FormArray config={thisFields}
                                   value={x}
                                   changeValue={(value, key) => {
                                     this.formStateChange(value, key, index);
                                   }}
                                   disabled={disabled}
                                   nameSpan={{ big: 7, small: 7 }}
                                   fileSpan={{ big: 2, small: 2 }}/>
                        </Badge>
                        : <Badge count={
                          <Icon type={'close-circle'}
                                onClick={() => {
                                  this.deleteOneForm(index);
                                }}
                                style={{
                                  color: '#f5222d',
                                  paddingTop: '20px',
                                  paddingRight: '20px',
                                }}/>
                        }
                        >
                          <FormArray config={Filter}
                                     value={x}
                                     changeValue={(value, key) => {
                                       this.formStateChange(value, key, index);
                                     }}
                                     disabled={disabled}
                                     nameSpan={{ big: 9, small: 9 }}
                                     fileSpan={{ big: 2, small: 2 }}/>
                        </Badge>
                    }

                  </div>
                );
              })
            }
            {
              disabled ? null :
                <div style={{ paddingTop: '20px', textAlign: 'center' }}>
                  <ButtonDiy name={'新增'}
                             className={'defaultRed'}
                             handleClick={this.addOneForm}
                  />
                </div>
            }

          </ModalDiy> : null}
      </Fragment>);
  }
}