function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
import React, { useState, useCallback, useEffect, useMemo } from 'react';
import classNames from 'classnames';
import SuperTabs from "../PisellSuperTabs";
import PisellCards from "../PisellCards";
import Iconfont from "../iconfont";
import { getText } from "../../locales";
import mock from "./mock";
import "./PisellTabbar.less";

// ==================== 常量定义 ====================

/**
 * 默认层级配置
 */
var DEFAULT_LEVEL_CONFIG = {
  level1: {
    superTabsBg: '#3b2865',
    cardWidth: 100,
    cardHeight: 60,
    paddingLeft: 0
  },
  level2: {
    superTabsBg: '#7F56DA',
    cardWidth: 120,
    cardHeight: 56,
    paddingLeft: 20
  },
  level3: {
    superTabsBg: '#344054',
    cardWidth: 120,
    cardHeight: 56,
    paddingLeft: 40
  }
};

/**
 * 获取展开配置
 */
var getExpandConfig = function getExpandConfig() {
  return {
    active: {
      icon: 'pisell2-minimize-01',
      text: getText('pisell-tabbar-minimize')
    },
    inactive: {
      icon: 'pisell2-expand-01',
      text: getText('pisell-tabbar-expand')
    }
  };
};

/**
 * 默认数据项配置
 */
var DEFAULT_ITEMS = {
  all: {
    id: 0,
    shop_id: 9,
    parent_id: 0,
    name: 'All',
    slug: 'All',
    icon: ''
  },
  search: {
    id: -1,
    shop_id: 9,
    parent_id: 0,
    name: 'Search',
    slug: 'Search',
    key: 'search',
    icon: '',
    customClick: true
  },
  expand: {
    id: -2,
    shop_id: 9,
    parent_id: 0,
    key: 'expand',
    icon: 'pisell2-expand-01',
    name: 'Expand',
    slug: 'expand',
    customClick: true
  }
};

/**
 * 获取层级对应的添加项配置
 */
var LEVEL_ADD_ITEMS = {
  level1: ['expand'],
  level2: ['expand', 'all'],
  level3: ['expand', 'all']
};

// ==================== 工具函数 ====================

/**
 * 向数据源添加特殊项（如 all、search、expand 按钮）
 */
var addDataSourceItemsByKey = function addDataSourceItemsByKey(dataSource, keys) {
  return [].concat(_toConsumableArray(keys.map(function (key) {
    return DEFAULT_ITEMS[key];
  })), _toConsumableArray(dataSource));
};

/**
 * 获取默认激活的 key 数组
 */
var getDefaultActiveKey = function getDefaultActiveKey(dataSource, rowKey) {
  var _activeKey = [];
  if (dataSource.length) {
    var _dataSource$0$childre;
    _activeKey.push(dataSource[0][rowKey]);
    if ((_dataSource$0$childre = dataSource[0].children) !== null && _dataSource$0$childre !== void 0 && _dataSource$0$childre.length) {
      _activeKey.push(0);
    }
  }
  return _activeKey;
};

// ==================== 主组件：PisellTabbar ====================

/**
 * PisellTabbar - 多层级 Tabbar 组件
 *
 * 支持最多 3 层级的 Tab 导航，每层级可独立展开/收起
 *
 * @component
 * @example
 * ```tsx
 * <PisellTabbar
 *   dataSource={categoryData}
 *   value={[1, 10, 100]}
 *   onChange={(value) => console.log('当前选中:', value)}
 * />
 * ```
 */
var PisellTabbar = function PisellTabbar(props) {
  var _props$dataSource = props.dataSource,
    dataSource = _props$dataSource === void 0 ? props !== null && props !== void 0 && props.__designMode ? mock : mock : _props$dataSource,
    value = props.value,
    onChange = props.onChange,
    className = props.className,
    style = props.style,
    customLevelConfig = props.levelConfig,
    customExpandConfig = props.expandConfig,
    _props$maxLevel = props.maxLevel,
    maxLevel = _props$maxLevel === void 0 ? 3 : _props$maxLevel;

  // ========== 状态管理 ==========

  // 激活的 key 数组（多层级）
  var _useState = useState(value || getDefaultActiveKey(dataSource, 'id')),
    _useState2 = _slicedToArray(_useState, 2),
    activeKey = _useState2[0],
    _setActiveKey = _useState2[1];

  // 展开状态（三个层级）
  var _useState3 = useState({
      level1: false,
      level2: false,
      level3: false
    }),
    _useState4 = _slicedToArray(_useState3, 2),
    expand = _useState4[0],
    setExpand = _useState4[1];

  // ========== 同步外部 value ==========

  useEffect(function () {
    if (value && JSON.stringify(value) !== JSON.stringify(activeKey)) {
      _setActiveKey(value);
    }
  }, [JSON.stringify(value)]);

  // ========== 配置合并 ==========

  var expandConfig = customExpandConfig || getExpandConfig();
  var level1Config = _objectSpread(_objectSpread({}, DEFAULT_LEVEL_CONFIG.level1), customLevelConfig === null || customLevelConfig === void 0 ? void 0 : customLevelConfig.level1);
  var level2Config = _objectSpread(_objectSpread({}, DEFAULT_LEVEL_CONFIG.level2), customLevelConfig === null || customLevelConfig === void 0 ? void 0 : customLevelConfig.level2);
  var level3Config = _objectSpread(_objectSpread({}, DEFAULT_LEVEL_CONFIG.level3), customLevelConfig === null || customLevelConfig === void 0 ? void 0 : customLevelConfig.level3);

  // ========== 激活状态操作方法 ==========

  /**
   * 设置指定层级的激活 key
   */
  var setActiveKey = useCallback(function (level, key, cKey) {
    var newActiveKey = _toConsumableArray(activeKey);
    newActiveKey.splice(level + 1);
    newActiveKey[level] = String(key);
    if (cKey !== undefined) {
      newActiveKey[level + 1] = String(cKey);
    }
    _setActiveKey(newActiveKey);
    onChange === null || onChange === void 0 || onChange(newActiveKey);
  }, [activeKey, onChange]);

  // ========== 数据源处理 ==========

  var level1DataSource = useMemo(function () {
    return addDataSourceItemsByKey(dataSource, LEVEL_ADD_ITEMS.level1);
  }, [dataSource]);

  // ========== Level 1 渲染逻辑 ==========

  /**
   * 渲染 level1 展开按钮卡片
   */
  var renderLevel1ExpandCard = function renderLevel1ExpandCard(cardProps) {
    var _cardProps$active;
    var isExpanded = expand.level1;
    var _text = expandConfig[isExpanded ? 'active' : 'inactive'].text;
    var _icon = expandConfig[isExpanded ? 'active' : 'inactive'].icon;
    return /*#__PURE__*/React.createElement(PisellCards.GraphicTextCard, _extends({}, cardProps, {
      text: _text,
      icon: _icon,
      variant: "vertical-image",
      widthMode: "fixed",
      width: level1Config.cardWidth,
      graphicConfig: {
        width: '100%',
        height: level1Config.cardHeight,
        background: '#fff',
        iconSize: 30
      },
      style: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#fff',
        borderRadius: 8,
        border: "4px solid ".concat(level1Config.superTabsBg)
      },
      textConfig: {
        textAlign: 'center',
        color: '#fff',
        fontWeight: 400
      },
      active: {
        value: true,
        style: _objectSpread(_objectSpread({}, (_cardProps$active = cardProps.active) === null || _cardProps$active === void 0 ? void 0 : _cardProps$active.style), {}, {
          color: '#5D3F9F'
        })
      }
    }));
  };

  /**
   * 渲染 level1 普通卡片
   */
  var renderLevel1NormalCard = function renderLevel1NormalCard(cardProps) {
    var _cardProps$active2;
    var itemData = cardProps.dataSource;
    return /*#__PURE__*/React.createElement(PisellCards.GraphicTextCard, _extends({}, cardProps, {
      text: itemData.name,
      image: itemData.icon,
      variant: "card",
      widthMode: "fixed",
      width: level1Config.cardWidth,
      textConfig: {
        color: '#FFF'
      },
      active: _objectSpread(_objectSpread({}, cardProps.active), {}, {
        style: _objectSpread(_objectSpread({}, (_cardProps$active2 = cardProps.active) === null || _cardProps$active2 === void 0 ? void 0 : _cardProps$active2.style), {}, {
          color: '#000000'
        })
      }),
      style: {
        backgroundClip: 'padding-box'
      },
      graphicConfig: {
        width: '100%',
        height: "".concat(level1Config.cardHeight, "px"),
        dataSource: {
          alt: itemData.icon ? undefined : itemData.name,
          text: itemData.name === 'All' ? 'All' : undefined
        }
      }
    }));
  };

  /**
   * 渲染 level1 项
   */
  var renderLevel1Item = function renderLevel1Item(itemProps) {
    var itemData = itemProps.dataSource;

    // 展开按钮
    if (itemData !== null && itemData !== void 0 && itemData.customClick) {
      return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
        card: function card(cardProps) {
          return renderLevel1ExpandCard(cardProps);
        },
        onClick: function onClick() {
          setExpand(function (prev) {
            return _objectSpread(_objectSpread({}, prev), {}, {
              level1: !prev.level1
            });
          });
        }
      }));
    }

    // 普通项
    return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
      card: function card(cardProps) {
        return renderLevel1NormalCard(cardProps);
      },
      panel: function panel(panelProps) {
        var _panelProps$dataSourc;
        if (!(panelProps !== null && panelProps !== void 0 && (_panelProps$dataSourc = panelProps.dataSource) !== null && _panelProps$dataSourc !== void 0 && (_panelProps$dataSourc = _panelProps$dataSourc.children) !== null && _panelProps$dataSourc !== void 0 && _panelProps$dataSourc.length) || maxLevel < 2) {
          return null;
        }

        // 渲染 Level 2
        var level2Data = addDataSourceItemsByKey(panelProps.dataSource.children, LEVEL_ADD_ITEMS.level2);
        return /*#__PURE__*/React.createElement(SuperTabs, {
          id: "sku-list-tabbar-".concat(panelProps.dataSource.id),
          tabItemStyle: {},
          dataSource: level2Data,
          value: String(activeKey[1]),
          onChange: function onChange(key, item) {
            var _item$children;
            setActiveKey(1, key, item !== null && item !== void 0 && (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length ? 0 : undefined);
          },
          rowKey: "id",
          style: {
            flex: 1,
            background: level2Config.superTabsBg
          },
          gridProps: {
            direction: 'horizontal',
            gap: 4,
            wrap: expand.level2 ? 'wrap' : 'nowrap',
            startSlot: /*#__PURE__*/React.createElement("div", {
              style: {
                paddingLeft: level2Config.paddingLeft
              }
            }, /*#__PURE__*/React.createElement(Iconfont, {
              type: "pisell2-trend-down-01",
              style: {
                color: '#fff',
                fontSize: 24,
                marginRight: 8
              }
            }))
          },
          scrollViewProps: {
            style: {
              padding: '4px 8px'
            },
            overflow: !expand.level2 ? 'x' : 'hidden',
            scrollbarStyle: 'none',
            scrollActionsConfig: {
              type: 'lrArrows',
              show: true
            }
          },
          renderItem: function renderItem(level2ItemProps) {
            var level2ItemData = level2ItemProps.dataSource;

            // Level 2 展开按钮
            if (level2ItemData !== null && level2ItemData !== void 0 && level2ItemData.customClick) {
              var isExpanded = expand.level2;
              var _text = expandConfig[isExpanded ? 'active' : 'inactive'].text;
              var _icon = expandConfig[isExpanded ? 'active' : 'inactive'].icon;
              return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, level2ItemProps, {
                card: function card(cardProps) {
                  var _cardProps$active3;
                  return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, cardProps, {
                    text: _text,
                    variant: "outlined",
                    widthMode: "fixed",
                    prefixIcon: /*#__PURE__*/React.createElement(Iconfont, {
                      type: expandConfig[isExpanded ? 'active' : 'inactive'].icon,
                      style: {
                        color: '#fff',
                        fontSize: 20
                      }
                    }),
                    textConfig: {
                      textAlign: 'center',
                      color: '#FFF',
                      flex: 'none'
                    },
                    style: {
                      borderRadius: '8px',
                      background: 'rgba(0, 0, 0, 0.50)',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      height: level2Config.cardHeight
                    },
                    width: level2Config.cardWidth,
                    active: _objectSpread(_objectSpread({}, cardProps.active), {}, {
                      style: _objectSpread(_objectSpread({}, (_cardProps$active3 = cardProps.active) === null || _cardProps$active3 === void 0 ? void 0 : _cardProps$active3.style), {}, {
                        color: '#000000',
                        background: '#ffffff'
                      })
                    })
                  }));
                },
                onClick: function onClick() {
                  setExpand(function (prev) {
                    return _objectSpread(_objectSpread({}, prev), {}, {
                      level2: !prev.level2
                    });
                  });
                }
              }));
            }

            // Level 2 普通项
            return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, level2ItemProps, {
              card: function card(cardProps) {
                var _cardProps$active4;
                return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, cardProps, {
                  text: level2ItemData.name,
                  variant: "outlined",
                  widthMode: "fixed",
                  textConfig: {
                    textAlign: 'center',
                    color: '#FFF',
                    maxLines: 2,
                    ellipsis: true
                  },
                  style: {
                    height: level2Config.cardHeight,
                    borderRadius: '8px',
                    background: 'rgba(0, 0, 0, 0.50)'
                  },
                  width: level2Config.cardWidth,
                  active: _objectSpread(_objectSpread({}, cardProps.active), {}, {
                    style: _objectSpread(_objectSpread({}, (_cardProps$active4 = cardProps.active) === null || _cardProps$active4 === void 0 ? void 0 : _cardProps$active4.style), {}, {
                      color: '#000000',
                      background: '#ffffff'
                    })
                  })
                }));
              },
              panel: function panel(level2PanelProps) {
                var _level2PanelProps$dat;
                if (!(level2PanelProps !== null && level2PanelProps !== void 0 && (_level2PanelProps$dat = level2PanelProps.dataSource) !== null && _level2PanelProps$dat !== void 0 && (_level2PanelProps$dat = _level2PanelProps$dat.children) !== null && _level2PanelProps$dat !== void 0 && _level2PanelProps$dat.length) || maxLevel < 3) {
                  return null;
                }

                // 渲染 Level 3
                var level3Data = addDataSourceItemsByKey(level2PanelProps.dataSource.children, LEVEL_ADD_ITEMS.level3);
                return /*#__PURE__*/React.createElement(SuperTabs, {
                  id: "sku-list-tabbar-".concat(level2PanelProps.dataSource.id),
                  tabItemStyle: {},
                  dataSource: level3Data,
                  value: String(activeKey[2]),
                  onChange: function onChange(key) {
                    setActiveKey(2, key);
                  },
                  rowKey: "id",
                  style: {
                    flex: 1,
                    background: level3Config.superTabsBg
                  },
                  gridProps: {
                    direction: 'horizontal',
                    gap: 4,
                    wrap: expand.level3 ? 'wrap' : 'nowrap',
                    startSlot: /*#__PURE__*/React.createElement("div", {
                      style: {
                        paddingLeft: level3Config.paddingLeft
                      }
                    }, /*#__PURE__*/React.createElement(Iconfont, {
                      type: "pisell2-trend-down-01",
                      style: {
                        color: '#fff',
                        fontSize: 24,
                        marginRight: 8
                      }
                    }))
                  },
                  scrollViewProps: {
                    style: {
                      padding: '4px 8px'
                    },
                    overflow: !expand.level3 ? 'x' : 'hidden',
                    scrollbarStyle: 'none',
                    scrollActionsConfig: {
                      type: 'lrArrows',
                      show: true
                    }
                  },
                  renderItem: function renderItem(level3ItemProps) {
                    var level3ItemData = level3ItemProps.dataSource;

                    // Level 3 展开按钮
                    if (level3ItemData !== null && level3ItemData !== void 0 && level3ItemData.customClick) {
                      var _isExpanded = expand.level3;
                      var _text2 = expandConfig[_isExpanded ? 'active' : 'inactive'].text;
                      var _icon2 = expandConfig[_isExpanded ? 'active' : 'inactive'].icon;
                      return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, level3ItemProps, {
                        card: function card(cardProps) {
                          var _cardProps$active5;
                          return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, cardProps, {
                            text: _text2,
                            variant: "outlined",
                            widthMode: "fixed",
                            prefixIcon: /*#__PURE__*/React.createElement(Iconfont, {
                              type: expandConfig[_isExpanded ? 'active' : 'inactive'].icon,
                              style: {
                                color: '#fff',
                                fontSize: 20
                              }
                            }),
                            textConfig: {
                              textAlign: 'center',
                              color: '#FFF',
                              flex: 'none'
                            },
                            style: {
                              borderRadius: '8px',
                              background: 'rgba(0, 0, 0, 0.50)',
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              height: level3Config.cardHeight
                            },
                            width: level3Config.cardWidth,
                            active: _objectSpread(_objectSpread({}, cardProps.active), {}, {
                              style: _objectSpread(_objectSpread({}, (_cardProps$active5 = cardProps.active) === null || _cardProps$active5 === void 0 ? void 0 : _cardProps$active5.style), {}, {
                                color: '#000000',
                                background: '#ffffff'
                              })
                            })
                          }));
                        },
                        onClick: function onClick() {
                          setExpand(function (prev) {
                            return _objectSpread(_objectSpread({}, prev), {}, {
                              level3: !prev.level3
                            });
                          });
                        }
                      }));
                    }

                    // Level 3 普通项
                    return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, level3ItemProps, {
                      card: function card(cardProps) {
                        var _cardProps$active6;
                        return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, cardProps, {
                          text: level3ItemData.name,
                          variant: "outlined",
                          widthMode: "fixed",
                          textConfig: {
                            textAlign: 'center',
                            color: '#FFF',
                            maxLines: 2,
                            ellipsis: true
                          },
                          style: {
                            height: level3Config.cardHeight,
                            borderRadius: '8px',
                            background: 'rgba(0, 0, 0, 0.50)'
                          },
                          width: level3Config.cardWidth,
                          active: _objectSpread(_objectSpread({}, cardProps.active), {}, {
                            style: _objectSpread(_objectSpread({}, (_cardProps$active6 = cardProps.active) === null || _cardProps$active6 === void 0 ? void 0 : _cardProps$active6.style), {}, {
                              color: '#000000',
                              background: '#ffffff'
                            })
                          })
                        }));
                      },
                      panelContainer: function panelContainer() {
                        return document.querySelector(".pisell-super-tabs-slot-bottom-sku-list-tabbar-".concat(level2PanelProps.dataSource.id));
                      }
                    }));
                  }
                });
              },
              panelContainer: function panelContainer() {
                return document.querySelector(".pisell-super-tabs-slot-bottom-sku-list-tabbar-".concat(panelProps.dataSource.id));
              }
            }));
          }
        });
      },
      panelContainer: function panelContainer() {
        return document.querySelector('.pisell-super-tabs-slot-bottom-sku-list-tabbar');
      }
    }));
  };

  // ========== 渲染 ==========

  return dataSource.length ? /*#__PURE__*/React.createElement("div", {
    className: classNames('pisell-tabbar', className),
    style: style
  }, /*#__PURE__*/React.createElement(SuperTabs, {
    id: "sku-list-tabbar",
    tabItemStyle: {},
    dataSource: level1DataSource,
    value: String(activeKey[0]),
    onChange: function onChange(key, item) {
      var _item$children2;
      setActiveKey(0, key, item !== null && item !== void 0 && (_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length ? 0 : undefined);
    },
    rowKey: "id",
    style: {
      flex: 1,
      background: level1Config.superTabsBg
    },
    gridProps: {
      direction: 'horizontal',
      gap: 4,
      wrap: expand.level1 ? 'wrap' : 'nowrap'
    },
    scrollViewProps: {
      style: {
        padding: '4px 8px'
      },
      overflow: !expand.level1 ? 'x' : 'hidden',
      scrollbarStyle: 'none',
      scrollActionsConfig: {
        type: 'lrArrows',
        show: true
      }
    },
    renderItem: renderLevel1Item
  })) : null;
};
PisellTabbar.displayName = 'PisellTabbar';
export default PisellTabbar;