import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["selectedBGColor", "selectedFontColor", "size", "onClickHandle", "unreadCount"];
import * as React from 'react';
import "./index.scss";
var Tab = function Tab(_ref) {
  var selectedBGColor = _ref.selectedBGColor,
    selectedFontColor = _ref.selectedFontColor,
    size = _ref.size,
    onClickHandle = _ref.onClickHandle,
    unreadCount = _ref.unreadCount,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var tabList = [{
    key: [0, 1],
    label: '全部'
  }, {
    key: [1],
    label: '已读'
  }, {
    key: [0],
    label: '未读'
  }];
  var _React$useState = React.useState([0, 1]),
    tab = _React$useState[0],
    setTab = _React$useState[1];
  var handleClick = function handleClick(key) {
    console.log(key);
    // 切换tab
    setTab(key);
    // 触发父组件传递的点击处理函数
    onClickHandle && onClickHandle(key);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "tab-message"
  }, tabList.map(function (item) {
    return /*#__PURE__*/React.createElement("span", _extends({
      className: "tabs__container\n         " + (tab.toString() === item.key.toString() ? 'tabs__container--selected' : '') + "\n         " + (size == 'large' ? 'tabs__container--large' : 'tabs__container--small')
    }, otherProps, {
      onClick: function onClick() {
        return handleClick(item.key);
      },
      style: {
        backgroundColor: tab.toString() === item.key.toString() ? selectedBGColor : '',
        color: tab.toString() === item.key.toString() ? selectedFontColor : ''
      }
    }), item.label, item.key.toString() === '0' && unreadCount > 0 && /*#__PURE__*/React.createElement("span", {
      className: "badge"
    }, unreadCount) // 条件渲染badge
    );
  }));
};
export default Tab;