import React, { useEffect, useRef, useState } from 'react';
import Sortable from 'sortablejs';
import cloneDeep from 'lodash/cloneDeep';
import { RendererProps } from '../../factory';
import Overlay from '../../components/Overlay';
import PopOver from '../../components/PopOver';
import Button from '../../components/Button';
import TooltipWrapper from '../../components/TooltipWrapper';
import type { TooltipObject } from '../../components/TooltipWrapper';
import { isMobile, noop, uuid } from '../../utils/helper';
import { filter } from '../../utils/tpl';
import { Icon } from '../../components/icons';
import { RootClose } from '../../utils/RootClose';
import { IColumn } from '../../store/table';
import {
  CheckOutlined,
  DeleteOutlined,
  EditOutlined,
  PushpinOutlined,
  VerticalAlignBottomOutlined,
  VerticalAlignTopOutlined
} from '@ant-design/icons';
import { normalizeApi } from '../../utils/api';
import {
  Form,
  Input,
  Modal as TemplateModal,
  Popconfirm,
  Select,
  message,
  Drawer,
  Button as AntdButton
} from 'antd';
import { tools } from '../../utils/shell/tools';
import { Shell } from '../../utils/shell';
import debounce from 'lodash/debounce';

//计算出columnInfo数据
export const productColumnInfo = (sortColumns: Array<IColumn>) => {
  const saveCols: SaveColType = {};
  sortColumns.forEach((col, index) => {
    if (col.type === 'operation') return;
    saveCols[col.name as string] = {
      index,
      hidden: col?.pristine?.hidden ? 1 : 0,
      fixed: col.fixed
    };
  });
  return saveCols;
};
export interface ColumnTogglerProps extends RendererProps {
  /**
   * 按钮文字
   */
  label?: string | React.ReactNode;

  /**
   * 按钮提示文字，hover focus 时显示
   */
  tooltip?: string | TooltipObject;

  /**
   * 禁用状态下的提示
   */
  disabledTip?: string | TooltipObject;

  /**
   * 点击外部是否关闭
   */
  closeOnOutside?: boolean;

  /**
   * 点击内容是否关闭
   */
  closeOnClick?: boolean;

  /**
   * 下拉菜单对齐方式
   */
  align?: 'left' | 'right';

  /**
   *  ColumnToggler的CSS类名
   */
  className?: string;

  /**
   * 按钮的CSS类名
   */
  btnClassName?: string;

  /**
   * 按钮大小
   */
  size?: 'xs' | 'sm' | 'md' | 'lg';

  /**
   * 按钮级别，样式
   */
  level?: 'info' | 'success' | 'danger' | 'warning' | 'primary' | 'link';

  /**
   * 是否独占一行 `display: block`
   */
  block?: boolean;

  /**
   * 是否可通过拖拽排序
   */
  draggable?: boolean;

  /**
   * 默认是否展开
   */
  defaultIsOpened?: boolean;

  /**
   * 激活状态
   */
  isActived?: boolean;

  /**
   * ICON名称
   */
  icon?: string | React.ReactNode;

  /**
   * 是否只显示图标。
   */
  iconOnly?: boolean;

  /**
   * 是否隐藏展开的Icon
   */
  hideExpandIcon?: boolean;

  /**
   * 是否显示遮罩层
   */
  overlay?: boolean;

  /**
   * 列数据
   */
  columns: Array<IColumn>;
  /**
   * 原始列
   */
  // originColumns?: Array<any>;
  // Jay
  getRawColumns?: () => Array<IColumn>; // 未进行显隐和排序处理的列数据
  onColumnToggle: (
    columns: Array<IColumn> | undefined,
    saveCols: Record<string, any>,
    canFetch: boolean,
    targetTemp?: Temp
  ) => void;
  modalContainer?: () => HTMLElement;
  filteredColumns?: Array<IColumn>;
  saveColApi?: {
    data?: { [key: string]: string };
    method: 'string';
    url: string;
  };
  //是否显示序号列
  showIndex: boolean;
  indexColShow: boolean;
  setIndexCol: (show: boolean) => void;
  closeDrawer?: () => void;
  updateColumnSettingList: (list: Temp[]) => void;
  //取消防抖函数的调用
  flushDebounced?: () => void;
  columnSettingTemps: Temp[];
}

type SaveColType = Record<
  string,
  { index: number; hidden: 0 | 1; fixed?: string }
>;

export interface Temp {
  tempKey: string;
  tempName: string;
  columnInfo: SaveColType;
}

const ColumnToggler = (props: ColumnTogglerProps) => {
  const {
    tooltip,
    placement,
    tooltipContainer,
    tooltipTrigger,
    tooltipRootClose,
    disabledTip,
    block,
    disabled,
    $schema,
    btnClassName,
    size,
    label,
    level,
    primary,
    className,
    classnames: cx,
    align,
    iconOnly,
    icon,
    isActived,
    data,
    draggable,
    classPrefix: ns,
    modalContainer,
    defaultIsOpened,
    columns,
    saveColApi,
    env,
    hideExpandIco,
    translate: __,
    indexColShow,
    setIndexCol,
    updateColumnSettingList,
    flushDebounced,
    columnSettingTemps
  } = props;
  const [isOpened, setIsOpend] = useState(defaultIsOpened);
  const [sortColumns, setSortColumns] = useState<IColumn[]>([]);
  const [tempList, setTempList] = useState<Temp[]>(columnSettingTemps || []);
  const [tempVisible, setTempVisible] = useState(false);
  const [selectedTemp, setSelectedTemp] = useState('');
  const [tmpSelected, setTmpSelected] = useState('');
  const [editingTemp, setEditingTemp] = useState('');
  const [indexVisible, setIndexVisible] = useState(indexColShow);
  const [selectTmpShow, setSelectTmpShow] = useState(false);
  const [selectTmpConfirmShow, setSelectTmpConfirmShow] = useState(false);
  const [searchValue, setSearchValue] = useState('');
  const [selectedItem, setSelectedItem] = useState<IColumn>();
  const [form] = Form.useForm();
  const target = useRef<HTMLDivElement>();
  const dialogRef = useRef<any>();
  const sortable = useRef<Sortable>();
  const sortColumnsRef = useRef<IColumn[]>([]);
  const domRef = (ref: any) => {
    target.current = ref;
  };

  useEffect(() => {
    setTempList(columnSettingTemps)
    if (columnSettingTemps.length > 0) {
      setSelectedTemp(columnSettingTemps[0].tempKey)
    }
  }, [columnSettingTemps])

  useEffect(() => {
    if (searchValue) {
      debounceHandleSearch(searchValue)
    } else {
      setSelectedItem(undefined)
    }
  }, [searchValue])

  useEffect(() => {
    if (selectedItem && searchValue) {
      const activeDom = innerRef.current?.querySelector('.display-field-active')
      activeDom?.scrollIntoView({ behavior: 'smooth', block: 'start' })
    } else {
      setSelectedItem(undefined)
    }
  }, [selectedItem])

  const innerRef = useRef<HTMLUListElement>(null);
  const handleSearch = (searchValue: string) => {
    //匹配规则，1.全匹配 2.以关键字开头匹配 3.模糊匹配
    let target = sortColumns.find(item => item.label === searchValue);
    !target && (target = sortColumns.find(item => item.label.startsWith(searchValue)));
    !target && (target = sortColumns.find(item => item.label?.includes(searchValue)));
    if (target) {
      setSelectedItem(target)
      if (target.name === selectedItem?.name) {
        const activeDom = innerRef.current?.querySelector('.display-field-active')
        activeDom?.scrollIntoView({ behavior: 'smooth', block: 'start' })
      }
    }
  }

  const debounceHandleSearch = debounce(handleSearch, 300)

  const initColumns = (cols: IColumn[]) => {
    let colList = cloneDeep(cols).filter(item => item.type !== 'operation');
    setSortColumns(colList);
  };

  useEffect(() => {
    if (isOpened) {
      initColumns(columns);
    }
  }, [columns, isOpened]);

  useEffect(() => {
    resetClick.current = false;
  }, [isOpened])

  useEffect(() => {
    sortColumnsRef.current = sortColumns;
  }, [sortColumns]);

  useEffect(() => {
    initDragging();
    return () => {
      target.current = undefined
      destroyDragging();
    }
  }, []);

  //获取模板列表并保存
  const getTempList = async () => {
    const api = normalizeApi(saveColApi?.url || '', 'get');
    const { data } = await env.fetcher(api);
    const list = data?.filter((item: Temp) => item.tempKey) || [];
    setTempList(list);
    if (list.length > 0) {
      setSelectedTemp(list[0].tempKey)
    }
    return list
  };

  const destroyDragging = () => {
    sortable.current && sortable.current.destroy();
  };

  // @autobind
  const dragRef = (ref: any) => {
    if (draggable && ref) {
      initDragging();
    }
  };
  let canConfirmFetch = useRef(false);
  const toggle = (e: React.MouseEvent<any>) => {
    e.preventDefault();
    flushDebounced?.()
    setIsOpend(!isOpened);
  };

  const updateToggledColumn = (
    column: IColumn,
    value: any,
    shift?: boolean
  ) => {
    canConfirmFetch.current = true;
    const newSortColumns = sortColumns.map(item => {
      if (item.name === column.name) {
        return {
          ...item,
          pristine: { ...item?.pristine, hidden: !value },
          toggled: !!value
        }
      }
      return item
    })
    setSortColumns([...newSortColumns]);
  };

  const button = (
    <button
      onClick={toggle}
      disabled={disabled}
      className={cx(
        'Button',
        btnClassName,
        typeof level === 'undefined'
          ? 'Button--default'
          : level
            ? `Button--${level}`
            : '',
        {
          'Button--block': block,
          'Button--primary': primary,
          'Button--iconOnly': iconOnly
        },
        size ? `Button--${size}` : ''
      )}
    >
      {icon ? (
        typeof icon === 'string' ?
          icon.includes('#') ?
            <Icon icon={icon} className="icon" symbol /> :
            (
              <i className={cx(icon, 'm-r-xs')} />
            ) : (
            icon
          )
      ) : null}
      {typeof label === 'string' ? filter(label, data) : label}
      {hideExpandIco || draggable ? null : (
        <span className={cx('ColumnToggler-caret')}>
          <Icon icon="caret" className="icon" />
        </span>
      )}
    </button>
  );

  const swapColumnPosition = (oldIndex: number, newIndex: number) => {
    const newColumns = [...sortColumnsRef.current];
    const oldColumn = newColumns[oldIndex];
    newColumns.splice(
      newIndex > oldIndex ? newIndex + 1 : newIndex,
      0,
      oldColumn
    );
    oldIndex > newIndex
      ? newColumns.splice(oldIndex + 1, 1)
      : newColumns.splice(oldIndex, 1);
    setSortColumns(newColumns);
  };

  const renderOuter = () => {
    const {
      popOverContainer,
      classnames: cx,
      classPrefix: ns,
      children,
      closeOnClick,
      closeOnOutside
    } = props;
    const body = (
      <RootClose
        disabled={!isOpened}
        onRootClose={closeOnOutside !== false ? close : noop}
      >
        {(ref: any) => {
          return (
            <ul
              className={cx('ColumnToggler-menu')}
              onClick={closeOnClick ? close : noop}
              ref={ref}
            >
              {children}
            </ul>
          );
        }}
      </RootClose>
    );

    if (popOverContainer) {
      return (
        <Overlay
          container={popOverContainer}
          target={() => target.current}
          show
        >
          <PopOver
            overlay
            onHide={close}
            classPrefix={ns}
            className={cx('ColumnToggler-popover')}
            style={{ minWidth: (target.current as HTMLDivElement)?.offsetWidth }}
          >
            {body}
          </PopOver>
        </Overlay>
      );
    }

    return body;
  };

  const close = () => {
    setSelectedTemp('');
    setTmpSelected('');
    setIsOpend(false);
    props.closeDrawer?.();
  };

  // @autobind
  const onConfirm = async () => {
    const { onColumnToggle } = props;
    if((!tempList || (tempList && tempList.length === 0)) && !canConfirmFetch.current && resetClick.current) {
      const api = normalizeApi({
        url: saveColApi?.url || '',
        method: 'delete'
      });
      await env.fetcher(api);
      const targetCol = columns.find(item => item.type === 'operation');
      onColumnToggle( targetCol ? [...sortColumns, targetCol] : [...sortColumns], {}, false, undefined);
    } else {
      const saveCols = productColumnInfo(sortColumns);
      const targetCol = columns.find(item => item.type === 'operation');
      let targetTemp = selectedTemp
        ? tempList.find(item => item.tempKey === selectedTemp)
        : undefined;
      if (targetTemp) {
        targetTemp = {
          ...targetTemp,
          columnInfo: saveCols
        }
      }
      if (targetCol) {
        onColumnToggle &&
          onColumnToggle(
            [...sortColumns, targetCol as IColumn],
            saveCols,
            canConfirmFetch.current,
            targetTemp
          );
      } else {
        onColumnToggle &&
          onColumnToggle([...sortColumns], saveCols, canConfirmFetch.current, targetTemp);
      }
    }
    setIndexCol(indexVisible);
    setIsOpend(false);
    props.closeDrawer?.();
  };

  const initDragging = () => {
    const el = dialogRef?.current?.querySelector(
      `.${ns}ColumnToggler-modal-body-right .${ns}ColumnToggler-modal-content`
    ) as HTMLDivElement;

    if (el) {
      sortable.current = new Sortable(el, {
        group: `.${ns}ColumnToggler-modal-body-right`,
        animation: 150,
        // 提供class可拖动
        handle: isMobile() ? `.${ns}ColumnToggler-menuItem-dragBar` : `.${ns}ColumnToggler-menuItem`,
        ghostClass: `${ns}ColumnToggler-menuItem--dragging`,
        onEnd: (e: any) => {
          if (e.newIndex === e.oldIndex) {
            return;
          }
          canConfirmFetch.current = true;
          swapColumnPosition(e.oldIndex, e.newIndex);
        }
      });
    }
  };

  const sortFix = (index: number, column: IColumn) => {
    const newSortColumns = [...sortColumns];
    canConfirmFetch.current = true;
    if (column.groupName) {
      const cols = newSortColumns.map((item, fixIndex) => {
        if (item.groupName === column.groupName) {
          const targetColumn = {
            ...item,
            fixed: item?.fixed ? '' : 'left',
            pristine: { ...item.pristine, fixed: item?.fixed ? '' : 'left' }
          };
          return targetColumn;
        }
        return item;
      });
      setSortColumns(cols);
    } else {
      const targetColumn = {
        ...column,
        fixed: column?.fixed ? '' : 'left',
        pristine: { ...column.pristine, fixed: column?.fixed ? '' : 'left' }
      };
      newSortColumns.splice(index, 1, targetColumn);
      setSortColumns(newSortColumns);
    }
  };

  const sortUp = (index: number, column: IColumn) => {
    if (index === 0) return;
    const newColumns = [...sortColumnsRef.current];
    const delItem = newColumns.splice(index, 1).map(item => ({
      ...item,
      toggled: true,
      pristine: {
        ...item?.pristine,
        hidden: false
      }
    }))
    setSortColumns([...delItem, ...newColumns]);
  };

  const sortDown = (index: number, column: IColumn) => {
    const newColumns = [...sortColumnsRef.current];
    const delItem = newColumns.splice(index, 1);
    setSortColumns([...newColumns, ...delItem]);
  };


  const saveTemplate = () => {
    setTempVisible(true);
  };

  const onOk = async () => {
    const values = await form.validateFields();
    if (editingTemp) {
      const data = {
        ...values,
        tempKey: editingTemp
      };
      const { msg, ok } = await env.fetcher(
        {
          url: `/api/v1/personal/setting/tempName/${props.crudName}`,
          method: 'post'
        },
        data
      );
      if (ok) {
        setTmpSelected('')
        setSelectedTemp('')
        setEditingTemp('')
      }
      message.info(msg);
    } else {
      const data = {
        ...values,
        tempKey: uuid(),
        columnInfo: productColumnInfo(sortColumns)
      };
      const api = normalizeApi(saveColApi?.url || '', 'post');
      const { msg } = await env.fetcher(api, data);
      setEditingTemp('')
      message.info(msg);
    }
    const list = await getTempList();
    updateColumnSettingList(list);
    setTempVisible(false);
  };

  const onSelect = (value: string) => {
    const target = tempList.find(item => item.tempKey === value);
    const newList = Object.entries(target?.columnInfo || {})
      .filter(([k, v]) => {
        return !!columns.find(item => item.name === k)
      })
      .map(([key, v]) => {
        const col = columns.find(item => (item.name as string) === key);
        return {
          ...col,
          index: v.index,
          toggled: !v?.hidden,
          fixed: v.fixed,
          pristine: { ...col?.pristine, hidden: !!v?.hidden }
        };
      })
    const newtempColumns = cloneDeep(columns).filter(item => item.type !== 'operation').map(item => {
      const findItem = newList.find(litem => litem.name === item.name)
      if (findItem) return findItem
      return item
    }).sort((a, b) => a.index - b.index);
    canConfirmFetch.current = true;
    setSelectedTemp(value);
    setSortColumns(newtempColumns as Array<IColumn>);
  };

  const delTemp = async (tempKey: string) => {
    const api = normalizeApi({
      url: saveColApi?.url || '',
      data: { tempKey },
      method: 'delete'
    });
    const { msg, ok } = await env.fetcher(api);
    message.info(msg);
    if (ok) {
      setSelectTmpConfirmShow(false)
      setTmpSelected('')
      setSelectedTemp('')
    }
    const newList = tempList.filter(item => item.tempKey !== tempKey);
    setTempList(newList);
    updateColumnSettingList(newList);
  };

  const editTemp = (
    e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
    tempKey: string,
    tempName: string
  ) => {
    e.stopPropagation();
    form.setFieldsValue({ tempName });
    setTempVisible(true);
    setEditingTemp(tempKey);
  };

  const resetClick = useRef(false);

  const reset = () => {
    const colList = cloneDeep(columns)
      .filter((item: IColumn) => item.type !== 'operation')
      .map((item: IColumn) => {
        const index = $schema.columns.findIndex(
          (col: IColumn) => col.name === item.name
        );
        return {
          ...item,
          toggled: true,
          index,
          pristine: { ...item?.pristine, hidden: false }
        };
      })
      .sort((a, b) => a.index - b.index);
    setSortColumns(colList);
    resetClick.current = true;
  };

  const tempModalClose = () => {
    form.resetFields();
    setEditingTemp('');
  };

  /**
   * 
   * @param check 不选，全选，反选
   */
  const handleUpdateAll = (check: 0 | 1 | 2) => {
    canConfirmFetch.current = true;
    let newSortColumns = [...sortColumns].map(item => ({
      ...item,
      pristine: { ...item?.pristine, hidden: check === 0 ? true : (check === 1 ? false : !item.pristine?.hidden) },
      toggled: check === 0 ? false : (check === 1 ? true : !!item.pristine?.hidden)
    }))
    setSortColumns([...newSortColumns]);
  }

  const renderHeader = () => {
    if (isMobile()) {
      return (
        <div className={cx('ColumnToggler-modal-header')}>
          <div className='header-left'>
            <div className='name-bar'>{__('Table.columnsToggler.colName')}</div>
            <Button level="link" onClick={reset}>
              {__('resetSettings')}
            </Button>
          </div>
          <div className='header-right'>
            <Button onClick={() => handleUpdateAll(1)} level="link">{__('Table.columnsToggler.selectAll')}</Button>
            <Button onClick={() => handleUpdateAll(0)} level="link">{__('Table.columnsToggler.Unselect')}</Button>
            <Button onClick={() => handleUpdateAll(2)} level="link">{__('Table.columnsToggler.selectReverse')}</Button>
          </div>
        </div>
      )
    }
    return null;
  }

  const renderToolbar = (column: IColumn, index: number) => {
    return (
      <div
        style={{
          display: 'flex',
          justifyContent: 'flex-start',
          alignItems: 'center',
          marginLeft: 'auto',
          fontSize: '16px'
        }}
      >
        {column.pristine?.hidden !== true && <CheckOutlined
          className="operation-icons"
          onClick={() => updateToggledColumn(column, !!column.pristine?.hidden)}
          style={{ color: column.pristine?.hidden ? '#A5A5A5' : '#1890ff' }}
        />}
        {column.pristine?.hidden !== true && <PushpinOutlined
          className='operation-icons'
          onClick={() => sortFix(index, column)}
          style={{
            color: column.fixed ? '#1890ff' : '#A5A5A5',
            transform: column.fixed ? 'rotate(-45deg)' : 'none'
          }}
        />}
        <VerticalAlignTopOutlined onClick={() => sortUp(index, column)} className='operation-icons' style={{ color: '#A5A5A5' }} />
        <VerticalAlignBottomOutlined onClick={() => sortDown(index, column)} className='operation-icons' style={{ color: '#A5A5A5' }} />
      </div>
    )
  }

  //pc端底部按钮
  const renderFooter = () => {
    return <div className={cx('ColumnToggler-modal-footer')}>
      <div className='footer-btn-group-left'>
        <div className='defaultModal-footer-left'>
          <Button level="primary" onClick={saveTemplate}>
            + {__('Table.columnsToggler.addTemplate')}
          </Button>
          <div style={{ width: 160, padding: '6px 0', marginLeft: '10px' }}>
            <Select
              getPopupContainer={env.getModalContainer}
              style={{ width: '100%', textAlign: 'left' }}
              onSelect={onSelect}
              placement={'topRight'}
              value={selectedTemp}
              placement="topRight"
              dropdownClassName="temp-selector-drop dropdown-select-style"
            >
              {tempList.map(item => (
                <Select.Option value={item.tempKey} key={item.tempKey}>
                  <div
                    style={{
                      minWidth: '30px',
                      height: '100%',
                      maxWidth: '90px',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap'
                    }}
                  >
                    {item.tempName}
                  </div>
                  <div
                    className={`temp-tools ${isMobile() ? 'is-mobile' : ''}`}
                    onClick={e => e.stopPropagation()}
                  >
                    <EditOutlined
                      onClick={e => editTemp(e, item.tempKey, item.tempName)}
                    />
                    <Popconfirm
                      title="确定要删除吗?"
                      onConfirm={() => delTemp(item.tempKey)}
                      okText={__('confirm')}
                      cancelText={__('cancel')}
                    >
                      <DeleteOutlined />
                    </Popconfirm>
                  </div>
                </Select.Option>
              ))}
            </Select>
          </div>
        </div>
      </div>
      <div className='footer-btn-group-right' style={{ display: 'flex' }}>
        <div style={{ marginRight: 10 }}>
          <Button size='sm' onClick={reset}>
            {__('resetSettings')}
          </Button>
        </div>
        <div>
          <Button level="primary" size={'sm'} onClick={onConfirm}>
            {__('confirm')}
          </Button>
        </div>
      </div>
    </div>
  }

  const renderContent = () => {
    return (
      <>
        {renderHeader()}
        <div className={cx('ColumnToggler-modal-body')} ref={dialogRef}>
          <div className={cx('ColumnToggler-modal-body-right')} ref={dragRef}>
            {isMobile() ? <div className='field-search'>
              <Input
                onChange={(e) => setSearchValue(e.target.value)}
                placeholder={__('Table.columnsToggler.searchPlaceholder')}
                allowClear />
            </div> : <div className='tool-header-box'>
              <div className='btns'>
                <div style={{ marginRight: '24px', fontWeight: '500' }}>{__('Table.columnsToggler.colName')}</div>
                <Button size="md" level="link" onClick={() => handleUpdateAll(1)}>
                  {__('Table.columnsToggler.selectAll')}
                </Button>
                <Button size="md" level="link" onClick={() => handleUpdateAll(0)}>
                  {__('Table.columnsToggler.Unselect')}
                </Button>
                <Button size="md" level="link" onClick={() => handleUpdateAll(2)}>
                  {__('Table.columnsToggler.selectReverse')}
                </Button>
              </div>
              <div className='field-search'>
                <Input
                  onChange={(e) => setSearchValue(e.target.value)}
                  placeholder={__('Table.columnsToggler.searchPlaceholder')}
                  style={{ width: '130px' }}
                  allowClear />
                <div className='field-toolbars-title'>
                  <div style={{ marginRight: '16px' }}>{__('Table.columnsToggler.colShow')}</div>
                  <div style={{ marginRight: '16px' }}>{__('Table.columnsToggler.colFixed')}</div>
                  <div style={{ marginRight: '16px' }}>{__('Table.columnsToggler.clickToTop')}</div>
                  <div>{__('Table.columnsToggler.clickToBot')}</div>
                </div>
              </div>
            </div>}
            <ul
              className={cx('ColumnToggler-modal-content')}
              style={{ overflowX: 'hidden' }}
              ref={innerRef}
            >
              {sortColumns.map((column, index) => (
                <li
                  className={
                    cx('ColumnToggler-menuItem', {
                      'display-field-active': selectedItem?.name === column.name
                    }) +
                    `${column.fixed ? ' fixed-item' : ' normal-item'}`
                  }
                  key={column.name}
                  //canSet为false不能设置显隐和排序
                  style={{
                    display: column?.pristine?.canSet === false ? 'none' : 'block'
                  }}
                >
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      height: '90%'
                    }}
                  >
                    <a className={cx('ColumnToggler-menuItem-dragBar')}>
                      <Icon icon="drag-bar" className={cx('icon')} />
                    </a>
                    <span
                      className="ellipsis menuItem-col"
                      style={{ display: 'inline-block', flex: 1 }}
                      onClick={() => updateToggledColumn(column, !!column.pristine?.hidden)}
                    >
                      {column.label ? column.groupName
                        ? column.groupName + ' · ' + column.label
                        : column.label
                        : null}
                    </span>
                    {renderToolbar(column, index)}
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
        {isMobile() && <footer className={cx('ColumnToggler-modal-footer')}>
          <div className='footer-btn-group-left'>
            {tempList.length > 0 && <div>
              <Button size='md' onClick={() => setSelectTmpShow(true)}>
                {__('selectTemplate')}
              </Button>
            </div>}
            <div>
              <Button size='md' onClick={saveTemplate}>
                {__('saveSettings')}
              </Button>
            </div>
          </div>
          <div className='footer-btn-group-right' style={{ display: 'flex' }}>
            <div>
              <Button level="primary" size={'md'} onClick={onConfirm}>
                {__('confirm')}
              </Button>
            </div>
          </div>
        </footer>}
      </>)
  }

  const renderSelectFooter = () => {
    const tgt = tempList.find(item => item.tempKey === tmpSelected);
    return <>
      <Button disabled={!tmpSelected} onClick={(e: any) => tgt && editTemp(e, tgt.tempKey, tgt.tempName)}
        size="md">{__('rename')}</Button>
      <Button disabled={!tmpSelected} onClick={() => setSelectTmpConfirmShow(true)}
        size="md">{__('Select.clear')}</Button>
      <Button disabled={!tmpSelected} onClick={() => {
        onSelect(tmpSelected)
        setSelectTmpShow(false)
      }} size='md' level='primary'>{__('confirm')}</Button>
    </>
  }

  return (
    <div
      className={cx(
        'ColumnToggler',
        {
          'ColumnToggler-block': block,
          'ColumnToggler--alignRight': align === 'right',
          'is-opened': isOpened,
          'is-actived': isActived,
          'is-mobile': isMobile()
        },
        className
      )}
      ref={domRef}
    >
      {!isMobile() ? (draggable ? (
        button
      ) : (
        <TooltipWrapper
          placement={placement}
          tooltip={disabled ? disabledTip : tooltip}
          container={tooltipContainer}
          trigger={tooltipTrigger}
          rootClose={tooltipRootClose}
        >
          {button}
        </TooltipWrapper>
      )) : null}
      {!isMobile() && isOpened && !draggable && renderOuter()}
      {isMobile() ? renderContent() :
        <TemplateModal
          title={__('Table.columnsToggler.ColSetting')}
          zIndex={11}
          bodyStyle={{ overflowY: 'auto' }}
          maskClosable={false}
          visible={isOpened}
          onCancel={() => setIsOpend(false)}
          footer={renderFooter()}
          className={cx('ColumnToggler-modal Modal-advanced ')}
          getContainer={modalContainer || target.current}
          width={620}
        >{renderContent()}</TemplateModal>}
      {
        selectTmpShow && <Drawer
          placement='bottom' mask className={`columns-toggler-drawer columns-toggler-tmp-sel ${tools.isIOS && !Shell.hasShell() ? 'ios-device' : ''}`}
          width='100vw' height={tempList.length * 45 + 130 + (tools.isIOS ? 32 : 0) + 'px'} title={__('selectTemplate')}
          visible={selectTmpShow} onClose={() => setSelectTmpShow(false)}
          getContainer={props.parentDom}
          footer={renderSelectFooter()}
        >
          <div className='tpm-sel-container'>
            {
              tempList.map(item => <div className={`tem-sel-item ${item.tempKey === tmpSelected ? 'active-tmp' : ''}`} key={item.tempKey} onClick={() => setTmpSelected(item.tempKey)}>
                <div>{item.tempName}</div>
                {tmpSelected === item.tempKey && <div><CheckOutlined /></div>}
              </div>)
            }
          </div>
        </Drawer>
      }
      {
        selectTmpConfirmShow && <Drawer
          placement='bottom' mask className={`columns-toggler-drawer ${tools.isIOS && !Shell.hasShell() ? 'ios-device' : ''}`}
          width='100vw' height={tools.isIOS ? '160px' : '128px'} title={null} closable={false}
          visible={selectTmpConfirmShow} onClose={() => setSelectTmpConfirmShow(false)}
          getContainer={props.parentDom}
        >
          <div className='tpm-sel-confirm-container'>
            <AntdButton onClick={() => delTemp(tmpSelected)} size='large' block type='text'>{__('confirm')}</AntdButton>
            <AntdButton onClick={() => setSelectTmpConfirmShow(false)} size='large' block type='text'>{__('cancel')}</AntdButton>
          </div>
        </Drawer>
      }
      {tempVisible && <TemplateModal
        visible={tempVisible}
        onOk={onOk}
        centered={isMobile()}
        style={{ borderRadius: '8px' }}
        width={isMobile() ? 300 : 520}
        afterClose={tempModalClose}
        title={__('Table.columnsToggler.editTemplateName')}
        getContainer={isMobile() ? props.parentDom : false}
        className={`${isMobile() ? "tmp-setting-modal" : 'tmp-modal'}`}
        onCancel={() => {
          tempModalClose()
          setTempVisible(false)
        }}
        okText={__('confirm')}
        cancelText={__('cancel')}
        destroyOnClose
      >
        <Form form={form}>
          <Form.Item
            label={__('Table.columnsToggler.setName')}
            name="tempName"
            rules={[
              { required: true, message: __('Table.columnsToggler.templateNameRequired') },
              () => ({
                validator: (_, value) => {
                  if (tempList.some(item => item.tempName === value)) {
                    return Promise.reject(new Error(__('Table.columnsToggler.templateNameRepeat')));
                  }
                  return Promise.resolve();
                }
              })
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </TemplateModal>}
    </div >
  );
};
export default ColumnToggler;