"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _lowcodeMaterials = require("@alilc/lowcode-materials");
require("./index.scss");
var _excluded = ["itemArray", "selectedColor", "onClick", "__designMode"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var Navigation = function BottomNavigation(_ref) {
  var itemArray = _ref.itemArray,
    selectedColor = _ref.selectedColor,
    onClick = _ref.onClick,
    __designMode = _ref.__designMode,
    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
  var _useState = (0, _react.useState)(0),
    activeNum = _useState[0],
    setActiveNum = _useState[1];
  var clickHandle = function clickHandle(index, pageId) {
    // 更新激活tab
    setActiveNum(index);
    if (__designMode == 'design') {
      // 设计态不执行跳转
      return;
    }
    console.log('clickHandle', pageId);
    onClick(pageId);
  };
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
    className: "bottom-navigation"
  }, otherProps), /*#__PURE__*/React.createElement("div", {
    className: "navigation-panel"
  }, itemArray.map(function (item, index) {
    var _item$selectedIcon;
    return /*#__PURE__*/React.createElement("div", {
      className: "navigation-panel-item",
      onClick: function onClick() {
        return clickHandle(index, item.pageId);
      },
      style: {
        color: activeNum === index ? selectedColor !== null && selectedColor !== void 0 ? selectedColor : '#4598FF' : '',
        fontWeight: activeNum === index ? "bold" : "500"
      }
    }, /*#__PURE__*/React.createElement(_lowcodeMaterials.Image, {
      className: "navigation-item-image",
      src: activeNum === index ? (_item$selectedIcon = item.selectedIcon) !== null && _item$selectedIcon !== void 0 ? _item$selectedIcon : item.icon : item.icon,
      style: {
        width: '24.5px',
        height: '24.5px'
      }
    }), /*#__PURE__*/React.createElement("span", {
      style: {
        fontSize: "12px"
      }
    }, item.text));
  })));
};
var _default = exports["default"] = Navigation;