/* 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, Select } from 'antd-v4'; // Switch
import styles from '../../index.less';
import * as commonFunc from '../Common/commonFunc';
import CommonBase from '../Common/CommonBase';
import * as commonBusiness from '../Common/commonBusiness';/* 单据业务功能 */
import StaticEditTable from '../Common/CommonTable';/* 可编辑表格 */
import SearchComponent from '../Common/SearchComponent';/* 搜索组件 */
import CommonProductionPlanEvent from '../Common/CommonProductionPlanEvent';
import config from '../../utils/config';
import ProductionHeader from './productionHeader';/* 可编辑表格 */

const { Option } = Select;
const { Header, Content, Sider } = Layout;

class ProductionPlanInfoComponentInfo2 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.form = {}; /*   表单对象   */
  }
  render() {
    const { pageLoading } = this.props;
    return (
      <div className="product-plan-info-box">
        <Spin spinning={pageLoading} style={{ height: '100%' }}>
          <div style={{ height: '100%' }}>
            <ProductionPlanComponent
              style={{ height: '100%' }}
              {...this.props}
              {...this.state}
            />
          </div>
        </Spin>
      </div>
    );
  }
}
const ProductionPlanComponent = Form.create({
  mapPropsToFields(props) {
    const { masterData } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form);
    return obj;
  },
})((props) => {
  const {
    form, onReturnForm, onSelectChange, sStateSelect, isDragAndDrop, stateOption,
  } = props;

  /*   回带表单 */
  onReturnForm(form);
  const pageFlag = sStateSelect === '0' || sStateSelect === '1' || sStateSelect === '2';
  const workTeamProps = {
    ...commonBusiness.getTableTypes('workCenter', props),
    tableProps: { rowKey: 'sWorkCenterId' },
    isKeyUsesId: false,
    enabled: false,
  };

  const machineProps = {
    ...commonBusiness.getTableTypes(sStateSelect === '0' ? 'unMachine' : 'machine', props),
    tableProps: { rowKey: 'sMachineId' },
    isKeyUsesId: false,
    enabled: false,
  };

  const pagination = {
    onChange: props.onPaginationChange,
    size: 'large',
    pageSize: config.pageSize,
    pageNum: config.pageNum,
    showQuickJumper: true,
  };

  const processProps = {
    ...commonBusiness.getTableTypes('slave', props),
    tableProps: { pagination: pageFlag ? false : pagination },
    scrollX: 3,
    isDragAndDrop,
  };

  return (
    <Form style={{ height: '100%' }}>
      <Layout style={{ height: '100%' }}>
        <Header className={styles.header} style={{ backgroundColor: 'rgb(100, 100, 100)' }}>
          <ProductionHeader {...props} />
        </Header>
        <Layout className={styles.clayout} style={{ height: '100%' }} >
          <div className={styles.content} style={{ height: '100%' }} >
            <Layout
              className="product-plain-container-layout"
              style={{
 margin: '5px 10px', height: '100%', flexDirection: 'row', backgroundColor: '#fff',
}}
            >
              <Sider className="product-plan-sider" width="340px">
                <div>
                  <Select style={{ padding: '10px 11px' }} onChange={onSelectChange} value={sStateSelect} defaultValue={stateOption ? stateOption[0].key : sStateSelect}>
                    {
                      stateOption ? stateOption.map((item) => {
                        return (<Option key={item.key}>{item.value}</Option>);
                      }) : ''
                    }
                    <Option value="99" >全部数据</Option>
                  </Select>
                </div>
                <div>
                  <StaticEditTable {...workTeamProps} />
                </div>
                <div style={{ backgroundColor: '#fff' }}>
                  <StaticEditTable {...machineProps} />
                </div>
              </Sider>
              <Content
                style={{
                backgroundColor: '#fff', height: '100vh', overflowY: 'hidden', borderRight: '1px solid #ddd', borderLeft: '1px solid #ddd',
                }}
                className="xly-normal-list"
              >
                <div style={{ maxHeight: '100%', zIndex: 20 }}>
                  <SearchComponent {...props} />
                </div>
                <StaticEditTable {...processProps} style={{ width: '100%' }} />
              </Content>
            </Layout>
          </div>
        </Layout>
      </Layout>
    </Form>
  );
});

export default CommonBase(CommonProductionPlanEvent(ProductionPlanInfoComponentInfo2));