/**
 * Created by mar105 on 2019-02-27.
 */
/* eslint-disable object-curly-newline,prefer-destructuring */
import React, { Component } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
// import '@ant-design/compatible/assets/index.css';
import { Row, Col, Button, Upload } from 'antd-v4';
import config from '@/utils/config';
import * as commonUtils from '@/utils/utils';/* 通用方法 */
import ShowType from './CommonComponent';

const FormItem = Form.Item;

export default class CommonViewNew extends Component {
  /**   构造函数   */
  constructor(props) {
    super(props);
    this.state = {
      enabled: props.enabled,
      masterConfig: props.masterConfig,
      masterData: props.masterData,
      gdsconfigformmasterId: props.gdsconfigformmasterId,
    };
  }

  /**   渲染前只执行一次   */
  componentWillMount() {
    /*   state和this属性赋值   */
    this.assignmentWillProps(this.props);
  }

  /**   props改变的时候触发   */
  componentWillReceiveProps(nextProps) {
    /*   state和this属性赋值   */
    this.assignmentWillProps(nextProps);
  }

  /**   返回true执行渲染,返回false不渲染   */
  shouldComponentUpdate(nextProps, nextState) {
    const {
      masterConfig, masterData, enabled, token, gdsconfigformmasterId,
    } = this.state;
    return enabled !== nextState.enabled ||
      JSON.stringify(masterConfig) !== JSON.stringify(nextState.masterConfig) ||
      JSON.stringify(masterData) !== JSON.stringify(nextState.masterData) ||
      JSON.stringify(token) !== JSON.stringify(nextState.token) ||
      JSON.stringify(gdsconfigformmasterId) !== JSON.stringify(nextState.gdsconfigformmasterId);
  }

  assignmentWillProps = (props) => {
    this.setState({
      enabled: props.enabled,
      masterConfig: props.masterConfig,
      masterData: props.masterData,
      gdsconfigformmasterId: props.gdsconfigformmasterId,
    });
  }
  handleClick = (e, btnName) => {
    this.props.onBtnClick(e, btnName);
  }
  rowReturnType = (child, masterData) => {
    const formItemLayout = { labelCol: { span: 2 }, wrapperCol: { span: 18 } };
    const { sModelsId, app } = this.props;
    const { enabled, gdsconfigformmasterId } = this.state;
    const { token } = app;
    if (child.sControlName.toLowerCase().endsWith('upload') && child.sName === '') {
      const { showName, sControlName, needUpload } = child;
      const uploadProps = {
        action: `${config.server_host}import/checkExcel?sModelsId=${sModelsId}&gdsconfigformmasterId=${gdsconfigformmasterId}&token=${token}`,
        onChange: this.props.onUploadChange.bind(this, sControlName),
        accept: 'xls/*', // *.xls
        beforeUpload: () => {
          /* 查看时不可上传 */
          if (!needUpload) {
            return false;
          }
        },
        onSuccess: (response) => {
          this.props.onShowData(response, sControlName);
        },
        showUploadList: false,

      };
      // 上传使用
      const divProps = Object.assign({}, uploadProps);
      return (
        <Upload {...divProps}>
          <Button >
            <UploadOutlined />{ showName }
          </Button>
        </Upload>
      );
    } else if (child.sControlName.toLowerCase().startsWith('btn') && !child.sControlName.toLowerCase().endsWith('upload') && child.sName === '') {
      const { sControlName, showName } = child;
      return (<Button onClick={e => this.handleClick(e, sControlName)} > {showName} </Button>);
    } else if (child.sName !== '') {
      const sMemo = child.sName.toLowerCase().endsWith('memo');
      const iColValue = sMemo ? 21 : child.iColValue * 6; /* 跨度 */
      const iOrder = sMemo ? 100 : child.iOrder > 100 ? 100 : child.iOrder; /* 排序 */
      let enabledNew = (enabled && !child.bReadonly && !child.specialControl);
      if (child.iTag === 1) {
        enabledNew = false;
      } else if (child.iTag === 3) {
        enabledNew = true;
      }
      const showTypeProps = {
        form: this.props.form,
        getSqlDropDownData: this.props.getSqlDropDownData,
        getSqlCondition: this.props.getSqlCondition,
        handleSqlDropDownNewRecord: this.props.handleSqlDropDownNewRecord,
        getFloatNum: this.props.getFloatNum,
        onChange: this.props.onChange,
        showConfig: child,
        formItemLayout: sMemo ? formItemLayout : {},
        textArea: sMemo,
        enabled: enabledNew,
        dataValue: masterData[child.sName],
        bTable: false,
      };
      return (
        <Col span={iColValue} order={iOrder}>
          <ShowType {...showTypeProps} />
        </Col>
      );
    }
  }
  /**   绑定showType控件   */
  rowShowType = (rowConfig, masterData) => {
    const showConfig = commonUtils.isNotEmptyObject(rowConfig) ? rowConfig.gdsconfigformslave.filter(item => item.bVisible) : [];
    const children = [];
    for (const child of showConfig) {
      children.push(this.rowReturnType(child, masterData));
    }
    const rowProps = {};
    rowProps.children = children;
    return (<Row type="flex" {... rowProps} />);
  }

  render() {
    const { masterConfig } = this.state;
    let { masterData } = this.state;
    masterData = masterData === undefined ? {} : masterData;
    const rowConfig = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.rowGdsconfig : [];
    return (
      <FormItem className="searchMainForm">
        {
          rowConfig.map((child) => {
            return this.rowShowType(child, masterData);
          })
        }
      </FormItem>
    );
  }
}