import React from 'react';
import ExtendsComponent from '../../components/ExtendsComponent';
import { Form, Row, Col, Card, Divider, Button } from 'antd';
import FormItem from '../../components/FormItem';
import './styles.less';

class AntForm extends ExtendsComponent {
  constructor(props) {
    super(props);
  }

  getRowColArr = (fieldsArr = []) => {
    // console.log('getRowColArr before', fieldsArr);
    let sum_span = 0;
    let colArr = fieldsArr.reduce((colArrTemp, item) => {
      const { span = 12 } = item;
      if (colArrTemp.length === 0) {
        colArrTemp.push([]);
      }
      colArrTemp[colArrTemp.length - 1].push(item);
      sum_span += span;
      if (sum_span >= 24) {
        colArrTemp.push([]);
        sum_span = 0;
      }
      return colArrTemp;
    }, []);
    // console.log('colArr', colArr);
    return colArr;
  };

  handleSubmit = () => {
    const { validateFields } = this.props.form;
    validateFields((err, values) => {
      if (!err) {
        // console.log('getFieldsValidate', values)
        this.props.handleSubmit(values);
      }
    });
  };

  render() {
    const {
      header,
      footer,
      form,
      disabled: form_disabled,
      loading = false,
      showCard = false, // showCard 表示表单是否进行分组
      fieldsGroup = [],
      fieldsArr = [],
      operateBtns = [],
    } = this.props;
    // console.log('ant form render', { showCard, fieldsGroup, fieldsArr });

    const FORM_LAYOUT = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    };
    return (
      <div className={"ant-form"}>
        {header || ''}
        <Form {...FORM_LAYOUT}>
          {showCard ? (
            <>
              {(fieldsGroup || []).map((item, index) => {
                const { visible = true, fieldsArr: gFieldsArr = [], ...others } = item;
                return visible ? (
                  <Card key={index} type="inner" {...others}>
                    {(this.getRowColArr(gFieldsArr) || []).map((rowItem, rowItemIndex) => {
                      return (
                        <Row key={rowItemIndex}>
                          {(rowItem || []).map((fieldItem, fieldItemKey) => {
                            const { span = 12, itemConfig = {} } = fieldItem;
                            itemConfig.form_disabled = form_disabled;
                            fieldItem.itemConfig = itemConfig;
                            return (
                              <Col key={fieldItemKey} span={span}>
                                <FormItem key={fieldItem.name} form={form} {...fieldItem} />
                              </Col>
                            );
                          })}
                        </Row>
                      );
                    })}
                  </Card>
                ) : (
                  ''
                );
              })}
            </>
          ) : (
            <>
              {(this.getRowColArr(fieldsArr) || []).map((rowItem, index) => {
                return (
                  <Row key={index}>
                    {(rowItem || []).map((fieldItem, fieldItemKey) => {
                      const { span = 12, itemConfig = {} } = fieldItem;
                      itemConfig.form_disabled = form_disabled;
                      fieldItem.itemConfig = itemConfig;
                      return (
                        <Col key={fieldItemKey} span={span}>
                          <FormItem key={fieldItem.name} form={form} {...fieldItem} />
                        </Col>
                      );
                    })}
                  </Row>
                );
              })}
            </>
          )}
        </Form>
        {footer || ''}
        <Divider type="horizontal" />
        <div className={"operate-btns"}>
          {Array.isArray(operateBtns) && operateBtns.length ? (
            operateBtns.map((item, index) => {
              const { type = 'default', method = '', btnText = '', handleClick } = item;
              return (
                <Button
                  key={index}
                  loading={method === 'submit' ? loading : false}
                  type={type}
                  onClick={() => {
                    if (method === 'submit') {
                      this.handleSubmit();
                    } else if (method === 'cancel') {
                      this.props.handleCancel;
                    } else {
                      let values = this.props.form.getFieldsValue();
                      handleClick && handleClick(values);
                    }
                  }}
                >
                  {btnText}
                </Button>
              );
            })
          ) : (
            <>
              <Button type="primary" loading={loading} onClick={this.handleSubmit}>
                提交
              </Button>
              <Button onClick={this.props.handleCancel}>取消</Button>
            </>
          )}
        </div>
      </div>
    );
  }
}
const TIMESTAMP = new Date().getTime();
export default Form.create({ name: `ant-form-${TIMESTAMP}` })(AntForm);