/* eslint-disable object-curly-newline,prefer-destructuring */
import React, { Component } from 'react';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Form } from 'antd';
import ShowType from '@/components/Common/CommonComponent';
import AntdDraggableModal from '@/components/Common/AntdDraggableModal';
import CommonListSelectTree from '@/components/Common/CommonListSelectTree';
import * as commonUtils from '@/utils/utils';/* 通用方法 */

const FormItem = Form.Item;

export default class CommonViewFlex extends Component {
  constructor(props) {
    super(props);
    this.state = {
      openNewTabFlag: false,
      commonFieldPopupVisible: false,
      commonFieldPopupTbName: 'name',
      commonFieldPopupShowConfig: {},
      randomId: commonUtils.createSid(),
    };
  }

  componentWillReceiveProps() {
    if (this.state.openNewTabFlag) {
      const dom = document.getElementsByClassName(`${this.state.randomId}-CommonListSelectTree`)[0];
      dom.parentElement.parentElement.style.display = 'block';
      this.setState({
        openNewTabFlag: false,
      });
    }
  }

  // shouldComponentUpdate(nextProps) {
  //   const { masterData, expandView, enabled } = this.props;
  //   return masterData !== nextProps.masterData || expandView !== nextProps.expandView || enabled !== nextProps.enabled;
  // }
  onOpenNewTab = () => {
    const dom = document.getElementsByClassName(`${this.state.randomId}-CommonListSelectTree`)[0];
    dom.parentElement.parentElement.style.display = 'none';
    this.setState({
      openNewTabFlag: true,
    });
  };
  handleToggle = () => {
    const { expandView } = this.props;
    this.props.onSaveState({ expandView: !expandView });
  };
  handleViewClick = (name, sName, sId) => {
    this.props.onViewClick(name, sName, sId);
  };
  /* 字段弹窗 */
  handleFieldPopupModal= (showConfig, name) => {
    this.setState({
      commonFieldPopupVisible: true,
      commonFieldPopupTbName: name,
      commonFieldPopupShowConfig: showConfig,
    });
  }
  handleSelectCommonFieldPopup = (name, selectConfig, selectData) => {
    const { commonFieldPopupTbName, commonFieldPopupShowConfig } = this.state;
    this.props.onSelectCommonPopup(name, selectConfig, selectData, commonFieldPopupTbName, commonFieldPopupShowConfig);
  };
  handleSelectCancel = (modelVisible) => {
    this.setState({
      [modelVisible]: false,
    });
  };

  render() {
    const { sModelsId, enabled, sUseInfo, app, sModelsType, tableConfigType, isEnabledPlcNo } = this.props;
    const { commonFieldPopupVisible, randomId } = this.state;
    let { masterData } = this.props;
    const masterConfig = this.props.masterconfig ? this.props.masterconfig : this.props.masterConfig;
    masterData = masterData === undefined ? {} : masterData;
    let masterShowConfig = [];
    if (tableConfigType) {
      masterShowConfig = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.sControlName.split('_')[1] === tableConfigType) : [];
    } else {
      masterShowConfig = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.sControlName.indexOf('_') === -1) : [];
    }
    const formItemLayout = { labelCol: { span: 2 }, wrapperCol: { span: 22 } };

    /* 字段弹窗功能 */
    let commonFieldPopupProps = {};
    let commonFieldPopupTitle = '选择弹窗';
    if (commonUtils.isNotEmptyObject(this.props)) {
      let commonFieldPopupConfig = {};
      const { masterConfig, sModelsId } = this.props;
      if (commonUtils.isNotEmptyObject(masterConfig)) {
        const iIndex = masterConfig.gdsconfigformslave.findIndex(item => commonUtils.isNotEmptyObject(item.sName) && item.sDropDownType === 'popup');
        if (iIndex > -1) {
          commonFieldPopupConfig = masterConfig.gdsconfigformslave[iIndex];
          commonFieldPopupTitle = commonUtils.isNotEmptyObject(commonFieldPopupConfig) && commonUtils.isNotEmptyObject(commonFieldPopupConfig.sActiveName) ? commonFieldPopupConfig.sActiveName : commonFieldPopupTitle;
          commonFieldPopupProps = {
            app: {
              ...this.props.app,
              currentPane: {
                name: 'commonPopup',
                config: commonFieldPopupConfig,
                conditonValues: this.props.getSqlCondition(commonFieldPopupConfig),
                title: commonFieldPopupTitle,
                route: '/indexPage/commonList',
                formRoute: '/indexPage/commonList',
                formId: commonFieldPopupConfig.sActiveId,
                key: sModelsId + commonFieldPopupConfig.sId,
                sModelsType: 'search/commonPopup',
                select: this.handleSelectCommonFieldPopup,
                selectCancel: this.handleSelectCancel.bind(this, 'commonFieldPopupVisible'),
              },
            },
            dispatch: this.props.dispatch,
            content: this.props.content,
            id: randomId,
            onOpenNewTab: this.onOpenNewTab,
            outerMasterData: this.props.masterData,
            realizeHeight: this.props.realizeHeight, /* 拖动偏移高度 */
          };
        }
      }
    }

    return (
      <FormItem className={`searchMainForm searchMainForm_${app.currentPane.key || 0}`} style={{ overflow: this.props.isAutoHeight ? 'auto' : '', height: this.props.isAutoHeight ? this.props.AutoTableHeight : '' }}>
        <Row type="flex" style={{ height: 'auto', overflow: 'auto' }}>
          {
            masterShowConfig.map((child) => {
              const iRowNum = child.iColValue === 1 ? 6 : 1; /* 1个字段占的网格个数 ，网格总个数是24 */
              const sMemo = child.sName.toLowerCase().endsWith('memo');
              // const iColValue = sMemo ? 21 : child.iColValue * 6; /* 跨度 */
              const iColValue = sMemo ? 24 : child.iColValue * iRowNum; /* 跨度 */ /* 产品部要求 备注设置成一行到底 */
              const iOrder = sMemo ? 100 : child.iOrder > 100 ? 100 : child.iOrder; /* 排序 */
              const sFormulaMemo = child.sName.toString() === 'sFormulaMemo' ? 'none' : 'block';
              // sUseInfo是指被其他单据调用，或者被审核
              let enabledNew = (enabled && !child.bReadonly && !child.specialControl && commonUtils.isEmpty(sUseInfo));
              if (child.iTag === 1) {
                enabledNew = false;
              } else if (child.iTag === 3) {
                enabledNew = true;
              }
              // 设备信息页面修改MES系统PLC编号，控制是否输入
              if (sModelsType === 'element/machineInfo' && child.sName === 'iPlcNo') {
                enabledNew = isEnabledPlcNo;
              }
              const showTypeProps = {
                app,
                iColValue,
                record: masterData,
                name: 'master',
                form: this.props.form,
                formId: sModelsId,
                getSqlDropDownData: this.props.getSqlDropDownData,
                getSqlCondition: this.props.getSqlCondition,
                handleSqlDropDownNewRecord: this.props.handleSqlDropDownNewRecord,
                getFloatNum: this.props.getFloatNum,
                getDateFormat: this.props.getDateFormat,
                onChange: this.props.onChange,
                showConfig: child,
                formItemLayout: sMemo ? formItemLayout : {},
                textArea: sMemo,
                enabled: enabledNew,
                dataValue: masterData[child.sName],
                bTable: false,
                onFilterDropDownData: this.props.onFilterDropDownData,
                onViewClick: this.handleViewClick,
                onSaveState: this.props.onSaveState,
                onFieldPopupModal: this.handleFieldPopupModal, /* 字段选择弹窗 */
              };
              return (
                <Col key={child.sId} span={iColValue} order={iOrder} style={{ display: sFormulaMemo, position: 'relative' }}>
                  <ShowType {...showTypeProps} />
                  {masterData !== undefined && commonUtils.isEmptyObject(masterData[child.sName]) &&
                  (
                    [
                      'sBillNo',
                      'sMakePerson',
                      'tCheckDate',
                      'sCheckPerson',
                      'sUpdatePerson',
                      'tUpdate',
                      'tMakeDate',
                    ].includes(child.sName)
                  ) ?
                    <Col style={{ display: enabled ? 'block' : 'none' }} className="speacialNote" key={child.sId} span="12">
                      {sModelsType !== 'smg/sendMailMsg' ? '保存后自动生成' : '发送消息无需生成单据号'}
                    </Col> : '' }
                </Col>
              );
            })
          }
        </Row>
        {
          commonFieldPopupVisible ?
            <AntdDraggableModal
              width={1300}
              zIndex={1000}
              title={commonFieldPopupTitle}
              visible={commonFieldPopupVisible}
              onCancel={this.handleSelectCancel.bind(this, 'commonFieldPopupVisible')}
              footer={null}
              onSaveState={this.props.onSaveState}
              className={`${randomId}-CommonListSelectTree`}
            >
              <CommonListSelectTree {...commonFieldPopupProps} />
            </AntdDraggableModal>
            : ''
        }
      </FormItem>
    );
  }
}