/* 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-v4';
import * as commonUtils from '@/utils/utils';/* 通用方法 */
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';/* 单据业务功能 */

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

class SftLoginInfoComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
    this.form = {}; /*   表单对象   */
  }
  render() {
    const { pageLoading } = this.props;
    return (
      <div>
        <Spin spinning={pageLoading}>
          <div>
            <SftLoginComponent
              {...this.props}
              {...this.state}
            />
          </div>
        </Spin>
      </div>
    );
  }
}
const SftLoginComponent = Form.create({
  mapPropsToFields(props) {
    const { masterData } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form);
    return obj;
  },
})((props) => {
  const {
    form, onReturnForm, AutoTableHeight, app, departgroupConfig, brandgroupConfig,
  } = props;
  /*   回带表单   */
  onReturnForm(form);
  const tabJurgroup = commonFunc.showMessage(app.commonConst, 'tabJurgroup');/* 权限组 */
  const tabCustomergroup = commonFunc.showMessage(app.commonConst, 'tabCustomergroup');/* 客户查看权限 */
  const tabSupplygroup = commonFunc.showMessage(app.commonConst, 'tabSupplygroup');/* 供应商查看权限 */
  const tabPersongroup = commonFunc.showMessage(app.commonConst, 'tabPersongroup');/* 人员查看权限 */
  const tabProcessgroup = commonFunc.showMessage(app.commonConst, 'tabProcessgroup');/* 工序查看权限 */
  const tabDrivergroup = commonFunc.showMessage(app.commonConst, 'tabDrivergroup');/* 司机查看权限 */
  const tabDepartgroup = commonFunc.showMessage(app.commonConst, 'tabDepartgroup');/* 部门查看权限 */
  const tabApproveGroup = commonFunc.showMessage(app.commonConst, 'sftlogininfoCheck');/* 审核组权限 */
  const tabBrandgroup = '分管公司权限';

  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}>
              <div>
                <Avatar src={props.imgSrc} />
              </div>
              <Tabs className={`${styles.slaveTabs} basicInfo`} tabBarStyle={{ margin: '0 10px' }} >
                <TabPane tab={tabJurgroup}key={2} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 70px)` }}>
                  <div className="TabPaneStyle">
                    <StaticEditTable {...commonBusiness.getTableTypes('jurgroup', props)} footer="hidden" />
                  </div>
                </TabPane>
                <TabPane tab={tabCustomergroup} key={3} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 70px)` }}>
                  <div className="TabPaneStyle">
                    <StaticEditTable {...commonBusiness.getTableTypes('customergroup', props)} footer="hidden" />
                  </div>
                </TabPane>
                <TabPane tab={tabSupplygroup} key={4} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 70px)` }}>
                  <div className="TabPaneStyle">
                    <StaticEditTable {...commonBusiness.getTableTypes('supplygroup', props)} footer="hidden" />
                  </div>
                </TabPane>
                <TabPane tab={tabPersongroup} key={5} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 70px)` }}>
                  <div className="TabPaneStyle">
                    <StaticEditTable {...commonBusiness.getTableTypes('persongroup', props)} footer="hidden" />
                  </div>
                </TabPane>
                <TabPane tab={tabProcessgroup} key={6} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 70px)` }}>
                  <div className="TabPaneStyle">
                    <StaticEditTable {...commonBusiness.getTableTypes('processgroup', props)} footer="hidden" />
                  </div>
                </TabPane>
                <TabPane tab={tabDrivergroup} key={7} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 70px)` }}>
                  <div className="TabPaneStyle">
                    <StaticEditTable {...commonBusiness.getTableTypes('drivergroup', props)} footer="hidden" />
                  </div>
                </TabPane>
                {
                  commonUtils.isNotEmptyObject(departgroupConfig) ?
                    <TabPane tab={tabDepartgroup} key={8} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 70px)` }}>
                      <div className="TabPaneStyle">
                        <StaticEditTable {...commonBusiness.getTableTypes('departgroup', props)} footer="hidden" />
                      </div>
                    </TabPane> : ''
                }

                <TabPane tab={tabApproveGroup} key={9} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 70px)` }}>
                  <div className="TabPaneStyle">
                    <StaticEditTable {...commonBusiness.getTableTypes('approveGroup', props)} footer="hidden" />
                  </div>
                </TabPane>

                {
                  commonUtils.isNotEmptyObject(brandgroupConfig) ?
                    <TabPane tab={tabBrandgroup} key={10} className="xly-bill-list" style={{ height: `calc( ${AutoTableHeight} - 70px)` }}>
                      <div className="TabPaneStyle">
                        <StaticEditTable {...commonBusiness.getTableTypes('brandgroup', props)} onSelectRowChange1={props.onTableSelectRowChange} footer="hidden" />
                      </div>
                    </TabPane> : ''
                }
              </Tabs>
            </div>
          </Content>
        </Layout>
      </Layout>
    </Form>
  );
});

export default CommonBase(CommonElementEvent(SftLoginInfoComponent));