/* 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, Avatar, Tabs, Card, Row, Col, message } from 'antd-v4'; // Switch, Modal, Card, Row, Col
import styles from '@/index.less';
import * as commonFunc from '@/components/Common/commonFunc';
import CommonBase from '@/components/Common/CommonBase';
import * as commonBusiness from '@/components/Common/commonBusiness';/* 单据业务功能 */
import StaticEditTable from '@/components/Common/CommonTable';/* 可编辑表格 */
import SearchComponent from '@/components/Common/SearchComponent';/* 搜索组件 */
import CommonProductionMainPlanEvent from '@/components/Common/CommonProductionmMainPlanEvent';
import CommonListSelect from '@/components/Common/CommonListSelect';/* 选择界面 */
import Toolbar from '@/components/Common/ToolBar/ToolBarNew';
import * as commonUtils from '@/utils/utils';/* 通用方法 */
import Gantt from '@/components/Charts/Gantt';
import ProductionUnifiedPlanning from '@/components/productionMainPlan/productionUnifiedPlanning';
import CustomizedChar from '@/components/Common/ShowChar/CustomizedChar';
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 ShowList from '@/assets/list.svg';
import DisableShowList from '@/assets/disablelist.svg';
import ShowGantt from '@/assets/gantt.svg';
import DisableShowGantt from '@/assets/disablegantt.svg';
import commonConfig from '@/utils/config';
import AntdDraggableModal from '@/components/Common/AntdDraggableModal';
import ShowCheckModel from '@/assets/checkModel.svg';
import DisableShowCheckModel from '@/assets/disablecheckModel.svg';
import selfstyles from './index.less';
import GanttStyles from '../productionScheduleTree/index.less';

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

class ProductionMainPlanComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.form = {}; /*   表单对象   */
  }
  // onRowMouseEnter = (name, record) => {
  //   // if (this.props.enabled && name === 'control') {
  //   //   this.props.onTableSelectRowChange(name, [record.sId]);
  //   // }
  // }
  onDoubleClick = (name, record) => {
    if (this.props.onDoubleClick !== undefined) {
      this.props.onDoubleClick(record);
    }
  };
  onRowClick1 = (name, record, bRowClick) => {
    let selectedRowKeys = [...this.props.slaveSelectedRowKeys];
    if (commonUtils.isEmptyArr(selectedRowKeys)) {
      const keys = [];
      keys.push(record.sId);
      selectedRowKeys = keys;
    } else {
      const indexKey = selectedRowKeys.indexOf(record.sId);
      if (indexKey === -1) {
        selectedRowKeys.push(record.sId);
      } else if (indexKey !== -1) {
        if (!bRowClick) { /* 可输入行，行内点击时 不去除selectedRowKeys */
          selectedRowKeys.splice(indexKey, 1);
        }
      }
    }
    this.props.onTableSelectRowChange(name, selectedRowKeys);
  };

  // eslint-disable-next-line no-unused-vars
  onRowClick = (name, record, bRowClick) => {
    // let selectedRowKeys = [...this.props.slaveSelectedRowKeys];
    // if (commonUtils.isEmptyArr(selectedRowKeys)) {
    //   const keys = [];
    //   keys.push(record.sId);
    //   selectedRowKeys = keys;
    // } else {
    //   const indexKey = selectedRowKeys.indexOf(record.sId);
    //   if (indexKey === -1) {
    //     selectedRowKeys.push(record.sId);
    //   } else if (indexKey !== -1) {
    //     if (!bRowClick) { /* 可输入行，行内点击时 不去除selectedRowKeys */
    //       selectedRowKeys.splice(indexKey, 1);
    //     }
    //   }
    // }
    // this.props.onTableSelectRowChange(name, selectedRowKeys);

    /* 子表选中 */
    if (name === 'slaveInfo') {
      const { slaveInfoSelectedRowKeys } = this.props;
      let selectedRowKeys = slaveInfoSelectedRowKeys;
      if (commonUtils.isEmptyArr(selectedRowKeys)) {
        const keys = [];
        keys.push(record.sId);
        selectedRowKeys = keys;
      } else {
        const indexKey = selectedRowKeys.indexOf(record.sId);
        if (indexKey === -1) {
          selectedRowKeys.push(record.sId);
        } else if (indexKey !== -1) {
          if (!bRowClick) { /* 可输入行，行内点击时 不去除selectedRowKeys */
            selectedRowKeys.splice(indexKey, 1);
          }
        }
      }
      this.props.onTableSelectRowChange(name, selectedRowKeys);
    }
  };

  /**   处理选择行发生改变   */
  handleTableFilterData = (name, data, record) => {
    /*   外置处理业务   */
    if (name === 'slave') {
      let slaveInfoDataNew = [];
      if (commonUtils.isNotEmptyArr(data)) {
        slaveInfoDataNew = data.filter(item => item.sProductionPlanId === record.sId);
      }
      return slaveInfoDataNew;
    }
  };
  handleCancelUnifiedPlanningChooseModal = () => {
    this.props.onGetProdData('workCenter', 'Sp_Productionplan_Pie_Char', {});
    const { workCenterSelectedRowKeys, workCenterData } = this.props;
    if (commonUtils.isNotEmptyArr(workCenterData)) {
      const addFilter = {};
      addFilter.bFilterName = 'sWorkCenterId';
      addFilter.bFilterCondition = '=';
      addFilter.bFilterValue = commonUtils.isEmpty(workCenterSelectedRowKeys) ? workCenterData[0].sWorkCenterId : workCenterSelectedRowKeys;
      const filterArr = [addFilter];
      this.props.onGetProdData('machine', 'Sp_Productionplan_sColumnarStack_Char', { bFilter: JSON.stringify(filterArr) });
    }
    this.props.onSaveState({ unifiedPlanningChooseVisible: false });
    this.props.onRefresh();
  };
  handlePieCard = async (sWorkCenterId) => {
    const addFilter = {};
    addFilter.bFilterName = 'sWorkCenterId';
    addFilter.bFilterCondition = '=';
    addFilter.bFilterValue = sWorkCenterId;
    let bProductionPlanOutside = false;
    if (sWorkCenterId === '0000000000') {
      bProductionPlanOutside = true; /* 跳转到发外排程 */
    }
    const filterArr = [addFilter];
    this.props.onGetProdData('machine', 'Sp_Productionplan_sColumnarStack_Char', { bFilter: JSON.stringify(filterArr) });
    this.props.onSaveState({ workCenterSelectedRowKeys: [sWorkCenterId], bProductionPlanOutside });
  };

  handleWorkCenterData = () => {
    const { workCenterData, workCenterCharData } = this.props;
    return commonUtils.isNotEmptyArr(workCenterData) && commonUtils.isNotEmptyObject(workCenterCharData) && commonUtils.isNotEmptyArr(workCenterCharData.data) ? workCenterData.map((child) => {
      const charConfigArr = [];
      const charConfigAndDataArr = [];
      const charConfig = commonBusiness.getCharConfig('', 'sPieGroup', child.sWorkCenterId, 1, 20, 65);
      charConfigArr.push({ ...charConfig });
      // charConfigAndData.percent = 3;
      const charConfigAndData = workCenterCharData.data.filter(item => item.sWorkCenterId === child.sWorkCenterId)[0];
      charConfigAndDataArr.push({ ...charConfig, child: { data: [{ ...charConfigAndData }], height: 90 } });
      const charProps = commonBusiness.getCharTypes(child.sWorkCenterName, charConfigArr, charConfigAndDataArr, this.props, { bordered: false });
      const gridStyle = {
        width: '99%',
        padding: '5px 10px',
        height: '80px',
      };
      return (
        <Col span={4} style={{ padding: '0px' }}>
          <Card.Grid style={gridStyle} border={false} onClick={this.handlePieCard.bind(this, child.sWorkCenterId)}>
            <div className="card_data" >
              <div className="card_data_title">{child.sWorkCenterName}</div>
              <div className="card_data_detail">工时：{child.dHourSum}{commonUtils.isNotEmptyNumber(child.dHourSum) ? 'h' : ''} </div>
              <div className="card_data_detail">数量：{child.iPlanSum}</div>
            </div>
            <div className="card_data_char" >
              <div className="card_char"> <div className="card_data_hour">{child.dStdWorkCenterHour}h</div><CustomizedChar {... charProps} percent /> </div>
              <div className="card_char_bottom">最晚：<span title={child.sLimitDate} className={child.iLimitColor === 1 ? 'limitDateWeight' : 'limitDate'}>{child.sLimitDate}</span> </div>
            </div>
          </Card.Grid>
        </Col>);
    }) : '';
  }

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

  /* 控制排序 */
  orderData = (e, name, type) => {
    // 埋入数据修监听点
    this.props.onSaveState({
      dataChanged: true,
    });
    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.sId) > -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.sId === tempNew[0].sId);/* 选中第一个节点的下标 */
        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.sId === tempNew[newLen - 1].sId);/* 选中最后一个节点的下标 */
        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.sId === tempNew[0].sId);/* 选中第一个节点的下标 */
        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.sId === tempNew[newLen - 1].sId);/* 选中最后一个节点的下标 */
        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.sId === item.sId);
        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 });
    }
  };

  /* 自定义排序号 */
  orderNum = (tableData) => {
    tableData.forEach((item, index) => {
      item.iOrder = index + 1;
      item.handleType = 'update';
    });
    return tableData;
  };
  /* 切换稽查列表 */
  changeCheckModel= (e, type) => {
    if (type === 'checkModel') {
      const { slaveFilterCondition } = this.props;
      /* 调用获取甘特图数据 */
      const chart = {};
      chart.sProcedureName = 'Sp_Manufacture_GetPlanAPSstate';
      chart.paramsMap = {
      };
      this.props.onCheckModel(chart, slaveFilterCondition).catch(() => {
        this.props.onSaveState({ pageLoading: false });
      });
    }
  };

  /* 切换甘特图/列表视图 */
  changeGantt = (e, type) => {
    let bGantt = false;
    if (type === 'gantt') {
      const { slaveFilterCondition } = this.props;
      bGantt = true;
      /* 调用获取甘特图数据 */
      const chart = {};
      chart.sProcedureName = 'Sp_WorkOrder_GtCharAll';
      chart.paramsMap = {
      };
      this.props.onGanttChar(chart, slaveFilterCondition).finally(() => {
        this.props.onSaveState({ pageLoading: false });
      });
    } else if (type === 'list') {
      bGantt = false;
    }
    this.props.onSaveState({ bGantt });
  };

  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}
              onTableFilterData={this.handleTableFilterData}
              onCancelUnifiedPlanningChooseModal={this.handleCancelUnifiedPlanningChooseModal}
              onGetWorkCenterCharShow={this.handleWorkCenterData}
              orderData={this.orderData}
              onRowClick={this.onRowClick}
              onDoubleClick={this.onDoubleClick}
              onCheckModel={this.changeCheckModel}
              changeGantt={this.changeGantt}
              // onRowMouseEnter={this.onRowMouseEnter}
            />
          </div>
        </Spin>
      </div>
    );
  }
}
const ProductionPlanComponent = Form.create({
  mapPropsToFields(props) {
    const { masterData } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form);
    return obj;
  },
})((props) => {
  const {
    form, onReturnForm, app, onGetChartClick, slavePagination, planLoadingSate, iPageSize, bGantt, charGanttData,
  } = props;

  /*   回带表单 */
  onReturnForm(form);
  const pagination = {
    pageSize: commonUtils.isNotEmptyNumber(iPageSize) && iPageSize !== 0 ? iPageSize : commonConfig.pageSize,
    ...slavePagination,
    size: 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    showSizeChanger: true,

    current: commonUtils.isEmptyObject(slavePagination) ? 1 : slavePagination.current,
    // size: 'large',

  };
  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 showGantt = {
    title: '查看Gantt',
    width: { width },
    height: { height },
    img: <img src={ShowGantt} alt="更换机台" width="20px" height="20px" />,
    disableimg: <img src={DisableShowGantt} alt="更换机台" width="20px" height="20px" />,
  };

  const showList = {
    title: '查看列表',
    width: { width },
    height: { height },
    img: <img src={ShowList} alt="更换机台" width="20px" height="20px" />,
    disableimg: <img src={DisableShowList} alt="更换机台" width="20px" height="20px" />,
  };

  const showCheckModel = {
    title: '齐套稽查',
    width: { width },
    height: { height },
    img: <img src={ShowCheckModel} alt="齐套稽查" width="18px" height="18px" />,
    disableimg: <img src={DisableShowCheckModel} alt="齐套稽查" width="18px" height="18px" />,
  };

  let zoom = {};
  zoom.scale = 'Minutes';
  zoom.step = '10'; /* 间隔 */
  if (commonUtils.isNotEmptyObject(charGanttData)) {
    // eslint-disable-next-line prefer-destructuring
    zoom = charGanttData.zoom;
  }
  const ganttProps = {
    // ...commonBusiness.getGanttTypes('slave', props),
    tasks: commonUtils.isNotEmptyObject(charGanttData) ? charGanttData : {}, /* 甘特图数据源 */
    zoom: commonUtils.isNotEmptyObject(zoom) ? zoom : {},
    onDataUpdated: props.onDataUpdated,
  };

  // onChange: props.onTitleChange.bind(this, 'slave'),, 表头没有点击排序事件可以不添加onChange事件
  const tableProps = {
    ...commonBusiness.getTableTypes('slave', props),
    onTableFilterData: props.onTableFilterData,
    // tableBelone: 'list',
    tableProps: {
      rowKey: 'sId',
      pagination,
      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,
      // rowSelection: null,
      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,
  };
  let unifiedPlanningType = {};
  if (commonUtils.isNotEmptyObject(props.unifiedPlanningChooseData)) {
    unifiedPlanningType = {
      app: {
        ...props.app,
        currentPane: {
          name: 'unifiedPlanning',
          config: props.unifiedPlanningConfig,
          conditonValues: props.getSqlCondition(props.unifiedPlanningConfig),
          title: props.unifiedPlanningChooseData.sMenuName,
          route: props.unifiedPlanningChooseData.sName,
          formId: props.unifiedPlanningChooseData.sId,
          key: props.sModelsId + props.unifiedPlanningChooseData.sId,
          sModelsType: props.unifiedPlanningChooseData.sModelType,
          select: props.onSelect,
          selectCancel: props.onCancelUnifiedPlanningChooseModal,
        },
      },
      dispatch: props.dispatch,
      content: props.content,
      id: new Date().getTime().toString(),
    };
  }
  const addProps = {};

  const charConfigArr = [];
  const charConfigAndDataArr = [];
  const charConfig = commonBusiness.getCharConfig('机台排程', 'sEqualColumnarStack', '1324324', 1, 24, 280);
  charConfigArr.push({ ...charConfig });
  if (commonUtils.isNotEmptyArr(props.machineCharData)) {
    charConfigAndDataArr.push({
      ...charConfig,
      child: {
        ...props.machineCharData, height: 300, chartName: 'chartMachine', onChartClick: onGetChartClick,
      },
    });
  }

  /* 生产进度详情 */
  let searchWorkSchedule = {};
  let workScheduleConfig = {};
  let searchWorkTitle = '';
  if (commonUtils.isNotEmptyObject(props.workScheduleConfig)) {
    // eslint-disable-next-line prefer-destructuring
    workScheduleConfig = props.workScheduleConfig;
    searchWorkTitle = workScheduleConfig.sActiveName;
    const sWorkOrderId = commonUtils.isNotEmptyObject(props.workScheduleRecord) ? props.workScheduleRecord.sWorkOrderId : '';
    searchWorkSchedule = {
      app: {
        ...props.app,
        currentPane: {
          name: 'workSchedule',
          config: workScheduleConfig,
          conditonValues: props.getSqlCondition(workScheduleConfig),
          title: workScheduleConfig.sActiveName,
          route: '/indexPage/commonList',
          formRoute: '/indexPage/commonList',
          formId: workScheduleConfig.sActiveId,
          key: props.sModelsId + workScheduleConfig.sId,
          sModelsType: 'search/workSchedule',
          bFilterProName: 'p_sWorkOrderId_pro',
          bFilterProValue: sWorkOrderId,
          // select: props.onSelect,
          // selectCancel: props.onSelectCancel,
        },
      },
      dispatch: props.dispatch,
      content: props.content,
      id: new Date().getTime().toString(),
      realizeHeight: props.realizeHeight, /* 拖动偏移高度 */
      bNotShowBtn: true,
      rowSelection: null,
    };
  }

  const WorkCenterMachinePlan = commonFunc.showLocalMessage(props, "WorkCenter&MachinePlan", "工作中心&机台计划");

  const MPS = commonFunc.showLocalMessage(props, "MPS", "产品主计划");
  const UnifiedPlanning= commonFunc.showMessage(props.app.commonConst, 'UnifiedPlanning') || '统一规划' ;

  const machineCharProps = commonBusiness.getCharTypes('machineChar', charConfigArr, charConfigAndDataArr, props);
  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 bSetList = true; /* 显示列表 */
  const bSetGantt = true; /* 显示甘特图 */
  return (
    <Form style={{ height: '100%' }}>
      <Layout style={{ height: '100%' }} className="xly-productionPlan-list">
        <Header className={styles.header}>
          <Toolbar {...props} className="billBtnGroup" style={{ backgroundColor: '#646464', color: 'rgb(255,255,255)' }} />
        </Header>
        <Layout className={styles.clayout} style={{ height: '100%' }} >
          <div className={styles.filterContent}>
            <SearchComponent {...props} />
          </div>
          <Content>
            <div id="slaveTabs" className={styles.bShow}>
              <div>
                <Avatar src={props.imgSrc} />
              </div>
              <Tabs className={styles.slaveTabs} tabBarStyle={{ marginLeft: 10, marginRight: 10 }}>
                <TabPane tab={MPS} key={2} >
                  <div className={selfstyles.mainPlan} >
                    <Layout className="processList">
                      <Sider className="process">
                        <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;
                        { bSetList ? <a title="查看列表" {...addProps} onClick={props.bGantt ? e => props.changeGantt(e, 'list', 0) : null}>{props.bGantt ? showList.img : showList.disableimg }</a> : ''} &nbsp;&nbsp;
                        { bSetGantt ? <a title="查看甘特图" {...addProps} onClick={!props.bGantt ? e => props.changeGantt(e, 'gantt', 0) : null}>{ !props.bGantt ? showGantt.img : showGantt.disableimg }</a> : ''} &nbsp;&nbsp;
                        &nbsp; <a title="齐套稽查" {...addProps} onClick={commonUtils.isEmptyObject(props.sortedInfo) ? e => props.onCheckModel(e, 'checkModel') : null}>{commonUtils.isEmptyObject(props.sortedInfo) ? showCheckModel.img : showCheckModel.disableimg }</a>&nbsp;&nbsp;
                      </Sider>
                      {
                        bGantt && commonUtils.isNotEmptyObject(charGanttData) ?
                          <Content style={{ height: 'calc( 100vh - 230px )' }} className={GanttStyles.ganttList} >
                            <div className="gantt-container" style={{ width: '100vm', height: '100%' }} >
                              <Gantt {...ganttProps} />
                            </div>
                          </Content> :
                          <Content
                            className="xly-normal-list productPlan"
                          >
                            <StaticEditTable {...tableProps} footer="hidden" slaveInfo={tableInfoProps} setExpandedRowRender="Y" offsetHeight={30} />
                          </Content>
                      }
                    </Layout>
                  </div>
                </TabPane>
                <TabPane tab={WorkCenterMachinePlan} key={3}>
                  <Content
                    className="xly-productionPlanInfo"
                    style={{ maxHeight: 'calc( 100vh - 220px)', overflowY: 'auto' }}
                  >
                    <Card bordered={false} className="productionCardInfo">
                      <Row gutter={6}>
                        {props.onGetWorkCenterCharShow()}
                      </Row>
                    </Card>
                    <div className={selfstyles.charContainer}>
                      <CustomizedChar {... machineCharProps} />
                    </div>
                  </Content>
                </TabPane>
              </Tabs>
            </div>
          </Content>
        </Layout>
        {
          props.unifiedPlanningChooseVisible ?
            <AntdDraggableModal
              width={1100}
              title={UnifiedPlanning}
              visible={props.unifiedPlanningChooseVisible}
              onCancel={props.onCancelUnifiedPlanningChooseModal}
              footer={null}
            >
              { props.unifiedPlanningChooseVisible ? <ProductionUnifiedPlanning {...unifiedPlanningType} /> : '' }
            </AntdDraggableModal>
          : ''
        }
        {
          props.workScheduleVisible ?
            <AntdDraggableModal
              className="workScheduleModal"
              width={1300}
              title={commonUtils.isEmptyObject(searchWorkSchedule) ? searchWorkTitle : searchWorkSchedule.app.currentPane.title}
              visible={props.workScheduleVisible}
              onCancel={props.onCloseModel.bind(this, 'workScheduleVisible')}
              onSaveState={props.onSaveState}
              footer={null}
            >
              <CommonListSelect {...searchWorkSchedule} />
            </AntdDraggableModal> : null
        }
      </Layout>
    </Form>
  );
});

export default CommonBase(CommonProductionMainPlanEvent(ProductionMainPlanComponent));