/* eslint-disable array-callback-return,no-undef,object-curly-newline,prefer-destructuring,no-unused-vars */
import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
// import '@ant-design/compatible/assets/index.css';
import { Modal, Layout, Spin, Card, Row, Col, message } from 'antd-v4'; // Switch Select, Tabs,
import styles from '../../index.less';
import selfstyles from '../productionMainPlan/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 CommonProductionPlanEvent from '../Common/CommonProductionPlanEvent';
import Toolbar from '../Common/ToolBar/ToolBarNew';
import MoveUp from '../../assets/processUp.svg';
import MoveDown from '../../assets/processDown.svg';
import DisableMoveUp from '../../assets/disableprocessUp.svg';
import DisableMoveDown from '../../assets/disableprocessDown.svg';
import MoveTop from '../../assets/processTop.svg';
import DisableMoveTop from '../../assets/disableprocessTop.svg';
import MoveBottom from '../../assets/processBottom.svg';
import DisableMoveBottom from '../../assets/disableprocessBottom.svg';
import ChangeMachine from '../../assets/changeMachine.svg';
import DisableChangeMachine from '../../assets/disablechangeMachine.svg';
import Reset from '../../assets/reset.svg';
import DisableReset from '../../assets/disablereset.svg';
import * as commonUtils from '../../utils/utils';
import ShowType from '../Common/CommonComponent';
import commonConfig from '../../utils/config';
import AntdDraggableModal from '../Common/AntdDraggableModal';
import CommonProductionPlanOutsideEvent from '../Common/CommonProductionPlanOutsideEvent';


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

class ProductionPlanOutside extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.form = {}; /*   表单对象   */
  }

  shouldComponentUpdate(nextProps) {
    const { slaveColumn, masterConfig } = nextProps;
    return commonUtils.isNotEmptyArr(slaveColumn) || commonUtils.isNotEmptyObject(masterConfig);
  }
  // onRowMouseEnter = (name, record) => {
  //   console.log('record:', record);
  // }
  onDoubleClick = (name, record) => {
    if (this.props.onDoubleClick !== undefined) {
      this.props.onDoubleClick(record);
    }
  };
  onRowClick = (name, record, bRowClick) => {
    const { slaveData } = this.props;
    let { slaveSelectedRowKeys, slaveInfoSelectedRowKeys } = this.props;
    slaveInfoSelectedRowKeys = commonUtils.isNotEmptyArr(slaveInfoSelectedRowKeys) ? slaveInfoSelectedRowKeys : [];
    if (name === 'slave') {
      if (commonUtils.isEmptyArr(slaveSelectedRowKeys)) {
        const keys = [];
        keys.push(record.sSlaveId);
        slaveSelectedRowKeys = keys;
        const sIds = record.sSlaveId.split('-');
        slaveInfoSelectedRowKeys.push(...sIds);
      } else {
        const indexKey = slaveSelectedRowKeys.indexOf(record.sSlaveId);
        if (indexKey === -1) {
          slaveSelectedRowKeys.push(record.sSlaveId);
          const sIds = record.sSlaveId.split('-');
          slaveInfoSelectedRowKeys.push(...sIds);
          sIds.forEach((item) => {
            const iIndex = slaveInfoSelectedRowKeys.findIndex(e => e === item);
            if (iIndex === -1) {
              slaveInfoSelectedRowKeys.push(item);
            }
          });
        } else if (indexKey !== -1) {
          if (!bRowClick) {
            slaveSelectedRowKeys.splice(indexKey, 1);
          }
          const sIds = record.sSlaveId.split('-');
          sIds.forEach((item) => {
            const index = slaveInfoSelectedRowKeys.findIndex(e => e === item);
            if (!bRowClick) {
              slaveInfoSelectedRowKeys.splice(index, 1);
            }
          });
        }
      }
    } else if (name === 'slaveInfo') {
      if (commonUtils.isEmptyArr(slaveInfoSelectedRowKeys)) {
        const keys = [];
        keys.push(record.sId);
        slaveInfoSelectedRowKeys = keys;
        const slaveDataNews = slaveData.filter(item => item.sSlaveId.split('-').includes(record.sId));
        if (commonUtils.isNotEmptyArr(slaveDataNews)) {
          slaveSelectedRowKeys = [slaveDataNews[0].sSlaveId];
        }
      } else {
        const indexKey = slaveInfoSelectedRowKeys.indexOf(record.sId);
        if (indexKey === -1) {
          slaveInfoSelectedRowKeys.push(record.sId);
          const slaveDataNews = slaveData.filter(item => item.sSlaveId.split('-').includes(record.sId));
          if (commonUtils.isNotEmptyArr(slaveDataNews)) {
            const iIndex = slaveSelectedRowKeys.findIndex(item => item === slaveDataNews[0].sSlaveId);
            if (iIndex === -1) {
              slaveSelectedRowKeys.push(slaveDataNews[0].sSlaveId);
            }
          }
        } else if (indexKey !== -1) {
          /* 可输入行，行内点击时 不去除selectedRowKeys */
          if (!bRowClick) {
            slaveInfoSelectedRowKeys.splice(indexKey, 1);
          }
          const slaveDataNews = slaveData.filter(item => item.sSlaveId.split('-').includes(record.sId));
          if (commonUtils.isNotEmptyArr(slaveDataNews)) {
            const sSlaveIds = slaveDataNews[0].sSlaveId.split('-');
            if (slaveInfoSelectedRowKeys.length === 0 || sSlaveIds.length === 1) {
              const iIndex = slaveSelectedRowKeys.indexOf(item => slaveDataNew[0].sSlaveId === item);
              slaveSelectedRowKeys.splice(iIndex, 1);
            } else {
              let bdel = true;
              for (const sId of sSlaveIds) {
                if (slaveInfoSelectedRowKeys.findIndex(item => item === sId && item !== record.sId)) {
                  bdel = false;
                  break;
                }
              }
              if (bdel) {
                const iIndex = slaveSelectedRowKeys.indexOf(item => slaveDataNew[0].sSlaveId === item);
                slaveSelectedRowKeys.splice(iIndex, 1);
              }
            }
          }
        }
      }
    }
    let machineEnabled = false;
    if (commonUtils.isNotEmptyArr(slaveSelectedRowKeys)) {
      const currSlave = slaveData.filter(item => item.sSlaveId === slaveSelectedRowKeys[0])[0];
      const processSlave = slaveData.filter(item => item.sProcessId === currSlave.sProcessId && slaveSelectedRowKeys.includes(item.sSlaveId));
      if (processSlave.length === slaveSelectedRowKeys.length) {
        machineEnabled = true;
      }
    }
    const { sModelsId } = this.props;
    commonUtils.setStoreDropDownData(sModelsId, 'master', 'sMachineId', []);
    this.props.onSaveState({ slaveSelectedRowKeys, slaveInfoSelectedRowKeys, machineEnabled });
  };

  onCloseChangeMachine = () => {
    const { masterData } = this.props;
    delete masterData.tStartDate;
    delete masterData.iSplitNum;
    delete masterData.bSplit;
    this.props.onSaveState({ isChangeMachine: false, masterData: { ...masterData, sMachineId: '', sTeamId: '' } });
  }

  onTableSelectRowChange = (name, selectedRowKeys) => {
    if (name === 'slave') {
      const addState = this.props.onTableSelectRowChange(name, selectedRowKeys, true);
      const slaveInfoSelectedRowKeys = [];
      if (commonUtils.isNotEmptyArr(selectedRowKeys)) {
        selectedRowKeys.forEach((selectedRow) => {
          const sIds = selectedRow.split('-');
          slaveInfoSelectedRowKeys.push(...sIds);
        });
      }
      addState.slaveInfoSelectedRowKeys = slaveInfoSelectedRowKeys;
      this.props.onSaveState({ ...addState });
    } else {
      this.props.onTableSelectRowChange(name, selectedRowKeys);
    }
  };

  /**   处理选择行发生改变   */
  handleTableFilterData = (name, data, record) => {
    /*   外置处理业务   */
    if (name === 'slave') {
      let slaveInfoDataNew = [];
      if (commonUtils.isNotEmptyArr(data)) {
        slaveInfoDataNew = data.filter(item => record.sSlaveId.split('-').includes(item.sId));
      }
      return slaveInfoDataNew;
    }
  };

  // 根据配置解析拼接具体参数
  handleProParams = (sKey, arr) => {
    const { [`${sKey}Data`]: tableData, [`${sKey}SelectedRowKeys`]: selectedRowKeys } = this.props;
    const keyData = tableData.filter(item => selectedRowKeys.includes(item.sId) || selectedRowKeys.includes(item.sSlaveId));
    if (commonUtils.isNotEmptyArr(keyData)) {
      const addState = {};
      addState.key = sKey;
      const val = [];
      keyData.forEach((currData) => {
        const currVal = {};
        arr.forEach((filed) => {
          currVal[`${filed}`] = currData[`${filed}`];
        });
        val.push(currVal);
      });
      addState.value = val;
      return addState;
    } else {
      return undefined;
    }
  };

  sortData = (tempData) => {
    tempData.sort((g1, g2) => {
      return g1.iOrder - g2.iOrder;
    });
    return tempData;
  };

  /* 控制排序 */
  orderData = (e, name, type) => {
    const { [`${name}SelectedRowKeys`]: tableselectedRowKeys, app, slavePagination: slavePaginationOld } = this.props;
    let { [`${name}Data`]: currentData } = this.props;
    if (name === 'slave') {
      if (commonUtils.isEmptyArr(tableselectedRowKeys)) {
        message.warn(commonFunc.showMessage(app.commonConst, 'pleaseChooseMoveData'));/* 请勾选要移动数据 */
        return;
      }
      if (commonUtils.isEmptyArr(currentData)) {
        message.warn(commonFunc.showMessage(app.commonConst, 'NoProcessData'));/* 请填写工序表数据 */
        return;
      }
      const tempNew = currentData.filter((item) => { /* 获取勾选数据集 */
        return tableselectedRowKeys.indexOf(item.sSlaveId) > -1;
      });
      if (commonUtils.isEmptyArr(tempNew)) {
        message.warn(commonFunc.showMessage(app.commonConst, 'pleaseChooseMoveData'));/* 请选择要移动数据 */
        return;
      }
      const len = currentData.length;
      const newLen = tempNew.length;
      let num = 0.01;/* 循环增加体 */
      let targetiOrder = -1;
      if (type === 1) { /*  上移 */
        const iIndex = currentData.findIndex(item => item.sSlaveId === tempNew[0].sSlaveId);/* 选中第一个节点的下标 */
        if (iIndex === 0) {
          if (newLen === 1) {
            message.warn(commonFunc.showMessage(app.commonConst, 'NoUp'));/* 无需上移 */
            return;
          } else {
            targetiOrder = 0;
          }
        } else {
          targetiOrder = currentData[iIndex - 1].iOrder - 1; /* 目标排序号 */
        }
      } else if (type === 2) { /*  下移 */
        const iIndex = currentData.findIndex(item => item.sSlaveId === tempNew[newLen - 1].sSlaveId);/* 选中最后一个节点的下标 */
        if (iIndex === len - 1) {
          if (newLen === 1) {
            message.warn(commonFunc.showMessage(app.commonConst, 'NoDown')); /* 无需下移 */
            return;
          } else {
            targetiOrder = currentData[iIndex].iOrder;
          }
        } else {
          targetiOrder = currentData[iIndex + 1].iOrder;
        }
      } else if (type === 0) { /*  置顶 */
        const iIndex = currentData.findIndex(item => item.sSlaveId === tempNew[0].sSlaveId);/* 选中第一个节点的下标 */
        if (iIndex === 0) {
          if (newLen === 1) {
            message.warn(commonFunc.showMessage(app.commonConst, 'NoTop')); /* 无需置顶 */
            return;
          } else {
            targetiOrder = currentData[iIndex].iOrder;
          }
        } else {
          targetiOrder = currentData[0].iOrder - 1;
        }
      } else if (type === 3) { /*  置底 */
        const iIndex = currentData.findIndex(item => item.sSlaveId === tempNew[newLen - 1].sSlaveId);/* 选中最后一个节点的下标 */
        if (iIndex === len - 1) {
          if (newLen === 1) {
            message.warn(commonFunc.showMessage(app.commonConst, 'NoBottom')); /* 无需置底 */
            return;
          } else {
            targetiOrder = currentData[iIndex].iOrder;
          }
        } else {
          targetiOrder = currentData[len - 1].iOrder + 1;
        }
      }
      tempNew.forEach((item) => {
        const index1 = currentData.findIndex(item1 => item1.sSlaveId === item.sSlaveId);
        currentData[index1] = { ...item, iOrder: targetiOrder + num, handleType: 'update' };
        num += 0.01;
      });
      currentData = this.sortData(currentData);
      currentData = this.orderNum(currentData);
      const iIndex = currentData.findIndex(item => item.sSlaveId === tableselectedRowKeys[0]);
      const slavePagination = { ...slavePaginationOld };
      slavePagination.current = Math.ceil((iIndex + 1) / commonConfig.pageSize);
      this.props.onSaveState({ [`${name}Data`]: currentData, slavePagination });
    } else if (name === 'slaveInfo') {
      this.props.onSaveState({ isChangeMachine: true });
    }
  };

  /* 自定义排序号 */
  orderNum = (tableData) => {
    tableData.forEach((item, index) => {
      item.iOrder = index + 1;
      item.handleType = 'update';
    });
    return tableData;
  };

  /**   处理选择行发生改变   */
  // handleTableFilterData = (name, data, record) => {
  //   /*   外置处理业务   */
  //   if (name === 'slave') {
  //     let slaveInfoDataNew = '';
  //     slaveInfoDataNew = data.filter(item => record.sSlaveId.split(',').includes(item.sId));
  //     return slaveInfoDataNew;
  //   }
  // };
  /**   处理card点击事件 */
  handleTabsCallback = (child) => {
    if (commonUtils.isNotEmptyArr(this.props.teamData)) {
      child.cardSelectedColor = '#fff7e6';
      const iIndex = this.props.teamData.findIndex(item => item.sId === child.sId);
      const teamDataNew = this.props.teamData;
      teamDataNew.forEach((item, index) => {
        if (index !== iIndex) { item.cardSelectedColor = ''; }
      });
    }
    this.props.onSaveState({ Loading: true });
    this.props.onTabsCallback(child);
  };
  // renderCards = (data) => {
  //   let showInfo = '';
  //   data.map((item) => {
  //     showInfo += (
  //       <Col span={4}>
  //         <Card title={item.sTeamName} bordered={false}>
  //           {item.sTeamName} {item.dHour} {'30%'}
  //         </Card>
  //       </Col>
  //     );
  //   });
  //   return showInfo;
  // }
  render() {
    const { pageLoading } = this.props;
    return (
      <div className="product-plan-info-box">
        <Spin spinning={pageLoading} style={{ height: '100%' }}>
          <div style={{ height: '100%' }}>
            <ProductionPlanOutsideComponent
              style={{ height: '100%' }}
              {...this.props}
              {...this.state}
              onTableFilterData={this.handleTableFilterData}
              onRowClick={this.onRowClick}
              onDoubleClick={this.onDoubleClick}
              // onRowMouseEnter={this.onRowMouseEnter}
              orderData={this.orderData}
              onCloseChangeMachine={this.onCloseChangeMachine}
              onTabsCallback={this.handleTabsCallback}
              onTableSelectRowChange={this.onTableSelectRowChange}
            />
          </div>
        </Spin>
      </div>
    );
  }
}

const ProductionPlanOutsideComponent = Form.create({
  mapPropsToFields(props) {
    const { masterData } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form);
    return obj;
  },
})((props) => {
  const {
    form, onReturnForm, app, masterData, sModelsId, masterConfig, teamSelectedRowKeys, clearArray, slavePagination, planLoadingSate,
    Loading } = props;
  // console.log('props:===', props);
  /*   回带表单 */
  onReturnForm(form);
  // const pageFlag = sStateSelect === '0' || sStateSelect === '1' || sStateSelect === '2';
  const pagination = {
    pageSize: commonConfig.pageSize,
    ...slavePagination,
    size: 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    showSizeChanger: true,
    current: commonUtils.isEmptyObject(slavePagination) ? 1 : slavePagination.current,
  };
  const width = '18px';
  const height = '18px';
  const moveUp = {
    title: '上移',
    width: { width },
    height: { height },
    img: <img src={MoveUp} alt="上移" width="16px" height="16px" />,
    disableimg: <img src={DisableMoveUp} alt="上移" width="16px" height="16px" />,
  };
  const moveDown = {
    title: '下移',
    width: { width },
    height: { height },
    img: <img src={MoveDown} alt="下移" width="16px" height="16px" />,
    disableimg: <img src={DisableMoveDown} alt="下移" width="16px" height="16px" />,
  };
  const moveTop = {
    title: '置顶',
    width: { width },
    height: { height },
    img: <img src={MoveTop} alt="置顶" width="16px" height="16px" />,
    disableimg: <img src={DisableMoveTop} alt="置顶" width="16px" height="16px" />,
  };
  const moveBottom = {
    title: '置底',
    width: { width },
    height: { height },
    img: <img src={MoveBottom} alt="置底" width="16px" height="16px" />,
    disableimg: <img src={DisableMoveBottom} alt="置底" width="16px" height="16px" />,
  };
  const changeMachine = {
    title: '更换机台',
    width: { width },
    height: { height },
    img: <img src={ChangeMachine} alt="更换机台" width="20px" height="20px" />,
    disableimg: <img src={DisableChangeMachine} alt="更换机台" width="20px" height="20px" />,
  };
  const resetSearch = {
    title: '重置搜索',
    width: { width },
    height: { height },
    img: <img src={Reset} alt="重置搜索" width="18px" height="18px" />,
    disableimg: <img src={DisableReset} alt="重置搜索" width="18px" height="18px" />,
  };
  const addProps = {};
  const tableProps = {
    ...commonBusiness.getTableTypes('slave', props),
    onTableFilterData: props.onTableFilterData,
    tableProps: {
      rowKey: 'sSlaveId',
      pagination,
      sortSelf: true,
      onRow: (record) => {
        return {
          onClick: () => { props.onRowClick('slave', record, true); },
          onDoubleClick: () => { props.onDoubleClick('slave', record); },
          // onMouseEnter: () => { props.onRowMouseEnter('slave', record); },
        };
      },
      onChange: props.onTitleChange.bind(this, 'slave'),
    },
    clearArray: props.clearArray,
  };

  const tableInfoProps = {
    ...commonBusiness.getTableTypes('slaveInfo', props),
    tableProps: {
      rowKey: 'sId',
      pagination,
      planLoadingSate,
      onRow: (record) => {
        return {
          onClick: () => { props.onRowClick('slaveInfo', record, true); },
          onDoubleClick: () => { props.onDoubleClick('slaveInfo', record); },
          // onMouseEnter: () => { props.onRowMouseEnter('slaveInfo', record); },
        };
      },
      onChange: props.onTitleChange.bind(this, 'slaveInfo'),
    },
    // data: commonUtils.isNotEmptyObject(props.slaveInfoDataNew) ? props.slaveInfoDataNew : props.slaveInfoData,
  };
  const gridStyle = {
    width: '100%',
    textAlign: 'left',
  };
  const setUp = commonFunc.showMessage(app.commonConst, 'setUp');/* 上移 */
  const setDown = commonFunc.showMessage(app.commonConst, 'setDown');/* 下移 */
  const setTop = commonFunc.showMessage(app.commonConst, 'setTop');/* 置顶 */
  const setBottom = commonFunc.showMessage(app.commonConst, 'setBottom');/* 置底 */
  const setMachine = commonFunc.showMessage(app.commonConst, 'changeMachine');/* 置底 */
  const setResetSearch = commonFunc.showMessage(app.commonConst, 'setResetSearch');/* 重置搜索 */
  const resetSearchEnabled = clearArray.length > 0;

  const iMachineIndex = commonUtils.isEmptyObject(masterConfig) ? -1 : masterConfig.gdsconfigformslave.findIndex(item => item.sName === 'sMachineId');
  const machineShowTypeProps = {
    app,
    record: masterData,
    name: 'master',
    form: props.form,
    formId: sModelsId,
    getSqlDropDownData: props.getSqlDropDownData,
    getSqlCondition: props.getSqlCondition,
    handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
    getFloatNum: props.getFloatNum,
    getDateFormat: props.getDateFormat,
    onChange: props.onChange,
    showConfig: iMachineIndex > -1 ? masterConfig.gdsconfigformslave[iMachineIndex] : {},
    formItemLayout: {},
    enabled: true,
    dataValue: commonUtils.isEmptyObject(masterData) ? '' : masterData.sMachineId,
    bTable: false,
    onFilterDropDownData: props.onFilterDropDownData,
  };
  const iTeamIndex = commonUtils.isEmptyObject(masterConfig) ? -1 : masterConfig.gdsconfigformslave.findIndex(item => item.sName === 'sTeamId');
  const teamShowTypeProps = {
    app,
    record: masterData,
    name: 'master',
    form: props.form,
    formId: sModelsId,
    getSqlDropDownData: props.getSqlDropDownData,
    getSqlCondition: props.getSqlCondition,
    handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
    getFloatNum: props.getFloatNum,
    getDateFormat: props.getDateFormat,
    onChange: props.onChange,
    showConfig: iTeamIndex > -1 ? masterConfig.gdsconfigformslave[iTeamIndex] : {},
    formItemLayout: {},
    enabled: true,
    dataValue: commonUtils.isEmptyObject(masterData) ? '' : masterData.sTeamId,
    bTable: false,
    onFilterDropDownData: props.onFilterDropDownData,
  };
  const iStartIndex = commonUtils.isEmptyObject(masterConfig) ? -1 : masterConfig.gdsconfigformslave.findIndex(item => item.sName === 'tStartDate');
  const startShowTypeProps = {
    app,
    record: masterData,
    name: 'master',
    form: props.form,
    formId: sModelsId,
    getSqlDropDownData: props.getSqlDropDownData,
    getSqlCondition: props.getSqlCondition,
    handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
    getFloatNum: props.getFloatNum,
    getDateFormat: props.getDateFormat,
    onChange: props.onChange,
    showConfig: iStartIndex > -1 ? masterConfig.gdsconfigformslave[iStartIndex] : {},
    formItemLayout: {},
    enabled: true,
    dataValue: commonUtils.isEmptyObject(masterData) ? '' : masterData.tStartDate,
    bTable: false,
    onFilterDropDownData: props.onFilterDropDownData,
  };

  const bSplitIndex = commonUtils.isEmptyObject(masterConfig) ? -1 : masterConfig.gdsconfigformslave.findIndex(item => item.sName === 'bSplit');
  const splitShowTypeProps = {
    app,
    record: masterData,
    name: 'master',
    form: props.form,
    formId: sModelsId,
    getSqlDropDownData: props.getSqlDropDownData,
    getSqlCondition: props.getSqlCondition,
    handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
    getFloatNum: props.getFloatNum,
    getDateFormat: props.getDateFormat,
    onChange: props.onChange,
    showConfig: bSplitIndex > -1 ? masterConfig.gdsconfigformslave[bSplitIndex] : {},
    formItemLayout: {},
    enabled: true,
    dataValue: commonUtils.isEmptyObject(masterData) ? '' : masterData.bSplit,
    bTable: false,
    onFilterDropDownData: props.onFilterDropDownData,
  };

  const iSplitNumIndex = commonUtils.isEmptyObject(masterConfig) ? -1 : masterConfig.gdsconfigformslave.findIndex(item => item.sName === 'iSplitNum');
  const splitNumShowTypeProps = {
    app,
    record: masterData,
    name: 'master',
    form: props.form,
    formId: sModelsId,
    getSqlDropDownData: props.getSqlDropDownData,
    getSqlCondition: props.getSqlCondition,
    handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
    getFloatNum: props.getFloatNum,
    getDateFormat: props.getDateFormat,
    onChange: props.onChange,
    showConfig: iSplitNumIndex > -1 ? masterConfig.gdsconfigformslave[iSplitNumIndex] : {},
    formItemLayout: {},
    enabled: true,
    dataValue: commonUtils.isEmptyObject(masterData) ? '' : masterData.iSplitNum,
    bTable: false,
    onFilterDropDownData: props.onFilterDropDownData,
  };

  let selectedRowKey = {};
  if (commonUtils.isNotEmptyArr(teamSelectedRowKeys)) {
    selectedRowKey = teamSelectedRowKeys[0];
  }

  let teamDataNum = 0;
  if (commonUtils.isNotEmptyArr(props.teamData)) {
    // 取得导航按钮的行数
    if (props.teamData.length % 8 === 0) {
      teamDataNum = (props.teamData.length / 8) - 1;
    } else {
      teamDataNum = Math.floor(props.teamData.length / 8);
    }
  }
  return (
    <Form style={{ height: '100%' }}>
      <Layout style={{ height: '100%' }} className="xly-productionPlan-list">
        <Header className={styles.header} style={{ backgroundColor: 'rgb(100, 100, 100)' }}>
          <Toolbar {...props} className="billBtnGroup" style={{ backgroundColor: '#646464', color: 'rgb(255,255,255)' }} />
        </Header>
        <Layout className={styles.clayout} style={{ height: '100%' }} >
          <div className="productionCard">
            <Spin spinning={Loading === undefined ? false : Loading}>
              <Card bordered={false}>
                <Row gutter={16}>
                  {
                    commonUtils.isNotEmptyArr(props.teamData) ? props.teamData.map((child) => {
                      const sType = commonUtils.isNotEmptyNumber(child.sType) ? child.sType.toString() : '';/* 0 - 全部单据 1-未排程 2- 已排程 */
                      const cardColor = sType === '0' ? 'allCard' : sType === '1' ? 'unCard' : 'defaultCard';
                      return (
                        <Col span={3} style={{ padding: '0px' }} className={selectedRowKey === child.sId ? 'cardSelectedColor' : commonUtils.isNotEmptyObject(child.cardSelectedColor) ? 'cardSelectedColor' : cardColor} >
                          <Card.Grid hoverable={false}style={gridStyle} onClick={props.onTabsCallback.bind(this, child)}>
                            <div className="card_left">
                              <div className="card_top">
                                <div className="card_left1" >{child.tStartDate}</div>
                                <div className="card_left2" style={{ color: '#ff0000' }} >{`${child.dHour}h`} </div>
                              </div>
                              <div className="card_mid">{child.sMachineName}</div>
                            </div>
                          </Card.Grid>
                        </Col>);
                    }) : ''
                  }
                </Row>
              </Card>
            </Spin>
          </div>
          <div className={selfstyles.mainPlan}>
            <Layout className={['processList', 'processListTable']}>
              <Sider className="process">
                <a title={setResetSearch} {...addProps} onClick={resetSearchEnabled ? e => props.onResetTableSearch() : null}>{ resetSearchEnabled ? resetSearch.img : resetSearch.disableimg}</a>&nbsp;
                <a title={setTop} {...addProps} onClick={props.moveEnabled ? e => props.orderData(e, 'slave', 0) : null}>{ props.moveEnabled ? moveTop.img : moveTop.disableimg}</a>
                <a title={setUp} {...addProps} onClick={props.moveEnabled ? e => props.orderData(e, 'slave', 1) : null}>{ props.moveEnabled ? moveUp.img : moveUp.disableimg }</a>
                <a title={setDown} {...addProps} onClick={props.moveEnabled ? e => props.orderData(e, 'slave', 2) : null}>{props.moveEnabled ? moveDown.img : moveDown.disableimg }</a>
                <a title={setBottom} {...addProps} onClick={props.moveEnabled ? e => props.orderData(e, 'slave', 3) : null}>{props.moveEnabled ? moveBottom.img : moveBottom.disableimg }</a>&nbsp;&nbsp;
                <a title={setMachine} {...addProps} onClick={props.moveEnabled ? e => props.orderData(e, 'slaveInfo', 0) : null}>{props.moveEnabled ? changeMachine.img : changeMachine.disableimg }</a>
              </Sider>
              <Content
                className="xly-normal-list productPlan"
                style={{ height: `calc( 100vh - 10px - ${teamDataNum * 45}px)` }}
              >
                <StaticEditTable {...tableProps} />
              </Content>
            </Layout>
          </div>
        </Layout>
        {
          props.isChangeMachine ?
            <AntdDraggableModal
              width={500}
              title="换机台"
              visible={props.isChangeMachine}
              onCancel={props.onCloseChangeMachine}
              onOk={props.onChangeMachine}
              okButtonProps={commonUtils.isNotEmptyObject(masterData) && (commonUtils.isNotEmptyStr(masterData.sMachineId) || (masterData.bSplit && commonUtils.isNotEmptyStr(masterData.iSplitNum))) ? { disabled: false } : { disabled: true }}
            >
              { commonUtils.isEmptyObject(masterConfig) ? '' : <ShowType {...machineShowTypeProps} /> }
              { commonUtils.isEmptyObject(masterConfig) ? '' : <ShowType {...teamShowTypeProps} /> }
              { commonUtils.isEmptyObject(masterConfig) ? '' : <ShowType {...startShowTypeProps} /> }
              { commonUtils.isEmptyObject(masterConfig) ? '' : <ShowType {...splitShowTypeProps} /> }
              { commonUtils.isNotEmptyObject(masterConfig) && commonUtils.isNotEmptyObject(masterData) && masterData.bSplit ? <ShowType {...splitNumShowTypeProps} /> : '' }
            </AntdDraggableModal>
            : ''
        }
      </Layout>
    </Form>
  );
});

export default CommonBase(CommonProductionPlanOutsideEvent(ProductionPlanOutside));