/* eslint-disable array-callback-return,no-undef */
import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
// import '@ant-design/compatible/assets/index.css';
import { Layout, Spin, Tabs, Avatar } from 'antd-v4';
import styles from '../../index.less';
import Toolbar from '../Common/ToolBar/ToolBarNew';
import * as commonFunc from '../Common/commonFunc';
import CommonBase from '../Common/CommonBase';
import CommonElementEvent from '../Common/CommonElementEvent';
import CommonView from '../Common/CommonView';
import * as commonUtils from '../../utils/utils';
import StaticEditTable from '../Common/CommonTable';
import * as commonBusiness from '../Common/commonBusiness';

import commonConfig from '../../utils/config';/* 通用方法 */

const { Header, Content } = Layout;
const { TabPane } = Tabs;

let oThis;
class ElemachineInfoComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
    this.form = {}; /*   表单对象   */
    oThis = this;
  }
  onTabChange = (key) => {
    this.props.onSaveState({ activeKey: key });
  };

  render() {
    const { pageLoading } = this.props;
    return (
      <div>
        <Spin spinning={pageLoading}>
          <div>
            <EleMachineInfoComponent
              {...this.props}
              {...this.state}
              onTabChange={this.onTabChange}
            />
          </div>
        </Spin>
      </div>
    );
  }
}
const EleMachineInfoComponent = Form.create({
  mapPropsToFields(props) {
    const { masterData, masterConfig } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form, masterConfig);
    return obj;
  },
})((props) => {
  const {
    form,
    app,
    onReturnForm,
    iPlcNoConfig,
    slave0Config,
    slave1Config,
    slave2Config,
    masterData,
    AutoTableHeight,
    masterConfig,
    slaveData,
    slavePagination,
    isSmall,
  } = props;
  /*   回带表单   */
  onReturnForm(form);
  if (commonUtils.isNotEmptyObject(masterData)) {
    masterData.bCheck = true;
  }
  const masterShowConfig = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '') : [];
  const tableConfigTypeArr = [];
  masterShowConfig.map((child) => {
    if (child.sControlName.indexOf('_') > -1) {
      const tableType = child.sControlName.split('_')[1];
      const isIndex = tableConfigTypeArr.findIndex(item => item === tableType);
      if (isIndex === -1) {
        tableConfigTypeArr.push(tableType);
      }
    }
  });
  const firstTableConfigTypeIndex = commonUtils.isNotEmptyArr(tableConfigTypeArr) ? tableConfigTypeArr[0].replace(/[^\d]/g, ' ') : '0';
  const pagination = {
    pageSize: commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slaveData) ? 0 : slaveData.length,
    current: commonUtils.isEmptyObject(slavePagination) ? 1 : slavePagination.current,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };

  let fixedHeight = oThis.cacheFixedHeight || '500px';
  if (oThis.tabRef) {
    const tabPositionY = oThis.tabRef.getBoundingClientRect().y;
    if (tabPositionY > 0) {
      fixedHeight = `calc(100vh - ${tabPositionY + 130}px)`;
      oThis.cacheFixedHeight = fixedHeight;
    }
  }
  // const autoHeight = `calc( ${AutoTableHeight} - 90px)`;
  const slaveTableProps = {
    ...commonBusiness.getTableTypes('slave', props),
    tableProps: {
      onChange: props.onTitleChange, pagination, AutoTableHeight: false,
    },
    fixedHeight,
    // templateProps,
  };
  const slave0TableProps = {
    ...commonBusiness.getTableTypes('slave0', props),
    tableProps: {
      onChange: props.onTitleChange, pagination, AutoTableHeight: false,
    },
    fixedHeight,
    // templateProps,
  };
  const slave1TableProps = {
    ...commonBusiness.getTableTypes('slave1', props),
    tableProps: {
      onChange: props.onTitleChange, pagination, AutoTableHeight: false,
    },
    fixedHeight,
    // templateProps,
  };
  const slave2TableProps = {
    ...commonBusiness.getTableTypes('slave2', props),
    tableProps: {
      onChange: props.onTitleChange, pagination, AutoTableHeight: false,
    },
    fixedHeight,
    // templateProps,
  };

  const MainContent = masterConfig && commonUtils.isNotEmptyArr(masterConfig.gdsconfigformslave) && commonUtils.isNotEmptyArr(masterConfig.gdsconfigformslave.filter(item => item.sControlName === 'MainContent')) ? masterConfig.gdsconfigformslave.filter(item => item.sControlName === 'MainContent')[0].showName : commonFunc.showMessage(app.commonConst, 'MainContent'); /* 从表 */
  const materialsInfo = masterConfig && commonUtils.isNotEmptyArr(masterConfig.gdsconfigformslave) && commonUtils.isNotEmptyArr(masterConfig.gdsconfigformslave.filter(item => item.sControlName === 'zMaterials')) ? masterConfig.gdsconfigformslave.filter(item => item.sControlName === 'zMaterials')[0].showName : commonFunc.showMessage(app.commonConst, 'zMaterials'); /* 表一 */
  const checkInfo = masterConfig && commonUtils.isNotEmptyArr(masterConfig.gdsconfigformslave) && commonUtils.isNotEmptyArr(masterConfig.gdsconfigformslave.filter(item => item.sControlName === 'zCheck')) ? masterConfig.gdsconfigformslave.filter(item => item.sControlName === 'zCheck')[0].showName : commonFunc.showMessage(app.commonConst, 'zCheck'); /* 表二 */
  const slaveInfo0 = masterConfig && commonUtils.isNotEmptyArr(masterConfig.gdsconfigformslave) && commonUtils.isNotEmptyArr(masterConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo0')) ? masterConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo0')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo0'); /* 表三 */

  return (
    <Form>
      <Layout>
        <Header className={styles.header}>
          <Toolbar {...props} />
        </Header>
        <Layout className={`${styles.clayout}`}>
          <Content className={styles.content}>
            <div className="bill-search-group" >
              <CommonView {...props} />
            </div>
            <div id="slaveTabs" className={styles.bShow} ref={(ref) => { oThis.tabRef = ref; }}>
              <div>
                <Avatar src={props.imgSrc} />
              </div>
              <Tabs
                className={styles.slaveTabs}
                tabBarStyle={{ margin: '0 10px' }}
                onChange={props.onTabChange}
                activeKey={props.activeKey === undefined ? firstTableConfigTypeIndex : props.activeKey}
              >
                {
                  commonUtils.isNotEmptyArr(tableConfigTypeArr) ?
                    tableConfigTypeArr.map((item) => {
                      // 匹配数字
                      const num = item.replace(/[^\d]/g, ' ');
                      let tabName = item.replace(/\d+/g,'');
                      /* 从主表配置 找到控件名=tabName,否则取他的showName */
                      const tableConfigArr = masterConfig?.gdsconfigformslave.filter(row => row.sControlName === item.trim());
                      if(commonUtils.isNotEmptyArr(tableConfigArr)) {
                        tabName=tableConfigArr[0].showName;
                      }
                      return (
                        <TabPane tab={tabName} key={num} className="xly-bill-list" style={{ height: AutoTableHeight }}>
                          <div>
                            <CommonView
                              {...props}
                              // 使高度和从表高度一直
                              isAutoHeight="ture"
                              tableConfigType={item}
                              tableConfigTypeArr={tableConfigTypeArr}
                            />
                          </div>
                        </TabPane>
                      );
                    })
                    : ''
                }
                {
                  commonUtils.isNotEmptyObject(iPlcNoConfig) ?
                    <TabPane tab={MainContent} key={tableConfigTypeArr.length} style={{ height: AutoTableHeight }} className="xly-bill-list">
                      <div className="TabPaneStyle iPlcNoTable" style={{ height: '100%' }}>
                        <StaticEditTable {...slaveTableProps} footer="hidden" />
                      </div>
                    </TabPane>
                    : ''
                }
                {
                  commonUtils.isNotEmptyObject(slave0Config) ?
                    <TabPane tab={materialsInfo} key={tableConfigTypeArr.length + 1} style={{ height: AutoTableHeight }} className="xly-bill-list">
                      <div className="TabPaneStyle iPlcNoTable" style={{ height: '100%' }}>
                        <StaticEditTable {...slave0TableProps} setOpterationColumn="Y" footer="hidden" />
                      </div>
                    </TabPane>
                    : ''
                }
                {
                  commonUtils.isNotEmptyObject(slave1Config) ?
                    <TabPane tab={checkInfo} key={tableConfigTypeArr.length + 2} style={{ height: AutoTableHeight }} className="xly-bill-list">
                      <div className="TabPaneStyle iPlcNoTable" style={{ height: '100%' }}>
                        <StaticEditTable {...slave1TableProps} setOpterationColumn="Y" footer="hidden" />
                      </div>
                    </TabPane>
                    : ''
                }
                {
                  commonUtils.isNotEmptyObject(slave2Config) ?
                    <TabPane tab={slaveInfo0} key={tableConfigTypeArr.length + 3} style={{ height: AutoTableHeight }} className="xly-bill-list">
                      <div className="TabPaneStyle iPlcNoTable" style={{ height: '100%' }}>
                        <StaticEditTable {...slave2TableProps} setOpterationColumn="Y" footer="hidden" />
                      </div>
                    </TabPane>
                    : ''
                }
              </Tabs>
            </div>
          </Content>
        </Layout>
      </Layout>
    </Form>
  );
});

export default CommonBase(CommonElementEvent(ElemachineInfoComponent));