// import React from 'react';
// import Checkbox from 'antd/lib/Checkbox';
// import Pagination from 'antd/lib/Pagination';
// import Spin from 'antd/lib/Spin';
// import message from 'antd/lib/message';
// import Button from 'antd/lib/Button';
// import Popover from 'antd/lib/Popover';
// import { render as renderAmis } from '../../../../index'
// import { Renderer, RendererProps } from '../../../../factory';
// import { BaseSchema, SchemaApi } from '../../../../Schema';
// import './style/baseCss/index.css';
// import './components/MainExport/MainExport.css';
// import { Action } from '../../../../types';
// import { filter } from '../../../../utils/tpl';
// import { ScopedContext, IScopedContext } from '../../../../Scoped';
// import { CN } from './locale/pagination';
// import { findDOMNode } from 'react-dom';
// import styled from 'styled-components';
// import {
//   WrapperLionTableContainer,
//   WrapperLionTableFix,
//   WrapperLionTableBase,
//   WrapperLionTableFilter,
//   WrapperLionTableHeaderToolBar,
//   WrapperCommonThead,
//   WrapperCommonTbody,
//   WrapperCommonSurfaceGroup,
//   WrapperBtnPopover
// } from './style/index';
// import { extractTemplate } from '../../utils/utils';
// import { LionTableStore, ILionTableStore } from '../../../../store/liontable';

// import { evalExpression } from '../../../../utils/tpl';
// import { handleActionCallback_10003, createObject } from '../../../../utils/helper';
// import SectionList from './components/headerSection/index'
// import { getLodop } from '../../../../utils/print/LodopFuncs'
// import { ModalPrint } from '../../LabelPrint/ModalPrint';

// import './style/baseCss/popover.css'
// import { RendererEnv } from '../../../../env';

// const StyledMargin = styled.div`
//   .antd-Button{
//     margin-right:5px;
//   }
// `

// interface LionTableState {
//   fixLeft: number; // 左侧滚动条位置
//   tableBody: any; // 表格体引用
//   fixColumns: any[]; // 从表列配置
//   selectList: any; // 被选中的数据行
//   SonList: any; // 从表数据
//   checkAll: boolean; // 选中所有数据
//   loading: boolean; // 表格加载loading
//   pageData: any[]; // 主表分页数据
//   totalSize: number;
//   pageSize: number;
//   page: number;
//   wrapper: number;
//   _container_height: any;
//   table_height: any;
//   _SonList: any;
//   storageSource: any;
//   pageSelectList: any;
//   colHideList: any;
//   hasFetch: boolean; // 标记是否请求过
//   ModalProps: any;
//   modalLabelPrintOpen: boolean;
//   modalFilePrintOpen: boolean;
//   surfaceItemWidth: number;
// }

// interface ColumnObject {
//   label?: string;

//   name?: string;

//   group?: Array<any>;

//   hideLabel?: boolean;

//   hiddenOn?: string;

//   [propName: string]: any;
// }



// export interface LionTableSchema extends BaseSchema {
//   type: 'lion-table';
//   /*
//     组件类型
//   */
//   filter?: any;
//   /*
//     查询器表单
//   */
//   headerToolbar: Array<any>;
//   /*
//     头部按钮组（非选中才能点击，普通按钮)
//   */
//   bulkActions: Array<any>;
//   /*
//     头部按钮组（批量，有数据被选中才能点击)
//   */
//   primaryField?: string;
//   /*
//     主表行的主键字段
//   */
//   columns: Array<ColumnObject>;
//   /*
//     子表列配置
//   */
//   api?: SchemaApi;
//   /*
//     数据源请求地址及参数
//   */
//   list_columns: Array<ColumnObject>
//   /*
//     主表列配置
//   */
//   source: string;
//   /*
//     根据字段获取响应地内容中的表格数据，默认为items
//   */
//   checkbox: boolean;
//   /*
//     是否使用复选框
//   */
//   detailTableField?: string;
//   /*
//     表示主表中的子表的标识符，用于提取主表中的子表数据
//   */
//   style?: any;
//   /*
//     自定义表格的样式对象
//   */
//   subTableTitle?: string;
//   /*
//     从表弹出框标题
//    */
//   width?: number;
//   /*
//     设置表格宽度
//   */
//   totalTab?: {
//     key: number;
//     totalNum: string | number;
//   }
//   /*
//     当前tab对应的标记
//   */
//   setTotalNum?: (key: string | number, totalNum: number, tableName: string) => void;
//   /*
//     用于当表格使用tabs组件包裹时，表格初始化完成后，用于改变tabs上的标签的内容
//   */
//   onAction?: (
//     e: React.UIEvent<any> | void,
//     action: Action,
//     ctx: object,
//     throwErrors: boolean,
//     delegate?: IScopedContext
//   ) => any;
//   /*
//     按钮触发器
//   */
//   subSchemaApi?: SchemaApi;
//   /*
//     查看全部子表内容的api
//   */
//   isDialogMode?: boolean;
//   /*
//   是否处于弹窗模式下
//   */

//   initFetch?: boolean;
//   /*
//     初始是否拉取数据，默认为true
//   */
//   keepItemSelectionOnPageChange?: boolean;
//   /*
//     是否开启跨页选中
//   */
//   perPageAvailable?: number[];
//   /*
//     分页
//   */

// }

// interface LionTableContextSchema {
//   env?: RendererEnv;
//   handleAction?: Function;
//   primaryField?: string;
// }

// export const LionTableContext = React.createContext<LionTableContextSchema>({})

// export interface LionTableProps extends RendererProps, Omit<LionTableSchema, 'type' | 'className' | 'data'> { store: ILionTableStore; }

// const calcGap = (rest: number = 0) => {
//   // window.document.documentElement.clientHeight - 20 - (document.querySelector('.ant-tabs-content')?.querySelector('.antd-Tabs-links') ? 32 : 0),
//   let rootDom: Element | null = document.querySelector('.ant-tabs-content');
//   // let linkHeight: number = rootDom?.querySelector('.antd-Tabs-links')?.clientHeight ?? 0;

//   // let thisDom: Element | null | Text = findDOMNode(this);


//   let height: number = rootDom?.clientHeight! - 20;

//   return height - rest
// }

// const calcInnerWidth = () => {
//   let clientWidth: number = document.querySelector('.ant-tabs-content')?.clientWidth!;
//   // document.documentElement.clientWidth || document.body.clientWidth 直接获取耗时差距太大，暂不使用
//   return clientWidth > 1680 ? clientWidth : 1680
// }

// const antiShake = (callBack: Function, wait = 0, rest?: unknown) => {
//   let timer: any = null;
//   return () => {
//     if (timer) {
//       clearTimeout(timer);
//       timer = null;
//     }
//     timer = setTimeout(() => {
//       callBack(rest)
//     }, wait)
//   }
// }


// export class LionTable extends React.Component<LionTableProps, LionTableState>{

//   static contextType = ScopedContext;

//   constructor(props: LionTableProps, context: IScopedContext) {
//     super(props);

//     this.state = {
//       fixLeft: 0, // 左侧滚动条位置
//       tableBody: React.createRef() as any, // 表格体引用
//       fixColumns: [], // 从表列配置
//       selectList: {} as any, // 被选中的数据行
//       pageSelectList: {} as any,
//       SonList: {} as any,
//       checkAll: false, // 选中所有数据
//       loading: false, // 表格加载loading
//       pageData: [],
//       _SonList: [],
//       totalSize: 0,
//       pageSize: 10,
//       page: 1,
//       storageSource: {} as any,
//       colHideList: {} as any,
//       wrapper: calcInnerWidth(),
//       _container_height: calcGap(),
//       table_height: calcGap(40 + 46 + (props?.filter ? 50 : 0) + ((props?.headerToolbar?.length > 0 || props?.bulkActions?.length > 0) ? 40 : 10)),
//       hasFetch: false, // 标记是否请求过
//       ModalProps: {
//         title: '打印选项',
//         show: false,
//         onHide: null
//       },
//       modalLabelPrintOpen: false,
//       modalFilePrintOpen: false,
//       surfaceItemWidth: 0
//     }

//     this.handleAction = this.handleAction.bind(this);

//     const scoped = context;
//     scoped.registerComponent(this);
//   }

//   static defaultProps: Partial<LionTableProps> = {
//     source: 'items',
//     ids: '_id',
//     store: LionTableStore as any
//   }

//   _uploadRef: any;



//   get dataSource() {
//     return this.state.pageData
//   }

//   _bindRef = (ref: any) => {
//     this._uploadRef = ref;
//   }

//   // 主表选中行
//   get checkList() {
//     const { selectList, storageSource } = this.state;
//     let _checkList = Object.entries(selectList).filter((item: any) => {
//       return item[1] === true
//     }).map(item => {
//       return item[0]
//     })
//     return _checkList.map((item: any) => {
//       return storageSource[item]
//     })
//   }

//   get record_ids() {
//     const { primaryField } = this.props;
//     const { pageData } = this.state;
//     let _ids: string = '';

//     pageData.forEach((record: any) => {
//       _ids += record.hasOwnProperty(primaryField) ? record[primaryField!] + ',' : ''
//     })
//     return _ids.slice(0, _ids.length - 1)
//   }

//   get ids() {
//     let _ids: string = '';
//     const { primaryField } = this.props;
//     this.checkList.map((_select: any) => {
//       _ids += _select.hasOwnProperty(primaryField) ? _select[primaryField!] + ',' : ''
//     })
//     return _ids.slice(0, _ids.length - 1)
//   }

//   // 计算左侧固定表格的宽度
//   get leftTableWidth() {
//     const { fixColumns } = this.state;
//     let count = 0;
//     fixColumns.forEach((item: any, index: number) => {
//       if (item?.fixed === 'left') {
//         count += item?.width
//       }
//     })
//     return count
//   }

//   // 计算右侧固定表格的宽度
//   get rightTableWidth() {
//     const { fixColumns } = this.state;
//     let count = 0;
//     fixColumns.forEach((item: any, index: number) => {
//       if (item?.fixed === 'right') {
//         count += item?.width
//       }
//     });
//     return count
//   }

//   CounterChildWidth(fixColumns: any) {
//     let count = fixColumns.reduce((prev: any, current: any, index: number) => {
//       return prev + (current?.width ?? 0)
//     }, 0)
//     return count
//   }

//   get surfaceWidth() {
//     const { list_columns } = this.props;
//     let count = list_columns.reduce((prev, current, index) => {
//       return prev + (current?.width ?? 0)
//     }, 0)
//     return count
//   }

//   // 用于添加并合并多个className
//   classNames = (...names: any[]) => {
//     let currentNames: string[] = [];
//     names.forEach((name) => {
//       if (name) currentNames.push(name)
//     });
//     return currentNames.join(' ');
//   }

//   // 用于生成唯一id以关联主从表
//   uuid = () => {
//     const temp_url = URL.createObjectURL(new Blob());
//     const uuid = temp_url.toString();
//     URL.revokeObjectURL(temp_url);
//     return uuid.substr(uuid.lastIndexOf("/") + 1);
//   }

//   matchStr(str: string) {
//     let charS = '';
//     for (let s of str) {
//       if (s === "$" || s === "}" || s === "{") {
//         charS += s.replace(s, '')
//       } else {
//         charS += s
//       }
//     }

//     return charS
//   }

//   requestFilterSource = (paramsField: any, isFilter: boolean = false): void => {
//     const { env, columns, data } = this.props;
//     let _data = {
//       ...paramsField,
//       ...data,
//       ...data?.__super
//     }
//     this.setState({
//       loading: true
//     })

//     try {
//       env.fetcher(this.props?.api!, _data).then((res: any) => {

//         if (!this.state.hasFetch) {
//           this.setState({
//             hasFetch: true
//           })
//         }
//         if (res?.status === 0) {
//           if (isFilter) {
//             this.setState({
//               storageSource: {},
//               selectList: {},
//               pageSelectList: {}
//             })
//           }
//           this.initScrollShadow();
//           this.getFixedColumns(columns, res?.data ? res?.data : {});
//         } else {
//           this.setState({
//             loading: false
//           })
//           throw new Error(res?.msg);
//         }
//       }).catch((e: Error) => {
//         env.notify('error', e.message)
//       })
//     } catch (err) {
//       console.log('err', err)
//       message.error(err);
//       this.setState({
//         loading: false
//       })
//     }
//   }

//   initScrollShadow = (target?: any) => {
//     // 滚动主体
//     const scrollBody: any = target ? target : findDOMNode(this);

//     const { fixColumns } = this.state;

//     let scrollClientWidth: number = this.state.wrapper > this.CounterChildWidth(fixColumns) ? this.state.wrapper : this.CounterChildWidth(fixColumns)

//     // 左侧固定表格
//     const fixLeftTable: any = target ? target.parentElement.parentElement.querySelector('.lion-table-container-fixed-wrapper--left') : scrollBody.querySelector('.lion-table-container-fixed-wrapper--left');
//     // 右侧固定表格
//     const fixRightTable: any = target ? target.parentElement.parentElement.querySelector('.lion-table-container-fixed-wrapper--right') : scrollBody.querySelector('.lion-table-container-fixed-wrapper--right');

//     // 滚动主体的向左滚动距离大于0且左侧固定表格不存在阴影class时，添加阴影效果
//     if (scrollBody.scrollLeft > 0 && fixLeftTable?.className.indexOf('lion-talbe--fix--left--shadow') === -1) {
//       fixLeftTable.className = fixLeftTable.className + ' lion-talbe--fix--left--shadow'
//     }

//     // 滚动主体的向左滚动距离小于等于0，移除左侧表格的阴影class
//     if (scrollBody?.scrollLeft <= 0) {
//       fixLeftTable.className = fixLeftTable?.className.replace(' lion-talbe--fix--left--shadow', '')
//     }

//     if (target) {
//       // 滚动主体的clientWidth + scrollLeft 大于等于 滚动主体的滚动条长度，说明到最右边
//       if (Math.floor(scrollBody.clientWidth + scrollBody.scrollLeft) >= scrollBody.scrollWidth) {
//         fixRightTable.className = fixRightTable.className.replace(' lion-talbe--fix--right--shadow', '')
//       }

//       // 滚动主体的clientWidth + scrollLeft 小于 滚动主体的滚动条长度
//       if ((Math.floor(scrollBody.clientWidth + scrollBody.scrollLeft) < scrollBody.scrollWidth && fixRightTable.className.indexOf('lion-talbe--fix--right--shadow') === -1)) {
//         fixRightTable.className = fixRightTable.className + ' lion-talbe--fix--right--shadow'
//       }
//       return;
//     }

//     // 滚动主体的clientWidth + scrollLeft 大于等于 滚动主体的滚动条长度，说明到最右边
//     if (scrollBody.scrollWidth >= scrollClientWidth) {
//       fixRightTable.className = fixRightTable.className.replace(' lion-talbe--fix--right--shadow', '')
//     }

//     // 滚动主体的clientWidth + scrollLeft 小于 滚动主体的滚动条长度
//     if (scrollBody.scrollWidth < scrollClientWidth && fixRightTable.className.indexOf('lion-talbe--fix--right--shadow') === -1) {
//       fixRightTable.className = fixRightTable.className + ' lion-talbe--fix--right--shadow'
//     }

//   }

//   // 表头选择框选中
//   onCheckAllChange = (e: any, isClear?: boolean) => {
//     e.preventDefault();

//     const pageSelectList = this.state.pageSelectList;

//     const selectList = this.state.selectList;

//     const { checkAll } = this.state;

//     const _checkAll = isClear ? false : !checkAll

//     Object.keys(pageSelectList).forEach((item: any) => {
//       selectList[item] = _checkAll;
//       pageSelectList[item] = _checkAll;
//     });

//     this.setState({
//       selectList: selectList,
//       checkAll: _checkAll,
//       pageSelectList: pageSelectList
//     });
//   }

//   handleSectionChange = (e: React.MouseEvent, current: string, isClear: boolean) => {
//     e.preventDefault()

//     if (isClear) {
//       this.onCheckAllChange(e, isClear)
//     } else {
//       this.handleMasterChange(e, current)
//     }



//   }

//   // 主表选择框被选中时
//   handleMasterChange = (e: any, current: any) => {
//     e.preventDefault();
//     // 点击时阻止默认事件
//     const pageSelectList = this.state.pageSelectList;

//     const selectList = this.state.selectList;

//     let table_height = this.state.table_height;

//     let checkAll;
//     // 选中所有数据

//     selectList[current] = !selectList[current];

//     pageSelectList[current] = selectList[current];

//     // 判断是否所有从表数据均被选中，若被选中则给表头选择框添加选中效果
//     checkAll = Object.values(pageSelectList).every((item: any) => {
//       if (item === false) {
//         return false
//       }
//       return true
//     });

//     this.setState({
//       selectList: selectList,
//       checkAll: checkAll,
//       pageSelectList: pageSelectList
//     }, () => {

//     });
//   }

//   CounteBtnLabelWidth = (buttons: any, pageData: any, num: number) => {
//     let count: number = 0;
//     let label: number = 0;

//     let marginLength: number = 0;

//     let btn_length: number = 0;

//     pageData.forEach((source: any) => {
//       let show_btns = buttons.filter((item: any) => {
//         return !evalExpression(item?.hiddenOn, { ...source })
//       }).slice(0, num)
//       if (count < show_btns?.length) {
//         show_btns?.forEach((btn: any) => {
//           label += btn?.label?.length;
//         })
//       }
//       count = (count >= show_btns?.length ? count : show_btns?.length);
//     })

//     marginLength = (count + 1) * 5; // 35

//     btn_length = (label * 13 + 26 * (count ? count : 1)); // 78 + 26 * 6

//     return { count: count, labelLength: label, btn_width_lenth: (marginLength + btn_length + 25) }
//   }




//   getFixedColumns = (columns: any, data: any) => {

//     let dataSource: any = [];

//     let wrapper: number = this.state.wrapper;

//     const { source, checkbox, list_columns, detailTableField, isDialogMode, primaryField, keepItemSelectionOnPageChange } = this.props;

//     if (data.hasOwnProperty(source)) {
//       dataSource = data[source];
//     }

//     if (isDialogMode) {
//       let thisParent = findDOMNode(this)?.parentElement;
//       wrapper = (thisParent?.clientWidth! > 500 ? thisParent?.clientWidth! : 500)
//     }


//     // 复制一层列配置，计算固定列的left
//     let copy_columns = JSON.parse(JSON.stringify(columns));

//     let fixTag: any = {}; // 将要生成的列配置
//     let tagIndex: any = {};
//     let tag: number = 0;
//     let pageData: any = [];
//     let totalSize: number = 0;

//     let MainList: any[] = []; // 存储主表
//     let SonList: any = {}; // 存储从表
//     let temp_select: any = {}; // 存储选中行

//     let _SonList: any = [];
//     let btn_length_max = 0;

//     let is_not_exist: any[] = []; // 不存在width属性的列的集合

//     let surface_not_exist_column: any[] = [];

//     let storageSource: any = {};
//     let pageSelectList: any = {};
//     let colHideList: any = {};

//     let checkAll: boolean = false;

//     let surfaceWidth: number = this.surfaceWidth;

//     let surface_btn: any = list_columns?.find((_column: any) => {
//       return _column?.buttons
//     })

//     let child_btn: any = copy_columns?.find((_column: any) => {
//       return _column?.buttons
//     })

//     // 计算存在width的列总长度以及统计不存在width的列
//     columns.forEach((_column: any) => {

//       if (!_column?.width && _column?.name) {
//         is_not_exist.push({
//           name: _column.name,
//         })
//       }
//     })

//     let empty_col: boolean = is_not_exist?.length === 0;

//     // 主表从表数据提取
//     dataSource?.map((source: any, sourceIndex: number) => {
//       let _id = this.uuid();
//       let mainList: any = {};
//       Object.keys(source).map(sourceKey => {
//         if (sourceKey.toLowerCase() === detailTableField?.toLowerCase()) {
//           SonList[_id] = source[sourceKey]
//           _SonList = _SonList.concat(source[sourceKey])
//         } else {
//           mainList[sourceKey] = source[sourceKey];
//         }
//       })
//       mainList.id = _id;
//       mainList.visible = false;
//       MainList.push(mainList)
//     })

//     pageData = MainList;

//     let surface_btn_length = this.CounteBtnLabelWidth(surface_btn?.buttons ? surface_btn?.buttons : [], pageData, surface_btn?.num > surface_btn?.buttons?.length ? surface_btn?.buttons?.length : surface_btn?.num);

//     let child_btn_length = this.CounteBtnLabelWidth(child_btn?.buttons ? child_btn?.buttons : [], _SonList, child_btn?.num > child_btn?.buttons?.length ? child_btn?.buttons?.length : child_btn?.num);

//     if (surface_btn_length?.labelLength > child_btn_length?.labelLength) {
//       btn_length_max = surface_btn_length?.btn_width_lenth
//     } else if (surface_btn_length?.labelLength === child_btn_length?.labelLength) {
//       btn_length_max = surface_btn_length?.count >= child_btn_length?.count ? surface_btn_length?.btn_width_lenth : child_btn_length?.btn_width_lenth
//     } else {
//       btn_length_max = child_btn_length?.btn_width_lenth
//     }

//     /*
//       初始化：
//       1. 计算主表和子表中的列分组中要隐藏的列，标记主表和子表中的group，对比确认每个列的的高度
//       2. 计算主表/子表行中的buttons的个数最大值/btn_length_max，标记surfae(child).num,标记surfae(child).buttons.length
//       3. 确认操作栏的宽度，其中宽度优先级如下
//         3.1 先计算出hiddenOn表达式未被隐藏的buttons，得出每行相比较的最大值btn_length_max
//         3.2 再标记num，比较num与btn_length_max
//         3.3 btn_length_max !=0时：num ? (btn_length_max <= num ? btn_length_max : num) : btn_length_max
//         3.4 btn_length_max == 0时：height = 0 + 60
//     */


//     // 处理子表没有操作列的情况
//     if ((!child_btn || child_btn?.buttons?.length <= 0) && (surface_btn?.buttons && surface_btn?.buttons?.length > 0)) {
//       copy_columns.push({
//         name: "operation",
//         label: "操作",
//         fixed: "right",
//         buttons: [],
//         width: btn_length_max
//       })
//       surfaceWidth += btn_length_max;
//     } else if ((child_btn && child_btn?.buttons?.length > 0)) {
//       copy_columns[copy_columns.length - 1].width = btn_length_max;
//       surfaceWidth += btn_length_max;
//     }

//     // checkbox属性存在添加选择框
//     if (checkbox) {
//       surfaceWidth += 50;
//       copy_columns.unshift({
//         name: "checkbox",
//         fixed: 'left',
//         width: 50,
//         leftWidth: 0,
//         align: 'center'
//       });
//     }

//     /*
//       1. 主表列和从表列总宽度均大于wrapper
//         如果不存在列宽的列数量为0，则不需要再额外配置列宽
//         否则需要给不存在列宽的列添加默认列宽
//         主表列 > 从表列 : 需要在主表列总宽度的基础上为从表列计算列宽
//         主表列 < 从表列 : 维持不变即可
//       2. 主表列和从表列已知总宽均小于wrapper
//         从表列以wrapper为基础
//     */

//     let childWidth = this.CounterChildWidth(copy_columns);

//     let equalVal: number = 0;

//     let summaryVal: number = 0;

//     if (childWidth > wrapper || surfaceWidth > wrapper) {
//       if (!empty_col) {
//         equalVal = 80;
//       }
//       if (empty_col && surfaceWidth > childWidth) {
//         equalVal = (surfaceWidth - childWidth) / (copy_columns?.length - 2)
//       }
//     } else {
//       let targetWidth = surfaceWidth > childWidth ? surfaceWidth : childWidth;
//       summaryVal = wrapper - targetWidth;
//       if (empty_col) {
//         equalVal = (wrapper - childWidth) / (copy_columns?.length - 2)
//       } else {
//         equalVal = (wrapper - childWidth) > is_not_exist?.length * 80 ? (wrapper - childWidth) / is_not_exist?.length : 80;
//       }
//     }


//     /*
//       1. 主表列和从表列总宽度均大于wrapper
//         主表列 > 从表列 : 需要在主表列总宽度的基础上为从表列计算列宽
//         主表列 < 从表列 : 维持不变即可
//       2. 主表列和从表列已知总宽均小于wrapper
//         从表列以wrapper为基础
//     */

//     // 计算固定列的left
//     copy_columns.forEach((column: any, index: number) => {

//       if (empty_col && (column?.name !== "checkbox" && column?.type !== "operation")) {
//         column.width = (column.width ?? 0) + equalVal
//       }

//       if (!column?.width && !empty_col) {
//         column.width = equalVal
//       }

//       tagIndex[tag] = column;

//       if (index === 0) {
//         column.leftWidth = 0;
//       }

//       if (index >= 1) {
//         tagIndex[tag]['leftWidth'] = fixTag[tag - 1].leftWidth + fixTag[tag - 1]?.width;
//       }

//       tag++;
//       fixTag = { ...fixTag, ...tagIndex }
//     });


//     if (checkbox) {
//       fixTag[0].label = <Checkbox />;
//     }

//     fixTag.length = tag;
//     fixTag = Array.from(fixTag);

//     // 计算固定列的right
//     copy_columns.reverse().forEach((column: any, index: number, arr: any[]) => {
//       if (index === 0) {
//         fixTag[arr.length - 1].rightWidth = 0;
//       }

//       if (index >= 1) {
//         fixTag[tag - (index + 1)]['rightWidth'] = fixTag[tag - index].rightWidth + fixTag[tag - index]?.width;
//       }
//     })

//     if (data.hasOwnProperty('total')) {
//       totalSize = data?.total;
//     }

//     pageData.forEach((source: any) => {
//       if (keepItemSelectionOnPageChange && !this.state.storageSource.hasOwnProperty(source[(primaryField ? primaryField : 'id')])) {
//         storageSource[source[(primaryField ? primaryField : 'id')]] = source
//       } else if (!keepItemSelectionOnPageChange) {
//         storageSource[source[(primaryField ? primaryField : 'id')]] = source
//       }
//       if (!this.state.selectList.hasOwnProperty(source[(primaryField ? primaryField : 'id')])) {
//         temp_select[source[(primaryField ? primaryField : 'id')]] = false;
//         pageSelectList[source[(primaryField ? primaryField : 'id')]] = false;
//       } else {
//         pageSelectList[source[(primaryField ? primaryField : 'id')]] = this.state.selectList[source[(primaryField ? primaryField : 'id')]];
//       }
//       colHideList[source[(primaryField ? primaryField : 'id')]] = false

//     });

//     checkAll = Object.values(pageSelectList).every((item: any) => {
//       if (item === false) {
//         return false
//       }
//       return true
//     });

//     list_columns.forEach((_column: any) => {
//       if (!_column?.width && !_column?.hasOwnProperty('buttons')) {
//         surface_not_exist_column.push({
//           name: _column.name,
//         })
//       }

//       // if (_column?.width) {
//       //   summaryVal -= _column?.width
//       // }
//     })



//     this.props?.setTotalNum && this.props?.setTotalNum(this.props.totalTab?.key!, data?.total, this.props.name)

//     console.time('lionTable')

//     this.setState({
//       fixColumns: fixTag,
//       selectList: keepItemSelectionOnPageChange ? { ...this.state.selectList, ...temp_select } : pageSelectList,
//       pageData,
//       totalSize,
//       SonList,
//       loading: false,
//       checkAll: checkAll,
//       _SonList: _SonList,
//       wrapper: wrapper,
//       storageSource: keepItemSelectionOnPageChange ? { ...this.state.storageSource, ...storageSource } : storageSource,
//       pageSelectList: pageSelectList,
//       colHideList: colHideList,
//       surfaceItemWidth: summaryVal / surface_not_exist_column?.length
//     });

//     console.timeEnd('lionTable')

//   }

//   // 表格滚动条拖动时给固定的列添加或删除阴影效果
//   handleScroll = (target: any, e: any) => {

//     const { scrollLeft, scrollTop } = target;

//     this.initScrollShadow(target)
//     const fixBodyers: any = target.parentElement.parentElement.getElementsByClassName('lion-table-container-fixed-body');


//     const tableHeaders: any = target.parentElement.parentElement.getElementsByClassName('lion-table-header');

//     for (let i = 0; i < fixBodyers.length; i++) {
//       fixBodyers[i].scrollTop = scrollTop
//     }

//     if (tableHeaders.length > 0) {
//       tableHeaders[0].scrollLeft = scrollLeft;
//     }
//   };

//   showTotal = () => {
//     const { page, pageSize, totalSize } = this.state;
//     const _page = totalSize === 0 ? 0 : page;
//     const total = totalSize;
//     const currentTotal = total === 0 ? 0 : Math.ceil(total / pageSize);

//     return `${_page}/${currentTotal} 总共：${totalSize} 项`;
//   }

//   // 点击展开或收起操作
//   handleOpenCol = (source: any, SonList: any) => {
//     const { primaryField } = this.props;
//     const { colHideList } = this.state;
//     // const index = pageData.findIndex(item => {
//     //   return item === source
//     // })
//     // let open_source = pageData.find(item => {
//     //   return item === source
//     // })

//     // open_source.visible = !open_source.visible;
//     // pageData.splice(index, 1, open_source as never);




//     this.setState({
//       colHideList: {
//         ...colHideList,
//         [source[primaryField!]]: !colHideList[source[primaryField!]]
//       },
//     })

//   }

//   // 查看全部
//   handleViewAll = (surface: any) => {
//     const { subSchemaApi, env, store } = this.props;
//     env?.fetcher(subSchemaApi!, surface).then((res: any) => {

//     })
//   }

//   handleAddClass = (arr: any, tabIndex: number) => {
//     Array.from(arr).forEach((_node: any) => {
//       if (_node?.attributes.tabindex.nodeValue === tabIndex) {
//         _node.className += ' tr--hover'
//       }
//     })
//   }

//   handleTrMouseOver = (e: any) => {
//     if (e.currentTarget.className.indexOf('tr--hover') !== -1) {
//       return;
//     }
//     const _body: any = findDOMNode(this)
//     const bodyTable: any = _body.querySelector('.lion-table-body');
//     // 左侧固定表格
//     const fixLeftTable: any = _body.querySelector('.lion-table-container-fixed-wrapper--left');
//     // 右侧固定表格
//     const fixRightTable: any = _body.querySelector('.lion-table-container-fixed-wrapper--right');

//     const bodyTr = bodyTable.getElementsByClassName('tbody-tr--column--white');
//     const fixLeftTr = fixLeftTable.getElementsByClassName('tbody-tr--column--white');
//     const fixRightTr = fixRightTable.getElementsByClassName('tbody-tr--column--white');
//     this.handleAddClass(bodyTr, e.currentTarget.attributes.tabindex.nodeValue)
//     this.handleAddClass(fixLeftTr, e.currentTarget.attributes.tabindex.nodeValue)
//     this.handleAddClass(fixRightTr, e.currentTarget.attributes.tabindex.nodeValue)
//   }

//   handleTrMouseOut = (e: any) => {

//     const _body: any = findDOMNode(this);

//     const bodyTable: any = _body?.querySelector('.lion-table-body') as any;
//     // 左侧固定表格
//     const fixLeftTable: any = _body?.querySelector('.lion-table-container-fixed-wrapper--left');
//     // 右侧固定表格
//     const fixRightTable: any = _body?.querySelector('.lion-table-container-fixed-wrapper--right');

//     const bodyTr = bodyTable.getElementsByClassName('tbody-tr--column--white');
//     const fixLeftTr = fixLeftTable.getElementsByClassName('tbody-tr--column--white');
//     const fixRightTr = fixRightTable.getElementsByClassName('tbody-tr--column--white');

//     this.handleRemoveClass(bodyTr)
//     this.handleRemoveClass(fixLeftTr)
//     this.handleRemoveClass(fixRightTr)
//   }

//   handleRemoveClass = (arr: any) => {
//     Array.from(arr).forEach((_node: any) => {
//       _node.className = _node.className.replace('tr--hover', '')
//     })
//   }

//   handlePageSizeChange = (page: number, pageSize: number) => {

//     if (this._uploadRef) {
//       this._uploadRef?.handleBulkChange({ perPage: pageSize, page: page });
//     }

//     this.setState({
//       page,
//       pageSize,
//       checkAll: false,
//       pageSelectList: {}
//     }, () => {
//       this.requestFilterSource(this._uploadRef ? this._uploadRef?.props?.data : { perPage: pageSize, page: page });
//     })
//   }

//   MonitorPageChanges = (e: any) => {
//     // let clientWidth = window.document.documentElement.clientWidth || window.document.body.clientWidth;
//     const { isDialogMode, columns, checkbox } = this.props;
//     let wrapper = calcInnerWidth();
//     if (isDialogMode) {
//       let thisParent = findDOMNode(this)?.parentElement;
//       wrapper = (thisParent?.clientWidth! > 500 ? thisParent?.clientWidth! : 500)
//     }
//     const _columns: any = this.state.fixColumns;

//     const _wrapper: number = Math.ceil(wrapper);

//     let tagIndex: any = {};

//     let tag: number = 0;

//     let fixTag: any = {};

//     let childWidth = this.CounterChildWidth(_columns);

//     let surfaceWidth = this.surfaceWidth + (checkbox ? 50 : 0) + (_columns[_columns?.length - 1]?.type === "operation" ? _columns[_columns?.length - 1]?.width : 0)

//     let equalVal: number = 0;

//     if (childWidth <= wrapper && surfaceWidth <= wrapper) {
//       let targetWidth = surfaceWidth > childWidth ? surfaceWidth : childWidth;
//       equalVal = (_wrapper - targetWidth) / (_columns?.length - 2)
//     }

//     if (_wrapper > 1680) {
//       _columns.forEach((_column: any, index: number, _columnsArr: any[]) => {

//         tagIndex[tag] = _column;

//         if (index === 0) {
//           _column.leftWidth = 0;
//         }

//         if (index >= 1) {
//           tagIndex[tag]['leftWidth'] = fixTag[tag - 1].leftWidth + fixTag[tag - 1]?.width;
//         }

//         if (index >= 1 && _column?.name !== "checkbox" && _column?.type !== "operation") {
//           tagIndex[tag]['width'] = tagIndex[tag]['width'] + equalVal;
//         }

//         tag++;
//         fixTag = { ...fixTag, ...tagIndex }
//       })

//       fixTag.length = tag;
//       fixTag = Array.from(fixTag)

//       // 计算固定列的right
//       _columns.reverse().forEach((column: any, index: number, arr: any[]) => {
//         if (index === 0) {
//           fixTag[arr.length - 1].rightWidth = 0;
//         }

//         if (index >= 1) {
//           fixTag[tag - (index + 1)]['rightWidth'] = fixTag[tag - index].rightWidth + fixTag[tag - index]?.width;
//         }
//       })

//       this.setState({
//         wrapper: _wrapper,
//         fixColumns: fixTag
//       }, () => {
//         this.initScrollShadow()
//       })
//     }
//   }

//   MonitorTableChanges = (e?: any) => {

//     let isTab = this.props.totalTab;
//     let _dis = 10;
//     if (this.props.filter) _dis += 50
//     if ((this.props.headerToolbar?.length > 0 || this.props?.bulkActions?.length > 0)) _dis += 30
//     if (isTab) _dis += 32;
//     if (this.props.keepItemSelectionOnPageChange) _dis += 35
//     let _page_height: any = calcGap();
//     let table_height = _page_height - 10 - 46 - 40 - _dis;

//     // if (table_height === this.state.table_height) {
//     //   return
//     // }

//     this.setState({
//       _container_height: _page_height,
//       table_height: table_height
//     })
//   }

//   handleFilterParams = (value: any) => {
//     const { page, pageSize } = this.state;
//     this._uploadRef?.handleBulkChange({ perPage: pageSize, page: page });
//     const filterParams = this._uploadRef ? this._uploadRef?.props?.data : { perPage: pageSize, page: page };
//     this.requestFilterSource({ ...value, ...filterParams }, true)
//   }

//   reloadTarget = (reload: string, ctx: any, callBack?: () => void) => {
//     const scoped = this.context as IScopedContext;
//     // callBack && callBack();
//     scoped.reload(reload, ctx);
//     // 用于刷新目标组件
//   }

//   closeTarget(target: string) {
//     const scoped = this.context as IScopedContext;
//     scoped.close(target);
//   }

//   reload = (subPath: string, query: any, ctx: any): void => {
//     this.handleFilterParams(ctx)
//   }

//   receive = (value: any, subPath: any): void => {
//     this.handleFilterParams(value)
//   }

//   doAction = (query: any, ctx: any): void => {
//     this.handleFilterParams(ctx)
//   }



//   handleAction = async (
//     e: React.UIEvent<any> | void,
//     action: Action,
//     ctx: any,
//     callBack?: () => void,
//     throwErrors: boolean = false,
//     delegate?: IScopedContext
//   ): Promise<any> => {
//     const { env, store, messages, onAction } = this.props;
//     if (action.actionType === 'ajax') {
//       store.setCurrentAction(action);
//       const res = await store
//         .lionSaveRemote(action.api as string, { ...store.data, ...ctx }, {
//           successMessage:
//             (action.messages && action.messages.success) ||
//             (messages && messages.saveSuccess),
//           errorMessage:
//             (action.messages && action.messages.failed) ||
//             (messages && messages.saveSuccess)
//         }).then(response => {
//           const data = createObject(ctx, response ? response : null);
//           // if ((data as any)?.status === 10003) {
//           //   // onAction?.(e, action, { ...store.data, ...ctx }, throwErrors, delegate || this.context);
//           //   handleActionCallback_10003(data, store, this.handleAction, () => { action.close && this.closeTarget(action.close) }, false, env)
//           //   return false
//           // }


//           const redirect =
//             action.redirect && filter(action.redirect, store.data);
//           redirect && env.jumpTo(redirect, action);
//           action.reload && this.reloadTarget(action.reload, { ...store.data, ...ctx });
//           return false
//         }).catch((error) => { console.info(error) })
//       return res
//     } else if (action.actionType === 'export') {
//       store.setCurrentAction(action);
//       let exportData: any = action?.exportType === 2 ? ctx : {};

//       exportData = { ...exportData, ...this?._uploadRef?.props?.store?.data };

//       exportData.primaryField = this.props.primaryField;
//       exportData.selectedItems = this.checkList;
//       exportData.ids = (action?.exportType && action?.exportType === 2 ? ctx[this.props.primaryField!] : this.ids);
//       store.openLionExport(exportData, env)
//       return false
//     } else if (action.actionType === 'loginAmazon') {
//       store.setCurrentAction(action);
//       store.openAmazonLoginPage(ctx, env)
//       return false
//     } else if (action.actionType === 'label-print') {
//       // Jay
//       store.setCurrentAction(action);
//       const { primaryField } = this.props
//       const { translate: __ } = this.props
//       const LODOP = getLodop()
//       if (LODOP) {
//         this.setState({
//           ModalProps: {
//             ...action,
//             title: __('CRUD.printOptions'),
//             show: true,
//             isFilePrint: false,
//             isRow: true,
//             ctx: { ...ctx, primaryField },
//             onHide: () => { this.setState({ modalLabelPrintOpen: false }) },
//           }
//         })
//         this.setState({ modalLabelPrintOpen: true })
//       }
//     }
//     else {
//       onAction?.(e, action, { ...store.data, ...ctx }, throwErrors, delegate || this.context);
//       return false
//     }
//   }

//   // 没有数据时加载占位器
//   renderEmptyData = () => {
//     const { width, translate: __, filter } = this.props;
//     const { hasFetch } = this.state
//     return <div
//       className="lion-table-empty"
//       style={{
//         width: width ? width : '100%',
//       }}
//     >
//       <div>
//         <div className="lion-table-empty-body">
//           <div className="lion-table-empty-container">
//             <div>
//               {/* 测试用图片 */}
//               {/* <img alt='' src='https://erp.gerpgo.com/img/empty.891aa2e8.png' /> */}
//               <img alt='' src='./public/images/nodata.png' />
//               {!hasFetch && filter ?
//                 <div className='empty-placeholder'>{__('placeholder.trySearch')}</div> :
//                 <div className='empty-placeholder'>{__('placeholder.noData')}</div>}
//             </div>
//           </div>
//         </div>
//       </div>

//     </div>
//   }

//   /**
//     * Jay
//     * 标签、文件打印
//     */
//   renderPrint(ctx: { items: any[], selectedItems: any[], ids: string, primaryField: string, }, schema?: any, isFilePrint?: boolean) {
//     const {
//       translate: __,
//       classnames: nx
//     } = this.props;
//     const { selectedItems } = ctx
//     const disabled = schema.disabled || evalExpression(schema.disabledOn, ctx)

//     return (
//       <>
//         <Button
//           type="primary"
//           className={nx(schema._className, { 'is-disabled': disabled })}
//           disabled={disabled}
//           onClick={() => {
//             const LODOP = getLodop()
//             if (LODOP) {
//               this.setState({
//                 ModalProps: {
//                   ...schema,
//                   title: __('CRUD.printOptions'),
//                   show: true,
//                   isFilePrint,
//                   ctx,
//                   onHide: () => { isFilePrint ? this.setState({ modalFilePrintOpen: false }) : this.setState({ modalLabelPrintOpen: false }) },
//                   query: this._uploadRef?.props?.store?.data
//                 }
//               })

//               isFilePrint ? this.setState({ modalFilePrintOpen: true }) :
//                 this.setState({ modalLabelPrintOpen: true })
//             }
//           }}
//         >
//           {__(schema.label ? schema.label : !isFilePrint ? 'CRUD.labelPrint' : 'CRUD.filePrint')}
//         </Button>
//       </>
//     );
//   }

//   // 渲染头部按钮及批量按钮
//   renderToolBars = (toolBars: any, type: string) => {
//     const _className = type === 'header' ? 'blukAction' : (this.checkList?.length > 0 ? "blukAction" : "blukAction is-disabled");
//     const _disabled = type === 'header' ? false : (this.checkList?.length > 0 ? false : true);

//     const toolBarList: any = [];

//     toolBars && toolBars?.length > 0 && toolBars?.forEach((_toolBar: any, _toolIndex: number) => {
//       let _data: any = {};

//       _data.selectedItems = this.checkList;
//       _data.ids = this.ids;
//       _data.items = this.dataSource;
//       _data.record_ids = this.record_ids;

//       if (_toolBar.type === 'label-print') {
//         toolBarList.push(this.renderPrint(_data, { ..._toolBar, _className }));
//       } else if (_toolBar.type === 'file-print') {
//         toolBarList.push(this.renderPrint(_data, { ..._toolBar, _className }, true));
//       } else {
//         toolBarList.push(renderAmis(_toolBar, {
//           className: _className,
//           key: _toolIndex,
//           disabled: _disabled,
//           data: _data,
//           onAction: this.handleAction
//         }))
//       }

//     })

//     return toolBarList?.length === 0 ? null : toolBarList
//   }


//   // 表格头部工具栏渲染
//   renderHeaderToolbars = (): JSX.Element => {
//     const { headerToolbar, bulkActions } = this.props;

//     return <WrapperLionTableHeaderToolBar className="lion-table-header-toolbar">
//       <div className="lion-nav-operate-group">
//         {this.renderToolBars(headerToolbar, 'header')}
//         {this.renderToolBars(bulkActions, 'bulk')}
//       </div>
//       <div className="lion-nav-tool-group">
//       </div>
//     </WrapperLionTableHeaderToolBar>
//   }

//   // 表格查询器加载
//   renderFilter = (): JSX.Element | null => {
//     const { filter } = this.props;
//     const that = this;

//     return filter ? <WrapperLionTableFilter className="lion-table-filter">
//       <div className="filter-group">
//         <div className="filter-container">
//           <div className="filterItem">
//             {
//               filter ? renderAmis(filter, {
//                 "_bindRef": (_this: any) => {
//                   that._bindRef(_this)
//                 },
//                 className: 'lion-filter',
//               }) : null
//             }
//           </div>
//         </div>
//       </div>
//     </WrapperLionTableFilter> : null
//   }

//   // 展开与收起行渲染
//   renderVisibleTr = (source: any, fixed?: string) => {
//     const { fixColumns, SonList, colHideList } = this.state;

//     const { render, subTableTitle, subSchemaApi, primaryField } = this.props;

//     const fixedLeftClass = fixed ? (fixed === 'left' ? ("lion-cell--fix--" + fixed) : 'fix--hidden') : '';

//     const fixedRighttClass = fixed ? (fixed === 'right' ? ("lion-cell--fix--" + fixed) : 'fix--hidden') : '';

//     return subSchemaApi || (SonList.hasOwnProperty(source.id) && SonList[source.id].length > 4) ?
//       <tr className='tbody-tr--column--common lion-tr--column--hide'>
//         <td
//           className={this.classNames('tbody-td--column', 'tbody-td--column--hide', 'tbody-td--column--hide--checkbox', fixedLeftClass)}
//         >
//         </td>
//         <td
//           style={{ padding: '0px !important' }}
//           className={'tbody-td--column--hide'}
//           colSpan={(Object.keys(fixColumns).length - 2)}
//         >
//           {
//             fixed ? null : <div className="td--column--hide--cell">
//               <div className="td--column--hide--cell--container">
//                 <div>
//                   <span
//                     className="hide--cell--operation"
//                     onClick={(e) => {
//                       subSchemaApi ? null : this.handleOpenCol(source, SonList[source.id])
//                       // this.handleViewAll(source)
//                     }}>
//                     {
//                       subSchemaApi ? render('点击查看全部数据', {
//                         "actionType": "dialog",
//                         "type": "action",
//                         "level": "primary",
//                         "name": "click_cat_all_data",
//                         "className": "hide--cell--operation hide--cell--action",
//                         "label": "点击查看全部数据",
//                         "close": false,
//                         "dialog": {
//                           "title": subTableTitle,
//                           "type": "dialog",
//                           "body": {
//                             "schemaApi": subSchemaApi,
//                             "data": source,
//                             "type": "service"
//                           },
//                           "size": "lg",
//                           "bodyClassName": "overflow-y-auto max-h-nestSide-dialog",
//                           "className": "h-full",
//                           "actions": []
//                         }
//                       }) : (SonList[source.id].length > 4 ? (!colHideList[source[primaryField!]] ? '共计' + SonList[source.id].length + '条数据，展开查看全部>>' : '点击收起') : null)
//                     }
//                     {/* {SonList[source.id].length > 2 && !source.visible ? '共计' + SonList[source.id].length + '条数据，展开查看全部>>' : '点击收起'} */}
//                   </span>
//                 </div>
//               </div>
//             </div>
//           }

//         </td>
//         <td
//           className={this.classNames('tbody-td--column', 'thead-th--column', fixedRighttClass)}
//           style={{
//             backgroundColor: 'inherit'
//           }}
//         >
//         </td>
//       </tr> : null
//   }

//   renderSurfaceTr = (source: any) => {
//     const { fixColumns, surfaceItemWidth } = this.state;
//     const { list_columns, checkbox, primaryField } = this.props;

//     const _btn_cols = list_columns.find((_column: any) => {
//       return _column?.buttons
//     })
//     return <tr onClick={(e) => { this.handleMasterChange(e, source[primaryField!]) }} className='tbody-tr--column--common tbody-tr--column--gray'>

//       {/* 主表行单选框渲染逻辑 */}
//       {
//         checkbox ? <td className='tbody-td--column tbody-td--column--surface--checkbox'
//         >
//         </td> : null
//       }

//       {/* 主表行渲染 */}
//       <td
//         className='tbody-td--column thead-th--column tbody-td--column--surface--mainarea'
//         style={{
//           [checkbox ? '' : 'left']: 0
//         }}
//         // colSpan={Object.keys(fixColumns).length}
//         colSpan={(_btn_cols && _btn_cols?.buttons?.length > 0) ? (Object.keys(fixColumns).length - 2) : Object.keys(fixColumns).length}
//       >
//         <div style={{ display: 'flex' }}>
//           {/* 主表列分组渲染 */}

//           {
//             list_columns.map((_surface: any, _surfaceIndex: number) => {
//               if (_surface?.buttons) return null
//               return <WrapperCommonSurfaceGroup
//                 key={_surfaceIndex}
//                 style={{
//                   // width: _surface?.buttons ? (_surface?.width > btn_width ? _surface?.width : btn_width) : (_surface?.width ? _surface?.width : '200px'),
//                   width: _surface?.width ? _surface?.width : surfaceItemWidth,
//                   paddingLeft: _surfaceIndex === 0 ? '5px' : '',
//                   marginRight: _surface?.buttons ? 0 : '15px'
//                 }}>
//                 <div className="surface-group-container" style={{
//                   flexDirection: _surface?.group && _surface?.group?.length > 1 ? 'column' : 'row',
//                   justifyContent: _surface?.group && _surface?.group?.length > 1 ? 'center' : 'normal',
//                   alignItems: _surface?.group && _surface?.group?.length > 1 ? 'normal' : 'center'
//                 }}>
//                   {
//                     _surface?.group && _surface?.group?.length > 0 ? _surface?.group.map((_group: any, _groupIndex: number) => {
//                       let temp_element;
//                       let hide = _group?.hiddenOn ? evalExpression(_group?.hiddenOn, { ...source }) : false;
//                       if (hide) {
//                         return null
//                       }
//                       if (_group?.type) {
//                         temp_element = renderAmis({
//                           type: _group?.type,
//                           name: _group?.name,
//                           body: _group?.body
//                         }, {
//                           data: source
//                         })
//                       }
//                       return <span
//                         key={_groupIndex}
//                         className="surface-group-item"
//                       >
//                         {

//                           _group?.hideLabel ? (
//                             _group.type ? temp_element : source[_group?.name]
//                           ) : <><span
//                             className="surface-group-item--label"
//                           >
//                             {_group.label}：
//                           </span>{_group.type ? temp_element : source[_group?.name]}</>
//                         }
//                       </span>
//                     }) : [''].map((_) => {
//                       let temp_element;
//                       let hide = _surface?.hiddenOn ? evalExpression(_surface?.hiddenOn, { ...source }) : false;
//                       if (hide) {
//                         return null
//                       }
//                       if (_surface.type) {
//                         temp_element = renderAmis({
//                           type: _surface.type,
//                           name: _surface.name,
//                           body: _surface?.body
//                         }, {
//                           data: source
//                         });
//                       }
//                       return <span
//                         key={_}
//                         className="surface-group-item"
//                       >
//                         {_surface?.hideLabel ? (_surface.type ? temp_element : source[_surface?.name]) : <><span
//                           className="surface-group-item--label"
//                         >
//                           {_surface.label}：
//                         </span>{_surface.type ? temp_element : source[_surface?.name]}</>}
//                       </span>
//                     })
//                   }
//                 </div>
//               </WrapperCommonSurfaceGroup>
//             })
//           }
//         </div>

//       </td>
//       <td
//         className='tbody-td--column thead-th--column tbody-td--opreation'
//       >
//         <div className="tbody-td--column--surface--hide">
//         </div>
//       </td>
//     </tr>
//   }

//   // 单元格数据渲染逻辑
//   renderChildTds = (columns: any, record: any) => {

//     return columns.map((column: any, index: number, _column: any[]) => {
//       const align = column.align || undefined;

//       const fixedClassName = column.hasOwnProperty('fixed') ? "fix--hidden" : '';

//       const fixedTarget = column.hasOwnProperty('fixed');
//       // 根据固定位置添加样式

//       const className = this.classNames('tbody-td--column', column.className);
//       const _child_group = column?.group ? column?.group : [];

//       let value: any = undefined;

//       if (column.render) {
//         value = column.render(column, record, index);
//       } else if (column.buttons) {
//         let _child_btn_num = column?.num ? column?.num : column.buttons?.length;

//         let _child_btn_element = column.buttons.filter((button_item: any, button_idx: number) => {

//           return button_item?.type && !evalExpression(button_item?.hiddenOn, record)

//           // if (button_item?.type && !evalExpression(button_item?.hiddenOn, record)) {
//           //   return renderAmis({
//           //     ...button_item
//           //   }, {
//           //     data: record,
//           //     ids: record[this.props.primaryField!],
//           //     primaryField: this.props.primaryField,
//           //     onAction: this.handleAction,
//           //     [button_idx >= _child_btn_num ? 'className' : '']: 'lion-td-btn'
//           //   })
//           // }
//           // // else {
//           // //   return <button className="lion-td-btn">
//           // //     {button_item}
//           // //   </button>
//           // // }
//         }).map((button_item: any, button_idx: number) => {
//           return renderAmis({
//             ...button_item,
//             type: button_item.type !== 'label-print' ? button_item.type : 'button'
//           }, {
//             data: record,
//             ids: record[this.props.primaryField!],
//             primaryField: this.props.primaryField,
//             onAction: this.handleAction,
//             [button_idx >= _child_btn_num ? 'className' : '']: 'lion-td-btn'
//           })
//         })

//         value = <>
//           {
//             _child_btn_element.slice(0, _child_btn_num)
//           }
//           {_child_btn_element?.length > _child_btn_num ? <Popover
//             placement='bottomRight'
//             arrowPointAtCenter
//             getPopupContainer={this.props.env?.getModalContainer}
//             trigger="click"
//             content={() => {
//               return <WrapperBtnPopover className="lion-export-popover">
//                 <div className="lion-export-popover-container">
//                   <div className="lion-export-popover-hide">
//                     <ul style={{ [_child_btn_element.slice(_child_btn_num)?.length <= 1 ? 'padding' : '']: 0 }}>
//                       {
//                         _child_btn_element.slice(_child_btn_num).map((item: any, idx: number) => {
//                           return <div key={idx} data-index={idx} >{item}</div>
//                         })
//                       }
//                     </ul>
//                   </div>
//                 </div>
//               </WrapperBtnPopover>
//             }}
//             overlayStyle={{
//               paddingTop: 0
//             }}
//             overlayInnerStyle={{
//               padding: 0
//             }}
//             overlayClassName="lion-table-cell-btn"
//           >
//             <Button icon={<span className="fa fa-ellipsis-h"></span>} type="link" style={{
//               display: "inline-block",
//               cursor: "pointer",
//               padding: 0,
//               height: 'auto',
//               letterSpacing: "2px",
//               fontWeight: 800,
//               transform: "rotate(90deg)",
//               color: '#1890ff',
//               border: 0
//             }}></Button>
//           </Popover> : null}
//         </>

//       } else if (column?.group?.length > 0) {
//         value = [];
//         column?.group?.forEach((_child: any) => {

//           if (_child?.hiddenOn && evalExpression(_child?.hiddenOn, { ...record })) {
//             return;
//           }

//           let _value = record[_child?.name];

//           if (_child?.type) {
//             _value = renderAmis({
//               type: _child.type,
//               name: _child.name,
//               body: _child?.body
//             }, {
//               data: {
//                 [_child.name]: record[_child?.name]
//               }
//             })
//           }

//           value.push({
//             label: _child.label,
//             name: _child.name,
//             value: _value,
//             hideLabel: _child.hideLabel
//           })
//         })
//       } else if (column.name === "checkbox") {
//         value = ''
//       } else if (column?.type) {
//         value = (column?.hiddenOn && evalExpression(column?.hiddenOn, { ...record })) ? '-' :
//           renderAmis({
//             type: column.type,
//             name: column.name,
//             body: column?.body
//           }, {
//             data: {
//               [column.name]: record[column?.name]
//             }
//           })

//       } else {
//         value = column.name === 'checkbox' ? '' : (column.name && column.name in record ? (
//           column?.hiddenOn && evalExpression(column?.hiddenOn, { ...record }) ? '-' : record[column.name]
//         ) : '-')
//       }

//       /* 渲染优先级
//           1. column.render：根据自定义的render方法来渲染出value
//           2. column.buttons：根据列按钮来渲染
//           3. column.group：根据列分组来渲染
//           4. column：根据存在的name字段来渲染
//       */

//       return <td
//         key={index}
//         className={className}
//         style={{
//           textAlign: align,
//           height: 50,
//           // height: this.getSurfaceLength(this.state._SonList, this.props.columns) > 2 ? this.state.ChildTrHeight : 50,
//           width: column?.width ? column?.width : 50,
//           backgroundColor: 'inherit',
//           // boxShadow: index === 0 ? (that.state.fixLeft === 0 ? '' : '4px 3px 4px 0 rgb(0 0 0 / 12%)') : ''
//         }}
//       >

//         <div style={{ width: column?.width ? column?.width : 50, fontSize: '12px' }} className='tbody-td--column--cell'>
//           <span style={{ width: column?.width ? column?.width : 50 }}>
//             {
//               column?.fixed ? null :
//                 // column.render
//                 (column?.render
//                   ?
//                   <div style={{ display: 'flex' }}>
//                     {column?.hideLabel ? null : <span style={{ color: '#999' }}>{column?.label}：</span>}
//                     <span>{value}</span>
//                   </div>
//                   :
//                   (
//                     // column.buttons
//                     column?.buttons && column?.buttons?.length > 0 ? value : (
//                       // column.group
//                       column?.group && column?.group?.length > 0 ? value?.map((_item: any, _groupIdx: number) => {
//                         return <div key={_groupIdx} style={{ display: 'flex' }}>
//                           {_item?.hideLabel ? null : <span style={{ color: '#999' }}>{_item?.label}：</span>}
//                           <span>{_item?.value}</span>
//                         </div>
//                       }) : value
//                     )
//                   ))
//             }
//           </span>
//         </div>
//       </td>
//     })
//   }

//   renderFixChildTds = (columns: any, record: any, fixed: string) => {

//     return columns.map((column: any, index: number, _column: any[]) => {
//       const align = column.align || undefined;

//       let fixedClassName = "fix--hidden";
//       const fixTarget = column.hasOwnProperty('fixed') ? column?.fixed : '';
//       // 根据固定位置添加样式

//       if (fixed === fixTarget) {
//         fixedClassName = ('lion-cell--fix--' + fixTarget)
//       }

//       const className = this.classNames('tbody-td--column', column.className, fixedClassName);
//       const _child_group = column?.group ? column?.group : [];

//       let value: any = undefined;

//       if (column.render) {
//         value = column.render(column, record, index);
//       } else if (column.buttons) {
//         let _child_btn_num = column?.num ? column?.num : column.buttons?.length;

//         let _child_btn_element = column.buttons.map((button_item: any, button_idx: number) => {

//           if (button_item?.type) {
//             return renderAmis({
//               ...button_item,
//               type: button_item.type !== 'label-print' ? button_item.type : 'button'
//             }, {
//               data: record,
//               ids: record[this.props.primaryField!],
//               primaryField: this.props.primaryField,
//               onAction: this.handleAction,
//               [button_idx >= _child_btn_num ? 'className' : '']: 'lion-td-btn'
//             }, {
//               fetcher: this.props.env?.fetcher as any,
//               session: this.props.env?.session
//             })
//           } else {
//             return <button className="lion-td-btn">
//               {button_item}
//             </button>
//           }
//         })

//         value = <>
//           {
//             _child_btn_element && _child_btn_element.slice(0, _child_btn_num)
//           }
//           {_child_btn_element?.length > _child_btn_num ? <Popover
//             placement='bottomRight'
//             arrowPointAtCenter
//             getPopupContainer={this.props.env?.getModalContainer}
//             trigger="click"
//             content={() => {
//               return <WrapperBtnPopover className="lion-export-popover">
//                 <div className="lion-export-popover-container">
//                   <div className="lion-export-popover-hide">
//                     <ul style={{ [_child_btn_element.slice(_child_btn_num)?.length <= 1 ? 'padding' : '']: 0 }}>
//                       {
//                         _child_btn_element.slice(_child_btn_num).map((item: any, idx: number) => {
//                           return <div key={idx} data-index={idx} >{item}</div>
//                         })
//                       }
//                     </ul>
//                   </div>
//                 </div>
//               </WrapperBtnPopover>
//             }}
//             overlayStyle={{
//               paddingTop: 0
//             }}
//             overlayInnerStyle={{
//               padding: 0
//             }}
//             overlayClassName="lion-table-cell-btn"
//           >
//             <Button icon={<span className="fa fa-ellipsis-h"></span>} type="link" style={{
//               display: "inline-block",
//               cursor: "pointer",
//               padding: 0,
//               height: 'auto',
//               letterSpacing: "2px",
//               fontWeight: 800,
//               transform: "rotate(90deg)",
//               color: '#1890ff',
//               border: 0
//             }}></Button>
//           </Popover> : null}
//         </>



//       } else if (column?.group?.length > 0) {
//         value = [];
//         column?.group?.forEach((_child: any) => {

//           if (_child?.hiddenOn && evalExpression(_child?.hiddenOn, { ...record })) {
//             return;
//           }

//           let _value = record[_child?.name];

//           if (_child?.type) {
//             _value = renderAmis({
//               type: _child.type,
//               name: _child.name,
//               body: _child?.body
//             }, {
//               data: {
//                 [_child.name]: record[_child?.name]
//               }
//             })
//           }
//           value.push({
//             label: _child.label,
//             name: _child.name,
//             value: _value,
//             hideLabel: _child.hideLabel
//           })
//         })

//       } else if (column.name === "checkbox") {
//         value = ''
//       } else if (column?.type) {
//         value = (column?.hiddenOn && evalExpression(column?.hiddenOn, { ...record })) ? '-' :
//           renderAmis({
//             type: column.type,
//             name: column.name,
//             body: column?.body
//           }, {
//             data: {
//               [column.name]: record[column?.name]
//             }
//           })

//       } else {
//         value = column.name === 'checkbox' ? '' : (column.name && column.name in record ? (
//           column?.hiddenOn && evalExpression(column?.hiddenOn, { ...record }) ? '-' : record[column.name]
//         ) : '-')
//       }

//       /*
//           渲染优先级
//           1. column.render：根据自定义的render方法来渲染出value
//           2. column.buttons：根据列按钮来渲染
//           3. column.group：根据列分组来渲染
//           4. column：根据存在的name字段来渲染
//       */

//       return <td
//         key={index}
//         className={className}
//         style={{
//           textAlign: align,
//           height: 50,
//           // height: this.getSurfaceLength(this.state._SonList, this.props.columns) > 2 ? this.state.ChildTrHeight : 50,
//           [fixTarget]: column[fixTarget + 'Width'],
//           width: column?.width ? column?.width : 50,
//           backgroundColor: 'inherit',
//           // boxShadow: index === 0 ? (that.state.fixLeft === 0 ? '' : '4px 3px 4px 0 rgb(0 0 0 / 12%)') : ''
//         }}
//       >

//         <div style={{ width: column?.width ? column?.width : 50, fontSize: '12px' }} className='tbody-td--column--cell'>
//           <span style={{ width: column?.width ? column?.width : 50 }}>
//             {
//               // column.render
//               column?.render
//                 ?
//                 <div style={{ display: 'flex' }}>
//                   {column?.hideLabel ? null : <span style={{ color: '#999' }}>{column?.label}：</span>}
//                   <span>{value}</span>
//                 </div>
//                 :
//                 (
//                   // column.buttons
//                   column?.buttons && column?.buttons?.length > 0 ? value : (
//                     // column.group
//                     column?.group && column?.group?.length > 0 ? value?.map((_item: any, _groupIdx: number) => {
//                       return <div key={_groupIdx} style={{ display: 'flex' }}>
//                         {_item?.hideLabel ? null : <span style={{ color: '#999' }}>{_item?.label}：</span>}
//                         <span>{_item?.value}</span>
//                       </div>
//                     }) : value
//                   )
//                 )
//             }
//           </span>
//         </div>
//       </td>
//     })
//   }

//   // 从表数据渲染
//   renderBranchTr = (source: any, fixed?: string) => {
//     const { fixColumns, SonList, colHideList } = this.state;
//     const { primaryField } = this.props;
//     const _sourceIndex = colHideList[source[primaryField!]] ? SonList[source.id].length : 4;
//     return SonList.hasOwnProperty(source.id) ? SonList[source.id].map((trCol: any, trIndex: number, trArr: any[]) => {
//       return <tr
//         className='tbody-tr--column--common tbody-tr--column--white'
//         key={trIndex}
//         onMouseOver={this.handleTrMouseOver}
//         onMouseOut={() => { }}
//         tabIndex={`${source.id}${trIndex}` as any}
//       >
//         {
//           fixed ? this.renderFixChildTds(fixColumns, trCol, fixed) : this.renderChildTds(fixColumns, trCol)
//         }
//       </tr>
//     }).slice(0, _sourceIndex) : null
//   }

//   // colgroup渲染
//   renderCols = (columns: any) => {
//     return columns.map((column: any, index: number) => {
//       return (
//         <col
//           key={index}
//           style={{ minWidth: this.props.checkbox && index === 0 ? 50 : column.width, width: this.props.checkbox && index === 0 ? 50 : column.width }}
//         />
//       );
//     });
//   }

//   // 加载表格数据区域
//   renderTable = () => {
//     const { pageData } = this.state;

//     return pageData.map((source, sourceIndex) => {

//       /**
//         * @description: 主体表格渲染逻辑
//         * @param {any} source 主表项
//         * @param {number} 主表项索引
//         * @return {JSXElement}
//       */

//       return <>
//         {this.renderSurfaceTr(source)}
//         {this.renderBranchTr(source)}
//         {this.renderVisibleTr(source)}
//       </>
//     })
//   }

//   // 渲染左固定列主表区域
//   renderFixLeftSurfaceTr = (source: any) => {
//     // 固定列左侧布局渲染
//     const { fixColumns, selectList, surfaceItemWidth } = this.state;
//     const { list_columns, checkbox, primaryField } = this.props;

//     const fixedClassName = checkbox ? 'lion-cell--fix--left' : '';

//     const _btn_cols = list_columns.find((_column: any) => {
//       return _column?.buttons
//     })
//     const btn_width = (_btn_cols?.buttons?.length + 1) * 55;
//     // 确定按钮的数量

//     return <tr onClick={(e) => { this.handleMasterChange(e, source[primaryField!]) }} className='tbody-tr--column--common tbody-tr--column--gray'>

//       {/* 主表行单选框渲染逻辑 */}
//       {
//         checkbox ? <td
//           className={this.classNames('tbody-td--column tbody-td--column--surface--checkbox', fixedClassName)}
//         >
//           {<Checkbox onClick={(e) => { }} checked={selectList[source[primaryField!]]} />}
//         </td> : null
//       }

//       {/* 主表行渲染 */}
//       <td
//         className='tbody-td--column thead-th--column'
//         style={{
//           height: 50,
//           [checkbox ? '' : 'left']: 0,
//           // height: this.getSurfaceLength(this.state.pageData, this.props.list_columns) > 2 ? MainTrHeight : 50,
//           backgroundColor: 'inherit'
//         }}
//         colSpan={(_btn_cols && _btn_cols?.buttons?.length > 0) ? (Object.keys(fixColumns).length - 2) : Object.keys(fixColumns).length}
//       // colSpan={is_exist ? (Object.keys(fixColumns).length - 2) : Object.keys(fixColumns).length}
//       >
//         <div style={{ display: 'flex' }}>
//           {/* 主表列分组渲染 */}

//           {
//             list_columns.map((_surface: any, _surfaceIndex: number) => {
//               if (_surface?.buttons) return null
//               return <WrapperCommonSurfaceGroup
//                 key={_surfaceIndex}
//                 style={{
//                   width: _surface?.width ? _surface?.width : surfaceItemWidth,
//                   paddingLeft: _surfaceIndex === 0 ? '5px' : ''
//                 }}>
//                 <div className="surface-group-container" style={{
//                   flexDirection: _surface?.group && _surface?.group?.length > 1 ? 'column' : 'row',
//                   justifyContent: _surface?.group && _surface?.group?.length > 1 ? 'center' : 'normal',
//                   alignItems: _surface?.group && _surface?.group?.length > 1 ? 'normal' : 'center'
//                 }}>
//                   {
//                     _surface?.group && _surface?.group?.length > 0 ? _surface?.group.map((_group: any, _groupIndex: number) => {
//                       let temp_element;
//                       let hide = _group?.hiddenOn ? evalExpression(_group?.hiddenOn, { ...source }) : false;
//                       if (hide) return null
//                       if (_group?.type) {
//                         temp_element = renderAmis({
//                           type: _group?.type,
//                           name: _group?.name,
//                           body: _group?.body
//                         }, {
//                           data: source
//                         })
//                       }
//                       return <span
//                         key={_groupIndex}
//                         className="surface-group-item"
//                       >
//                         {
//                           _group?.hideLabel ? (
//                             _group.type ? temp_element : source[_group?.name]
//                           ) : <><span
//                             className="surface-group-item--label"
//                           >
//                             {_group.label}：
//                           </span>{_group.type ? temp_element : source[_group?.name]}</>
//                         }
//                       </span>
//                     }) : [''].map((_) => {
//                       let temp_element;
//                       let hide = _surface?.hiddenOn ? evalExpression(_surface?.hiddenOn, { ...source }) : false;
//                       if (hide) {
//                         return null
//                       }
//                       if (_surface.type) {
//                         temp_element = renderAmis({
//                           type: _surface.type,
//                           name: _surface.name,
//                           body: _surface?.body
//                         }, {
//                           data: source
//                         });
//                       }
//                       return <span
//                         key={_}
//                         className="surface-group-item"
//                       >
//                         {_surface?.hideLabel ? (_surface.type ? temp_element : source[_surface?.name]) : <><span
//                           className="surface-group-item--label"
//                         >
//                           {_surface.label}：
//                         </span>{_surface.type ? temp_element : source[_surface?.name]}</>}
//                       </span>
//                     })
//                   }
//                 </div>
//               </WrapperCommonSurfaceGroup>
//             })
//           }
//         </div>

//       </td>
//       <td
//         className='tbody-td--column thead-th--column tbody-td--opreation'
//       >
//         <div className="tbody-td--column--surface--hide">
//         </div>
//       </td>
//     </tr>
//   }

//   // 加载左固定列
//   renderFixLeftTable = () => {
//     const { pageData } = this.state;

//     return pageData.map((source, sourceIndex) => {

//       /**
//         * @description: 主体表格渲染逻辑
//         * @param {any} source 主表项
//         * @param {number} 主表项索引
//         * @return {JSXElement}
//       */

//       return <>
//         {this.renderFixLeftSurfaceTr(source)}
//         {this.renderBranchTr(source, 'left')}
//         {this.renderVisibleTr(source, "left")}
//       </>
//     })
//   }

//   renderFixRightSurfaceTr = (source: any) => {
//     // 固定列左侧布局渲染
//     const { fixColumns, surfaceItemWidth } = this.state;
//     const { list_columns, checkbox, surface_group, env } = this.props;

//     const _btn_cols = list_columns.find((_column: any) => {
//       return _column?.buttons
//     })

//     const is_exist = _btn_cols?.buttons?.length > 0 ? true : false;

//     const btn_num = _btn_cols?.num ? _btn_cols?.num : _btn_cols?.buttons?.length;

//     let btn_element = is_exist ? _btn_cols?.buttons.filter((button_item: any, button_idx: number) => {
//       return button_item?.type && !evalExpression(button_item?.hiddenOn, source)
//     }).map((button_item: any, button_idx: number) => {
//       return renderAmis({
//         ...button_item,
//         type: button_item.type !== 'label-print' ? button_item.type : 'button'
//       }, {
//         data: source,
//         ids: source[this.props.primaryField!],
//         primaryField: this.props.primaryField,
//         onAction: this.handleAction,
//         [button_idx >= btn_num ? 'className' : '']: 'lion-td-btn'
//       }, {
//         fetcher: env?.fetcher as any,
//         session: env?.session
//       })
//     }) : null;
//     const fixedClassName = _btn_cols && _btn_cols?.buttons?.length > 0 ? 'lion-cell--fix--right' : '';

//     return <tr className='tbody-tr--column--common tbody-tr--column--gray'>

//       {/* 主表行单选框渲染逻辑 */}
//       {
//         checkbox ? <td
//           className='tbody-td--column fix--hidden tbody-td--column--surface--checkbox'
//         >
//         </td> : null
//       }

//       {/* 主表行渲染 */}
//       <td
//         className='tbody-td--column thead-th--column tbody-td--column--surface--mainarea'
//         // colSpan={Object.keys(fixColumns).length}
//         colSpan={(_btn_cols && _btn_cols?.buttons?.length > 0) ? (Object.keys(fixColumns).length - 2) : Object.keys(fixColumns).length}
//       >
//         <div style={{ display: 'flex' }}>
//           {/* 主表列分组渲染 */}

//           {
//             list_columns.map((_surface: any, _surfaceIndex: number) => {
//               if (_surface?.buttons) return null
//               return <WrapperCommonSurfaceGroup
//                 key={_surfaceIndex}
//                 style={{
//                   width: _surface?.width ? _surface?.width : surfaceItemWidth,
//                   paddingLeft: _surfaceIndex === 0 ? '5px' : ''
//                 }}>
//                 <div className="surface-group-container" style={{
//                   flexDirection: _surface?.group && _surface?.group?.length > 1 ? 'column' : 'row',
//                   justifyContent: _surface?.group && _surface?.group?.length > 1 ? 'center' : 'normal',
//                   alignItems: _surface?.group && _surface?.group?.length > 1 ? 'normal' : 'center'
//                 }}>
//                   {
//                     _surface?.group && _surface?.group?.length > 0 ? _surface?.group.map((_group: any, _groupIndex: number) => {
//                       let temp_element;
//                       let hide = _group?.hiddenOn ? evalExpression(_group?.hiddenOn, { ...source }) : false;
//                       if (hide) return null
//                       if (_group?.type) {
//                         temp_element = renderAmis({
//                           type: _group?.type,
//                           name: _group?.name,
//                           body: _group?.body
//                         }, {
//                           data: source
//                         })
//                       }
//                       return <span
//                         key={_groupIndex}
//                         className="surface-group-item"
//                       >
//                         {
//                           _group?.hideLabel ? (
//                             _group.type ? temp_element : source[_group?.name]
//                           ) : <><span
//                             className="surface-group-item--label"
//                           >
//                             {_group.label}：
//                           </span>{_group.type ? temp_element : source[_group?.name]}</>
//                         }
//                       </span>
//                     }) : [''].map((_) => {
//                       let temp_element;
//                       let hide = _surface?.hiddenOn ? evalExpression(_surface?.hiddenOn, { ...source }) : false;
//                       if (hide) {
//                         return null
//                       }
//                       if (_surface.type) {
//                         temp_element = renderAmis({
//                           type: _surface.type,
//                           name: _surface.name,
//                           body: _surface?.body
//                         }, {
//                           data: source
//                         });
//                       }
//                       return <span
//                         key={_}
//                         className="surface-group-item"
//                       >
//                         {_surface?.hideLabel ? (_surface.type ? temp_element : source[_surface?.name]) : <><span
//                           className="surface-group-item--label"
//                         >
//                           {_surface.label}：
//                         </span>{_surface.type ? temp_element : source[_surface?.name]}</>}
//                       </span>
//                     })
//                   }
//                 </div>
//               </WrapperCommonSurfaceGroup>
//             })
//           }
//         </div>

//       </td>
//       <td
//         className='tbody-td--column thead-th--column tbody-td--opreation lion-cell--fix--right'
//       >
//         <div className="lion-cell--fix--right--cell" style={{
//           width: this.rightTableWidth,
//         }}>
//           <StyledMargin className="tbody-td--opreation--list">
//             {
//               btn_element && btn_element.slice(0, btn_num)
//             }
//             {btn_element?.length > btn_num ? <Popover
//               placement='bottomRight'
//               arrowPointAtCenter
//               getPopupContainer={this.props.env?.getModalContainer}
//               trigger="click"
//               content={() => {
//                 return <WrapperBtnPopover className="lion-export-popover">
//                   <div className="lion-export-popover-container">
//                     <div className="lion-export-popover-hide">
//                       <ul style={{ [btn_element.slice(btn_num)?.length <= 1 ? 'padding' : '']: 0 }}>
//                         {
//                           btn_element.slice(btn_num).map((item: any, idx: number) => {
//                             return <div key={idx} data-index={idx} >{item}</div>
//                           })
//                         }
//                       </ul>
//                     </div>
//                   </div>
//                 </WrapperBtnPopover>
//               }}
//               overlayStyle={{
//                 paddingTop: 0
//               }}
//               overlayInnerStyle={{
//                 padding: 0
//               }}
//               overlayClassName="lion-table-cell-btn"
//             >
//               <Popover
//                 placement='top'
//                 arrowPointAtCenter
//                 getPopupContainer={this.props.env?.getModalContainer}
//                 trigger="hover"
//                 overlayStyle={{
//                   paddingTop: 0
//                 }}
//                 overlayInnerStyle={{
//                   padding: 0
//                 }}
//                 // ant-popover-arrow-content
//                 overlayClassName="lion-table-cell-btn lion-table-cell-btn-hide"
//                 content={() => {
//                   return <div className="lion-table-cell-btn-hide--text" style={{
//                     background: '#333',
//                     boxShadow: '0 2px 4px 0 rgb(0 0 0 / 16%)',
//                     border: 'none',
//                     color: '#fff',
//                     padding: '8px 10px 10px',
//                     lineHeight: '18px',
//                     fontWeight: 400,
//                     fontSize: '12px',
//                     borderRadius: '4px',
//                     whiteSpace: 'nowrap'
//                   }}
//                   >更多内容</div>
//                 }}
//               >
//                 <Button className="lion-cell-btn--ellipsis" icon={<span style={{ fontSize: '20px' }} className="fa fa-ellipsis-h"></span>} type="link" ></Button>
//               </Popover>
//             </Popover> : null}
//           </StyledMargin>
//         </div>
//       </td>
//     </tr>
//   }

//   // 加载右固定列
//   renderFixRightTable = () => {
//     const { pageData } = this.state;

//     return pageData.map((source, sourceIndex) => {
//       /**
//         * @description: 主体表格渲染逻辑
//         * @param {any} source 主表项
//         * @param {number} 主表项索引
//         * @return {JSXElement}
//       */

//       return <>
//         {this.renderFixRightSurfaceTr(source)}
//         {this.renderBranchTr(source, 'right')}
//         {this.renderVisibleTr(source, 'right')}
//       </>
//     })
//   }

//   // 表格头部渲染
//   renderHeaderTr = () => {
//     const { checkbox, list_columns } = this.props;
//     const { fixColumns } = this.state;
//     const _main_btn: any = list_columns?.find((_column: any) => {
//       return _column?.buttons
//     })
//     return fixColumns.map((column: any, index: number) => {
//       const align = column.align || undefined;
//       const title = column.label || '';

//       //  确定是否是被固定的列，是就不显示它
//       const fixedClassName = column.hasOwnProperty('fixed') ? 'fix--hidden' : '';

//       return (
//         <th
//           key={index}
//           className={this.classNames('thead-th--column', column.className, fixedClassName)}
//           style={{
//             textAlign: align,
//             backgroundColor: checkbox ? '#fff' : '',
//           }}
//         >
//           <div
//             style={{
//               width: column?.width,
//               overflow: column?.name === 'checkbox' ? 'unset !important' : 'hidden'
//             }}
//             className='thead-th--cell'
//           >
//             <span
//               style={{ width: column?.width }}
//             >
//               {
//                 column.name === 'checkbox'
//                   ?
//                   null
//                   : title
//               }
//             </span>
//           </div>
//         </th>
//       );
//     })
//   }

//   // 固定列表格头部渲染器
//   renderFixHeaderTr = (fixed: string) => {

//     const { checkbox } = this.props;
//     const { checkAll, fixColumns } = this.state;
//     return fixColumns.map((column: any, index: number) => {

//       //  确定是固定在左侧栏还是右侧栏
//       let fixTarget = column.hasOwnProperty('fixed') ? column?.fixed : '';
//       // 根据固定位置添加样式
//       let fixedClassName = 'fix--hidden';

//       if (fixed === fixTarget) {
//         fixedClassName = ('lion-cell--fix--' + fixTarget)
//       }

//       const _style = {
//         textAlign: column.align || undefined,
//         backgroundColor: checkbox ? '#fff' : '',
//         [fixTarget && fixTarget?.length > 0 ? fixTarget : null]: column?.[fixTarget + 'Width']
//       }

//       return (
//         <th
//           key={index}
//           className={this.classNames('thead-th--column', fixedClassName, column.className)}
//           style={_style}
//         >
//           <div
//             style={{
//               width: column?.width,
//               overflow: column?.name === 'checkbox' ? 'unset !important' : 'hidden'
//             }}
//             className='thead-th--cell'
//           >
//             <span
//               style={{ width: column?.width }}
//             >
//               {
//                 column.name === 'checkbox'
//                   ?
//                   <Checkbox onClick={fixed === 'left' ? (e) => { this.onCheckAllChange(e) } : undefined} checked={checkAll} />
//                   : (column.label || '')
//               }
//             </span>
//           </div>
//         </th>
//       );
//     })
//   }

//   // 表格主体区域渲染

//   renderTableContainer = () => {
//     const { _container_height } = this.state;
//     const { style } = this.props;

//     return <WrapperLionTableContainer className="lion-table" style={{ ...style, height: _container_height }}>

//       {/* 表格及分页渲染区域 */}
//       <div className="lion-table-container">
//         {/* 表格体渲染区域 */}
//         <div className="lion-table-container-body">
//           {/* 表格头部及数据渲染区域 */}
//           {this.renderTableWrapper()}

//           {/* 表格固定列渲染区域 */}
//           {this.renderTableFixWrapper()}
//         </div>
//         {/* 分页渲染区域 */}
//         {this.renderPagination()}
//       </div>

//       {/* loading */}
//       <div
//         style={{ display: this.state.loading ? 'block' : 'none' }}
//         className='lion-table-loading'
//       >
//         <div className='lion-table-loading-wrapper'>
//           {/* <Spin indicator={<LoadingOutlined spin />} /> */}
//           <Spin tip="Loading..." />
//         </div>
//       </div>
//     </WrapperLionTableContainer>
//   }

//   renderTableWrapper = () => {
//     const { fixColumns, table_height, tableBody, pageData } = this.state;
//     {/* 表格头及数据渲染区域 */ }
//     return <div className="lion-table-container-body-wrapper">
//       <div
//         className="lion-table-header"
//       >
//         <WrapperCommonThead style={{ width: this.state.wrapper }}>
//           <colgroup>
//             {
//               this.renderCols(fixColumns)
//             }
//           </colgroup>
//           <thead className="lion-table-header-thead">
//             <tr>
//               {
//                 this.renderHeaderTr()
//               }
//             </tr>
//           </thead>
//         </WrapperCommonThead>
//       </div>
//       <div
//         ref={tableBody}
//         className="lion-table-body"
//         style={{ height: !table_height ? '500px' : table_height }}
//         onMouseOut={this.handleTrMouseOut}
//         onScroll={(e: any) => this.handleScroll(e.currentTarget, e)}
//       >
//         {pageData && pageData?.length > 0 ? <WrapperCommonTbody style={{ width: this.state.wrapper }}>
//           <colgroup>
//             {
//               this.renderCols(fixColumns)
//             }
//           </colgroup>
//           <tbody className="lion-table-body-tbody">
//             {
//               this.renderTable()
//             }
//           </tbody>
//         </WrapperCommonTbody> : this.renderEmptyData()}
//       </div>
//     </div>
//   }

//   renderTableFixWrapper = () => {
//     const { table_height, fixColumns } = this.state;
//     return (
//       <WrapperLionTableFix className="lion-table-container-fixed-wrapper">
//         <div
//           className="lion-table-container-fixed-wrapper--left"
//           style={{
//             height: !table_height ? '535px' : (table_height + 35),
//             boxShadow: this.state.fixLeft === 0 ? '' : '4px 3px 4px 0 rgb(0 0 0 / 12%)',
//             width: this.leftTableWidth
//           }}
//         >
//           {/* 固定列头部渲染 */}
//           <div className="lion-table-container-fixed-header"
//             style={{
//               left: 0,
//             }}
//           >
//             <WrapperCommonThead style={{ width: this.state.wrapper }}>
//               <colgroup>
//                 {
//                   this.renderCols(fixColumns)
//                 }
//               </colgroup>
//               <thead className="lion-table-header-thead">
//                 <tr>
//                   {
//                     this.renderFixHeaderTr("left")
//                   }
//                 </tr>
//               </thead>
//             </WrapperCommonThead>
//           </div>
//           {/* 固定列表格体渲染渲染 */}
//           <div
//             className="lion-table-container-fixed-body"
//             onMouseOut={this.handleTrMouseOut}
//             style={{
//               left: 0,
//               height: !table_height ? '494px' : (table_height - 6)
//             }}
//           >
//             <WrapperCommonTbody style={{
//               width: this.state.wrapper
//             }} >
//               <colgroup>
//                 {
//                   this.renderCols(fixColumns)
//                 }
//               </colgroup>
//               <tbody
//                 className="lion-table-body-tbody"
//               >
//                 {
//                   this.renderFixLeftTable()
//                 }
//               </tbody>
//             </WrapperCommonTbody>
//           </div>
//         </div>
//         <div
//           className="lion-table-container-fixed-wrapper--right"
//           style={{ height: !table_height ? '535px' : (table_height + 35), width: this.rightTableWidth }}
//         >
//           <div
//             className="lion-table-container-fixed-header"
//             style={{
//               right: 0
//             }}>
//             <WrapperCommonThead style={{ width: this.state.wrapper }}>
//               <colgroup>
//                 {
//                   this.renderCols(fixColumns)
//                 }
//               </colgroup>
//               <thead className="lion-table-header-thead">
//                 <tr>
//                   {
//                     this.renderFixHeaderTr("right")
//                   }
//                 </tr>
//               </thead>
//             </WrapperCommonThead>
//           </div>
//           <div
//             className="lion-table-container-fixed-body"
//             style={{
//               right: 0,
//               height: !table_height ? '494px' : (table_height - 6)
//             }}
//             onMouseOut={this.handleTrMouseOut}
//           >
//             <WrapperCommonTbody style={{ width: this.state.wrapper }}>
//               <colgroup>
//                 {
//                   this.renderCols(fixColumns)
//                 }
//               </colgroup>
//               <tbody className="lion-table-body-tbody">
//                 {
//                   this.renderFixRightTable()
//                 }
//               </tbody>
//             </WrapperCommonTbody>
//           </div>
//         </div>
//       </WrapperLionTableFix >
//     )
//   }

//   renderPagination = () => {
//     const { perPageAvailable } = this.props;
//     const { page, pageSize, totalSize } = this.state;
//     return <div className="lion-talbe-container-pagination">
//       <div
//         className='lion-talbe-container-pagination-wrapper'
//       >
//         <Pagination
//           current={page}
//           locale={CN}
//           pageSize={pageSize}
//           total={totalSize}
//           pageSizeOptions={
//             perPageAvailable ? perPageAvailable.map(item => String(item)) : ["10", "20", "30", "50"]
//           }
//           showSizeChanger
//           showTotal={this.showTotal}
//           onChange={this.handlePageSizeChange}
//         />

//       </div>
//     </div>
//   }

//   renderUniversalDialog() {
//     const { store, render } = this.props;
//     return render(
//       'dialog',
//       {
//         ...((store.action as Action) &&
//           ((store.action as Action).dialog as object)),
//         type: 'dialog'
//       },
//       {
//         key: 'dialog',
//         data: store.dialogData,
//         // onConfirm: this.handleDialogConfirm.bind(this),
//         onClose: this.handleDialogClose.bind(this),
//         show: store.dialogOpen
//       }
//     )
//   }

//   componentDidMount() {

//     const { page, pageSize } = this.state;
//     const { initFetch = true } = this.props
//     window.addEventListener('resize', this.MonitorPageChanges);
//     window.addEventListener('resize', this.MonitorTableChanges);


//     let isTab = this.props?.totalTab;

//     let tabHeight = isTab ? 32 : 0;

//     this._uploadRef?.handleBulkChange({ perPage: pageSize, page: page });
//     initFetch && this.requestFilterSource({ perPage: pageSize, page: page });



//     let dis = tabHeight + 40 + 46 + (this.props?.filter ? 50 : 0) + ((this.props?.headerToolbar?.length > 0 || this.props?.bulkActions?.length > 0) ? 40 : 10) + (this.props.keepItemSelectionOnPageChange ? 35 : 0);

//     setTimeout(() => {
//       this.setState({
//         _container_height: calcGap(tabHeight),
//         table_height: calcGap(dis)
//       })
//     }, 1000)

//   }

//   handleDialogClose(confirmd: any) {
//     const { store } = this.props;
//     store?.closeDialog(true);
//   }

//   handleDialogConfirm(
//     values: object[],
//     action: Action,
//     ctx: any,
//     components: Array<any>
//   ) {
//     console.error('暂未支持此方法,请联系开发人员支持');
//     return
//   }

//   componentWillUnmount() {
//     const scoped = this.context as IScopedContext;
//     scoped.unRegisterComponent(this);
//     // 将组件从scoped中卸载
//     window.removeEventListener('resize', this.MonitorPageChanges);
//     window.removeEventListener('resize', this.MonitorTableChanges);
//   }

//   render() {
//     const { env, keepItemSelectionOnPageChange, store, primaryField, translate, classnames } = this.props;

//     return (
//       <LionTableContext.Provider value={{
//         env: env,
//         handleAction: this.handleAction.bind(this),
//         primaryField: primaryField
//       }}>
//         <WrapperLionTableBase className="lion-table-base">
//           {this.renderFilter()}
//           {keepItemSelectionOnPageChange && <SectionList sectionList={this.ids} onChange={this.handleSectionChange} env={env} />}
//           {this.renderHeaderToolbars()}
//           {this.renderTableContainer()}

//           {/* Jay 打印标签弹窗 */}
//           {(this.state.modalLabelPrintOpen || this.state.modalFilePrintOpen) && <ModalPrint {...this.props} {...this.state.ModalProps} filterKey={this.props.filter?.name}
//           />}
//           {this.renderUniversalDialog()}
//         </WrapperLionTableBase>
//       </LionTableContext.Provider>
//     )
//   }
// }

// @Renderer({
//   type: 'lion-test-table',
//   storeType: LionTableStore.name
// })
// export class LionTableRenderer extends LionTable { }