/* eslint-disable */
import React, { Component } from "react";
import "@ant-design/compatible/assets/index.css";
import { Col, Tabs, Tooltip } from "antd";
import ShowType from "@/components/Common/CommonComponent";
import AntdDraggableModal from "@/components/Common/AntdDraggableModal";
import CommonListSelectTree from "@/components/Common/CommonListSelectTree";
import * as commonBusiness from "@/components/Common/commonBusiness"; /* 单据业务功能 */
import StaticEditTable from "@/components/Common/CommonTable"; /* 可编辑表格 */
import * as commonFunc from "@/components/Common/commonFunc";
import * as commonUtils from "@/utils/utils"; /* 通用方法 */
import RGL, { WidthProvider } from "react-grid-layout";
import layoutStyle from "./index.less";

const { TabPane } = Tabs;
const ReactGridLayout = WidthProvider(RGL);

export default class CommonViewTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      openNewTabFlag: false,
      commonFieldPopupVisible: false,
      commonFieldPopupTbName: "name",
      commonFieldPopupShowConfig: {},
      randomId: commonUtils.createSid(),
      activeKey: ""
      // tempLayout: [], // 临时布局
      // tempLayout1: [], // 临时布局
      // tempLayout2: [], // 临时布局
    };
    this.selectedData = []; // 选中数据
    this.refIds = {}; // 记录所有组件的id

    this.maxTabCount = 10; // 最大tab数
    for (let index = 0; index < this.maxTabCount; index++) {
      const i = index === 0 ? "" : index;
      this.state[`tempLayout${i}`] = [];
    }
  }

  componentWillMount() {
    this.assignmentWillProps(this.props);
  }

  componentDidMount() {
    if (this.layoutRef) {
      this.layoutRef.addEventListener(
        "mousedown",
        this.handleSelectMouseDownEvent
      );
      document.addEventListener("mouseup", this.handleSelectMouseUpEvent);
      document.addEventListener("mousemove", this.handleSelectMouseMoveEvent);
      document.addEventListener("copy", this.handleCopyEvent);
    }
  }

  componentDidUpdate() {
    if (this.layoutRef) {
      const { x: baseX, y: baseY } = this.layoutRef.getBoundingClientRect();
      this.baseX = baseX;
      this.baseY = baseY;
    }
  }

  componentWillUnmount() {
    if (this.layoutRef) {
      this.layoutRef.removeEventListener(
        "mousedown",
        this.handleSelectMouseDownEvent
      );
      document.removeEventListener("mouseup", this.handleSelectMouseUpEvent);
      document.removeEventListener(
        "mousemove",
        this.handleSelectMouseMoveEvent
      );
      document.removeEventListener("copy", this.handleCopyEvent);
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.state.openNewTabFlag) {
      const dom = document.getElementsByClassName(
        `${this.state.randomId}-CommonListSelectTree`
      )[0];
      dom.parentElement.parentElement.style.display = "block";
      this.setState({
        openNewTabFlag: false
      });
    }

    const { slaveSelectedRowKeys = [], viewDragRefreshTime = 0 } = nextProps;
    const {
      slaveSelectedRowKeys: slaveSelectedRowKeysOld = [],
      viewDragRefreshTime: viewDragRefreshTimeOld = 0
    } = this.props;
    if (
      JSON.stringify(slaveSelectedRowKeys) !==
        JSON.stringify(slaveSelectedRowKeysOld) ||
      viewDragRefreshTime !== viewDragRefreshTimeOld
    ) {
      this.assignmentWillProps(nextProps);
    }
  }

  assignmentWillProps = props => {
    this.refIds = {};
    const { slaveSelectedRowKeys = [], slaveData } = props;
    const { activeKey } = this.state;
    const rowKey = slaveSelectedRowKeys[0];
    if (rowKey && commonUtils.isNotEmptyArr(slaveData)) {
      const iIndex = slaveData.findIndex(item => item.sId === rowKey);
      if (iIndex !== -1) {
        const currentData = slaveData[iIndex];
        const addState = {};
        let firstActiveKey = "";
        let firstActiveIndex = 0;
        let hasCurrentActiveKey = false;
        for (let index = 0; index < this.maxTabCount; index++) {
          const i = index === 0 ? "" : index;
          const viewRow = props[`view${i}Row`];
          if (commonUtils.isNotEmptyObject(viewRow)) {
            const viewConfigs = props[`view${i}Configs`];
            const panelName = props[`panel${i}Name`];
            const panel = currentData[panelName] || "[]";
            addState[`tempLayout${i}`] = this.handleGetInitLayout(
              viewConfigs,
              panel
            );

            const tabPaneConfig = props[`tabPane${i}Config`];
            if (tabPaneConfig?.key === activeKey) {
              hasCurrentActiveKey = true;
            }
            if (!firstActiveKey && tabPaneConfig?.key) {
              firstActiveKey = tabPaneConfig.key;
              firstActiveIndex = index;
            }
          }
        }

        if (!hasCurrentActiveKey && firstActiveKey) {
          addState.activeKey = firstActiveKey;
          addState.activeIndex = firstActiveIndex;
        }

        this.setState({ ...addState });
      }
    }
  };

  // 初始化布局数据
  handleGetInitLayout = (configs, panel) => {
    if (panel === "[]") {
      // 如果没有保存过布局数据
      let flag = 0;
      return configs.map((item, index) => {
        if (index % 4 === 0 && index !== 0) {
          flag++;
        }
        const minH =
          item.sName && item.sName.includes("sParamColumnConfig") ? 2 : 1;
        return {
          i: item.sName,
          x: (index - flag * 4) * 3,
          y: flag,
          w: 3,
          h: minH,
          minH,
          minW: 1
        };
      });
    } else {
      // 如果保存过布局数据
      // 判断配置数据和布局数据的sName是否一致
      const arrAdd = configs.map(item => item.sName); // 新增的字段
      const arrDel = []; // 删除的字段
      const panelArr = JSON.parse(panel);
      panelArr.forEach(({ i: sName }, index) => {
        const minH = sName && sName.includes("sParamColumnConfig") ? 2 : 1;
        panelArr[index].minH = minH;
        panelArr[index].h = Math.max(panelArr[index].h, minH);
        panelArr[index].minW = 1;
        const iIndex = arrAdd.findIndex(item => item === sName);
        if (iIndex !== -1) {
          arrAdd.splice(iIndex, 1);
        } else {
          arrDel.push(sName);
        }
      });

      if (commonUtils.isEmptyArr(arrAdd) && commonUtils.isEmptyArr(arrDel)) {
        // 数据没有变化
        return panelArr;
      }

      if (commonUtils.isNotEmptyArr(arrDel)) {
        // 有删除的数据
        arrDel.forEach(sName => {
          const iIndex = panelArr.findIndex(item => item.i === sName);
          if (iIndex !== -1) {
            panelArr.splice(iIndex, 1);
          }
        });
      }

      if (commonUtils.isNotEmptyArr(arrAdd)) {
        // 有新增的数据
        let newY = 0; // 新增数据的开始行位置
        panelArr.forEach(({ y, h }) => {
          newY = Math.max(y + h, newY);
        });

        let flag = 0;
        arrAdd.forEach((sName, index) => {
          if (index % 4 === 0 && index !== 0) {
            flag++;
          }
          const minH = sName && sName.includes("sParamColumnConfig") ? 2 : 1;
          panelArr.push({
            i: sName,
            x: (index - flag * 4) * 3,
            y: flag + newY,
            w: 3,
            h: minH,
            minH,
            minW: 1
          });
        });
      }
      return panelArr;
    }
  };

  // 鼠标按下事件
  handleSelectMouseDownEvent = e => {
    const { activeKey } = this.state;
    this.selectedData = [];
    const oTabpane = this.layoutRef.querySelector(
      ".ant-tabs-tabpane:not(.ant-tabs-tabpane-hidden)"
    );
    this.refIds[activeKey]?.forEach(id => {
      const dom = oTabpane.querySelector(`#${id}`);
      if (dom) {
        const oChecked = dom.querySelector(".divChecked");
        oChecked ? (oChecked.style.display = "none") : "";
      }
    });
    if (e?.target?.classList?.contains("blankPanel")) {
      this.bMousedwon = true;
      const { clientX, clientY } = e;

      this.clientX = clientX;
      this.clientY = clientY;

      this.selectAreaRef.style.left = clientX - this.baseX + "px";
      this.selectAreaRef.style.top = clientY - this.baseY + "px";
      this.selectAreaRef.style.width = "1px";
      this.selectAreaRef.style.height = "1px";

      this.setState({ maskVisible: true });
    }
  };

  // 鼠标抬起事件
  handleSelectMouseUpEvent = e => {
    const bMousedwonBak = this.bMousedwon;
    this.bMousedwon = false;
    if (bMousedwonBak) {
      this.setState({ maskVisible: false });
    }
  };

  // 鼠标移动事件
  handleSelectMouseMoveEvent = e => {
    if (this.bMousedwon && this.selectAreaRef) {
      const { activeKey } = this.state;
      const { clientX, clientY } = e;
      const x1 = Math.min(clientX, this.clientX);
      const x2 = Math.max(clientX, this.clientX);
      const y1 = Math.min(clientY, this.clientY);
      const y2 = Math.max(clientY, this.clientY);

      this.selectAreaRef.style.left = x1 - this.baseX + "px";
      this.selectAreaRef.style.top = y1 - this.baseY + "px";
      this.selectAreaRef.style.width = x2 - x1 + "px";
      this.selectAreaRef.style.height = y2 - y1 + "px";

      const {
        right: right1,
        left: left1,
        bottom: bottom1,
        top: top1
      } = this.selectAreaRef.getBoundingClientRect();
      const selectedData = [];
      const oTabpane = this.layoutRef.querySelector(
        ".ant-tabs-tabpane:not(.ant-tabs-tabpane-hidden)"
      );
      this.refIds[activeKey]?.forEach(id => {
        const dom = oTabpane.querySelector(`#${id}`);
        if (dom) {
          const {
            right: right2,
            left: left2,
            bottom: bottom2,
            top: top2
          } = dom.getBoundingClientRect();
          if (
            !(
              right1 < left2 ||
              left1 > right2 ||
              bottom1 < top2 ||
              top1 > bottom2
            )
          ) {
            selectedData.push(id);
            dom.querySelector(".divChecked").style.display = "";
          } else {
            dom.querySelector(".divChecked").style.display = "none";
          }
        }
      });
      this.selectedData = selectedData;
    }
  };

  // 复制操作
  handleCopyEvent = e => {
    if (commonUtils.isNotEmptyArr(this.selectedData)) {
      const clipboardData = e.clipboardData;
      if (!clipboardData) {
        return;
      }
      e.preventDefault();

      const { activeIndex } = this.state;
      // 获取当前tab页布局
      const layout = this.state[
        `tempLayout${activeIndex === 0 ? "" : activeIndex}`
      ];

      const selectedLayout = layout.filter(item =>
        this.selectedData.includes(item.i)
      );

      const viewRow =
        this.props[`view${activeIndex === 0 ? "" : activeIndex}Row`] || {};

      const [minX, maxX, minY, maxY] = selectedLayout.reduce(
        (result, item) => {
          const { x, y, w, h } = item;
          result = [
            Math.min(result[0], x),
            Math.max(result[1], x + w),
            Math.min(result[2], y),
            Math.max(result[3], y + h)
          ];
          return result;
        },
        [999, 0, 999, 0]
      );

      const tableW = maxX - minX;
      const tableH = maxY - minY;

      const filledArr = [];
      const tableContent = `<table><tbody>${new Array(tableH)
        .fill("")
        .map((_, trIndex) => {
          return `<tr>${new Array(tableW)
            .fill("")
            .map((_, tdIndex) => {
              const startX = minX + tdIndex;
              const startY = minY + trIndex;
              const iIndex = selectedLayout.findIndex(
                item => item.x === startX && item.y === startY
              );
              if (iIndex !== -1) {
                const { i, w, h } = selectedLayout[iIndex];
                // 记录占据的单元格位置
                for (let j = startX; j < startX + w; j++) {
                  for (let k = startY; k < startY + h; k++) {
                    filledArr.push(`${j}_${k}`);
                  }
                }

                const title = viewRow[i];
                let value = viewRow[i.replace("sParam", "sParamDefault")];
                value = value === undefined ? "" : value;
                return `<td rowspan=${h}>${title}</td><td colspan=${w -
                  1} rowspan=${h}>${value}</td>`;
              } else if (filledArr.includes(`${startX}_${startY}`)) {
                return "";
              } else {
                return "<td></td>";
              }
            })
            .join("")}</tr>`;
        })
        .join("")}</tbody></table>`;

      clipboardData.setData("text/plain", tableContent);
    }
  };

  onOpenNewTab = () => {
    const dom = document.getElementsByClassName(
      `${this.state.randomId}-CommonListSelectTree`
    )[0];
    dom.parentElement.parentElement.style.display = "none";
    this.setState({
      openNewTabFlag: true
    });
  };
  handleToggle = () => {
    const { expandView } = this.props;
    this.props.onSaveState({ expandView: !expandView });
  };
  handleViewClick = (name, sName, sId) => {
    this.props.onViewClick(name, sName, sId);
  };
  /* 字段弹窗 */
  handleFieldPopupModal = (showConfig, name) => {
    this.setState({
      commonFieldPopupVisible: true,
      commonFieldPopupTbName: name,
      commonFieldPopupShowConfig: showConfig
    });
  };
  handleSelectCommonFieldPopup = (name, selectConfig, selectData) => {
    const { commonFieldPopupTbName, commonFieldPopupShowConfig } = this.state;
    this.props.onSelectCommonPopup(
      name,
      selectConfig,
      selectData,
      commonFieldPopupTbName,
      commonFieldPopupShowConfig
    );
  };
  handleSelectCancel = modelVisible => {
    this.setState({
      [modelVisible]: false
    });
  };

  changeLayout(oldLayout, newLayout, cover) {
    if (cover) {
      const ret = [];
      newLayout.forEach(item => {
        const oldValue = oldLayout.find(item1 => item1.i === item.i);
        ret.push({
          ...oldValue,
          x: item.x,
          y: item.y,
          w: item.w,
          h: item.h
        });
      });
      return ret;
    } else {
      const ret = oldLayout.map(item => {
        const newValue = newLayout.find(item1 => item1.i === item.i);
        if (newValue) {
          item = {
            ...item,
            x: newValue.x,
            y: newValue.y,
            w: newValue.w,
            h: newValue.h
          };
        }
        return item;
      });
      return ret;
    }
  }

  handleGetLayoutH = (layout, key, defaultH = 1) => {
    const config = layout.find(item => item.i === key);
    if (config && config.h) {
      return config.h;
    } else {
      return defaultH;
    }
  };

  handleGetPanel = (index = 0) => {
    const num = index === 0 ? "" : index;
    const sParamType = this.props[`tabPane${num}Config`].key;
    const {
      enabled = false,
      app,
      [`table${num}Name`]: tableName,
      [`tabPane${num}Config`]: tabPaneConfig,
      [`panel${num}Name`]: panelName,
      [`view${num}Configs`]: configs,
      [`view${num}Row`]: viewRow,

      [`b${sParamType}ParamTable`]: bParamTable,
      [`${sParamType}ParamListConfig`]: paramListConfig,
      [`${sParamType}ParamListColumn`]: paramListColumn,
      [`${sParamType}ParamListData`]: paramListData
    } = this.props;

    const tempLayoutName = `tempLayout${num}`;
    const { [tempLayoutName]: layout } = this.state;

    const sTableName = `${sParamType}ParamList`;
    const sTableConfig = `${sParamType}ParamListConfig`;
    const sTableColumn = `${sParamType}ParamListColumn`;
    const sTableData = `${sParamType}ParamListData`;
    const key = "sParamColumnConfig1";
    const paramListTableProps = {
      ...commonBusiness.getTableTypes(sTableName, {
        ...this.props,
        [sTableConfig]: paramListConfig,
        [sTableColumn]: paramListColumn,
        [sTableData]: paramListData
      }),
      tableProps: {}
      // data: paramListData1,
    };

    return (
      <TabPane className={layoutStyle.tabPane} {...tabPaneConfig}>
        <ReactGridLayout
          margin={[0, 0]}
          verticalCompact={false}
          className="blankPanel"
          layout={layout}
          cols={12}
          rowHeight={28}
          width={700}
          isDraggable={enabled}
          isResizable={enabled}
          onLayoutChange={newLayout => {
            if (enabled) {
              const tempLayoutNew = this.changeLayout(layout, newLayout);

              this.props.onDataChange(
                "slave",
                panelName,
                { [panelName]: JSON.stringify(tempLayoutNew) },
                this.props.slaveSelectedRowKeys[0],
                []
              );
              this.setState({
                [tempLayoutName]: tempLayoutNew
              });
            }
          }}
          onResize={(_, _1, _2, _3, _4, _5) => {
            clearTimeout(this.resizeTimer);
            this.resizeTimer = setTimeout(() => {
              if (_5?.offsetParent) {
                const oLabel = _5.offsetParent.querySelector(
                  ".ant-form-item-label"
                );
                if (oLabel) {
                  oLabel.style.flex =
                    _3.w > 1 ? `0 0 ${(3 * 33) / _3.w}%` : "0 0 0";
                }
              }
            }, 200);
          }}
          isDroppable={enabled}
        >
          {bParamTable ? (
            <div
              key={key}
              id={key}
              className={enabled ? layoutStyle.editMode : ""}
              style={{
                display: "block",
                position: "relative",
                overflow: "hidden"
              }}
            >
              <StaticEditTable
                {...paramListTableProps}
                setOpterationColumn="Y"
                layoutH={this.handleGetLayoutH(layout, key, 2)}
              />
            </div>
          ) : (
            configs.map(child => {
              const iRowNum =
                child.iColValue === 1
                  ? 6
                  : 1; /* 1个字段占的网格个数 ，网格总个数是24 */
              const iColValue = sMemo
                ? 24
                : child.iColValue *
                  iRowNum; /* 跨度 */ /* 产品部要求 备注设置成一行到底 */
              const sMemo = child.sName.toLowerCase().endsWith("memo");
              let enabledNew =
                enabled && !child.bReadonly && !child.specialControl;
              const sFormulaMemo =
                child.sName.toString() === "sFormulaMemo" ? "none" : "block";
              if (child.iTag === 1) {
                enabledNew = false;
              } else if (child.iTag === 3) {
                enabledNew = true;
              }

              let w = 3;
              const iIndex = layout.findIndex(item => item.i === child.sName);
              if (iIndex !== -1) {
                w = layout[iIndex].w;
              }
              const flexWidth = w !== 1 ? (3 * 33) / w : 0;
              const formItemLayout = {
                labelCol: {
                  flex: flexWidth + "%",
                  style: {
                    color: "rgba(0, 0, 0, 0.65)",
                    backgroundColor: "#BFEFFF"
                  }
                },
                wrapperCol: { flex: "auto" }
              };

              const showTypeProps = {
                app,
                iColValue,
                name: tableName,
                record: viewRow,
                sId: viewRow.sId,
                form: this.props.form,
                getSqlDropDownData: this.props.getSqlDropDownData,
                getSqlCondition: this.props.getSqlCondition,
                handleSqlDropDownNewRecord: this.props
                  .handleSqlDropDownNewRecord,
                getFloatNum: this.props.getFloatNum,
                onChange: this.props.onDataChange,
                showConfig: child,
                formItemLayout,
                textArea: sMemo,
                enabled: enabledNew,
                dataValue: viewRow[child.sName],
                bTable: false,
                bViewTable: false,
                formRoute: this.props.formRoute,
                onViewClick: this.handleViewClick,
                onFieldDoubleClick: this.props.handleFieldDoubleClick
              };
              /* 如果包含sParamColumnConfig 则渲染表格，否则渲染为View */
              if (child.sName && child.sName.includes("sParamColumnConfig")) {
                const paramListConfigStr = child.showName;
                const num = child.sName
                  .replace("sParamColumnConfig", "")
                  .trim(); /* 不同参数的表格名称，通过序号区分 */
                const sParamTableName = "param" + num + "List";
                const sParamTableConfig = "param" + num + "ListConfig";
                const sParamTableColumn = "param" + num + "ListColumn";
                const paramListConfig = commonUtils.isJSON(paramListConfigStr)
                  ? JSON.parse(paramListConfigStr)
                  : {};
                let paramListColumn = [];
                if (commonUtils.isNotEmptyObject(paramListConfig)) {
                  paramListColumn = commonFunc.getHeaderConfig(paramListConfig);
                }
                const paramListTableProps = {
                  ...commonBusiness.getTableTypes(sParamTableName, {
                    ...this.props,
                    [sParamTableConfig]: paramListConfig,
                    [sParamTableColumn]: paramListColumn
                  }),
                  tableProps: {}
                  // data: [],
                };
                if (commonUtils.isEmptyObject(paramListTableProps.config)) {
                  paramListTableProps.config.gdsconfigformslave = [];
                }
                return (
                  <div
                    key={child.sName}
                    id={child.sName}
                    className={enabled ? layoutStyle.editMode : ""}
                    style={{
                      display: sFormulaMemo,
                      position: "relative",
                      overflow: "hidden"
                    }}
                  >
                    <StaticEditTable
                      {...paramListTableProps}
                      setOpterationColumn="Y"
                      layoutH={this.handleGetLayoutH(layout, child.sName)}
                    />
                  </div>
                );
              } else {
                if (
                  this.refIds[sParamType] &&
                  !this.refIds[sParamType].includes(child.sName)
                ) {
                  this.refIds[sParamType].push(child.sName);
                } else {
                  this.refIds[sParamType] = [child.sName];
                }

                const showType = (
                  <ShowType
                    key={`${child.sName}_${flexWidth}`}
                    {...showTypeProps}
                  />
                );

                return (
                  <div
                    key={child.sName}
                    id={child.sName}
                    className={`${enabled ? layoutStyle.editMode : ""} ${
                      layoutStyle.showType
                    }`}
                    style={{
                      display: sFormulaMemo,
                      position: "relative"
                    }}
                  >
                    {w === 1 ? (
                      <Tooltip placement="bottom" title={child.showName}>
                        <div>{showType}</div>
                      </Tooltip>
                    ) : (
                      showType
                    )}

                    <div
                      className={`divChecked ${layoutStyle.divChecked}`}
                      style={{ display: "none" }}
                    />
                  </div>
                );
              }
            })
          )}
        </ReactGridLayout>
      </TabPane>
    );
  };

  // 获取字段弹窗参数
  getCommonFieldPopupProps() {
    /* 字段弹窗功能 */
    let commonFieldPopupProps = {};
    let commonFieldPopupTitle = "选择弹窗";
    if (commonUtils.isNotEmptyObject(this.props)) {
      let commonFieldPopupConfig = {};
      const { masterConfig, sModelsId } = this.props;
      if (commonUtils.isNotEmptyObject(masterConfig)) {
        const iIndex = masterConfig.gdsconfigformslave.findIndex(
          item =>
            commonUtils.isNotEmptyObject(item.sName) &&
            item.sDropDownType === "popup"
        );
        if (iIndex > -1) {
          commonFieldPopupConfig = masterConfig.gdsconfigformslave[iIndex];
          commonFieldPopupTitle =
            commonUtils.isNotEmptyObject(commonFieldPopupConfig) &&
            commonUtils.isNotEmptyObject(commonFieldPopupConfig.sActiveName)
              ? commonFieldPopupConfig.sActiveName
              : commonFieldPopupTitle;
          commonFieldPopupProps = {
            app: {
              ...this.props.app,
              currentPane: {
                name: "commonPopup",
                config: commonFieldPopupConfig,
                conditonValues: this.props.getSqlCondition(
                  commonFieldPopupConfig
                ),
                title: commonFieldPopupTitle,
                route: "/indexPage/commonList",
                formRoute: "/indexPage/commonList",
                formId: commonFieldPopupConfig.sActiveId,
                key: sModelsId + commonFieldPopupConfig.sId,
                sModelsType: "search/commonPopup",
                select: this.handleSelectCommonFieldPopup,
                selectCancel: this.handleSelectCancel.bind(
                  this,
                  "commonFieldPopupVisible"
                )
              }
            },
            commonFieldPopupTitle,
            dispatch: this.props.dispatch,
            content: this.props.content,
            id: randomId,
            onOpenNewTab: this.onOpenNewTab,
            outerMasterData: this.props.masterData,
            realizeHeight: this.props.realizeHeight /* 拖动偏移高度 */
          };
        }
      }
    }

    return commonFieldPopupProps;
  }

  render() {
    const { iColValueView, enabled = false } = this.props;
    const {
      commonFieldPopupVisible,
      maskVisible,
      randomId,
      activeKey
    } = this.state;

    let viewRowGroup = {};
    for (let index = 0; index < this.maxTabCount; index++) {
      const i = index === 0 ? "" : index;
      viewRowGroup = { ...viewRowGroup, ...this.props[`view${i}Row`] };
    }

    const commonFieldPopupProps = this.getCommonFieldPopupProps();

    return commonUtils.isNotEmptyObject(viewRowGroup) ? (
      <Col
        span={iColValueView}
        order={5}
        className={`${layoutStyle.commonLayout} ${
          enabled ? layoutStyle.editModeStyle : ""
        }`}
        style={{ marginTop: -30 }}
        ref={ref => {
          this.layoutRef = ref;
        }}
      >
        <Tabs
          tabBarStyle={{ margin: "0 8px" }}
          activeKey={activeKey}
          onTabClick={key => {
            // 获取当前tab页布局
            let activeIndex = 0;
            for (let index = 0; index < this.maxTabCount; index++) {
              const i = index === 0 ? "" : index;
              const tabPaneConfig = this.props[`tabPane${i}Config`];
              if (
                commonUtils.isNotEmptyObject(tabPaneConfig) &&
                tabPaneConfig.key === key
              ) {
                activeIndex = tabPaneConfig.i === "" ? 0 : tabPaneConfig.i;
                break;
              }
            }
            this.setState({
              activeKey: key,
              activeIndex
            });
          }}
        >
          {new Array(this.maxTabCount).fill("").map((_, index) => {
            const i = index === 0 ? "" : index;
            const viewRow = this.props[`view${i}Row`];
            if (commonUtils.isNotEmptyObject(viewRow)) {
              return this.handleGetPanel(index);
            } else {
              return "";
            }
          })}
        </Tabs>
        {commonFieldPopupVisible ? (
          <AntdDraggableModal
            width={1300}
            zIndex={1000}
            title={commonFieldPopupProps.commonFieldPopupTitle}
            visible={commonFieldPopupVisible}
            onCancel={this.handleSelectCancel.bind(
              this,
              "commonFieldPopupVisible"
            )}
            footer={null}
            onSaveState={this.props.onSaveState}
            className={`${randomId}-CommonListSelectTree`}
          >
            <CommonListSelectTree {...commonFieldPopupProps} />
          </AntdDraggableModal>
        ) : (
          ""
        )}
        <div
          className={layoutStyle.mask}
          style={{ display: maskVisible ? "" : "none" }}
        >
          <div className="maskContent">
            <div
              className="maskSelectArea"
              ref={ref => {
                this.selectAreaRef = ref;
              }}
            />
          </div>
        </div>
      </Col>
    ) : (
      ""
    );
  }
}