/* 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, Tabs, Spin, Avatar } from 'antd';
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 StaticEditTable from '../Common/CommonTable';/* 可编辑表格 */
import CommonView from '../Common/CommonView';
import * as commonBusiness from '../Common/commonBusiness';
import * as commonUtils from '../../utils/utils';/* 单据业务功能 */

const { Header, Content } = Layout;
const { TabPane } = Tabs;
class CustomerInfoComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
    this.form = {}; /*   表单对象   */
  }
  onTabChange = (key) => {
    this.props.onSaveState({ activeKey: key });
  };
  render() {
    const { pageLoading } = this.props;
    return (
      <div>
        <Spin spinning={pageLoading}>
          <div>
            <CustomerComponent
              {...this.props}
              {...this.state}
              onTabChange={this.onTabChange}
            />
          </div>
        </Spin>
      </div>
    );
  }
}
const CustomerComponent = Form.create({
  mapPropsToFields(props) {
    const { masterData } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form);
    return obj;
  },
})((props) => {
  const {
    form, onReturnForm, AutoTableHeight, app, masterConfig,
  } = props;
  /*   回带表单   */
  onReturnForm(form);
  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(child);
      }
    }
  });
  const firstTableConfigTypeIndex = commonUtils.isNotEmptyArr(tableConfigTypeArr) ? tableConfigTypeArr[0].sControlName.replace(/[^\d]/g, ' ') : '0';
  const tabContact = commonFunc.showMessage(app.commonConst, 'tabContact');/* 联系人 */
  const tabAddress = commonFunc.showMessage(app.commonConst, 'tabAddress');/* 地址 */
  const tabEleCustomerFinance = commonFunc.showMessage(app.commonConst, 'tabEleCustomerFinance');/* 财务 */
  return (
    <Form>
      <Layout>
        <Header className={styles.header}>
          <Toolbar {...props} />
        </Header>
        <Layout className={`${styles.clayout} ${styles.setHeight}`}>
          <Content className={styles.content}>
            <div className="bill-search-group">
              <CommonView {...props} />
            </div>
            <div id="slaveTabs" className={`${styles.bShow} ${styles.slaveTabHight}`} >
              <div>
                <Avatar src={props.imgSrc} />
              </div>
              <Tabs
                onChange={props.onTabChange}
                activeKey={props.activeKey === undefined ? '2' : props.activeKey}
                className={`${styles.slaveTabs} basicInfo`}
                tabBarStyle={{ margin: '0 10px' }}
              >
                <TabPane tab={tabContact} key={2} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 105px)` }}>
                  <div className="TabPaneStyle">
                    <StaticEditTable {...commonBusiness.getTableTypes('contact', props)} footer="hidden" setOpterationColumn="Y" />
                  </div>
                </TabPane>
                <TabPane tab={tabAddress} key={3} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 105px)` }}>
                  <div className="TabPaneStyle">
                    <StaticEditTable {...commonBusiness.getTableTypes('address', props)} footer="hidden" setOpterationColumn="Y" />
                  </div>
                </TabPane>
                {
                  commonUtils.isNotEmptyArr(tableConfigTypeArr) ?
                    <TabPane
                      tab={tabEleCustomerFinance}
                      key={firstTableConfigTypeIndex}
                      className="xly-bill-list"
                      style={{ height: AutoTableHeight }}
                    >
                      {
                        commonUtils.isNotEmptyArr(tableConfigTypeArr) ?
                          tableConfigTypeArr.map((item) => {
                            // // 匹配数字
                            // const num = item.sControlName.replace(/[^\d]/g, ' ');
                            const selfControl = item.sControlName.split('_')[1];
                            return (
                              <div className="bill-search-group">
                                <CommonView
                                  {...props}
                                  // 使高度和从表高度一直
                                  // isAutoHeight="ture"
                                  tableConfigType={selfControl}
                                  tableConfigTypeArr={tableConfigTypeArr}
                                />
                              </div>);
                          })
                          : ''
                      }
                    </TabPane> : ''
                }
              </Tabs>
            </div>
          </Content>
        </Layout>
      </Layout>
    </Form>
  );
});

export default CommonBase(CommonElementEvent(CustomerInfoComponent));