"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const Tabbar = require("../tabbar/Tabbar.js");
const index_esm = require("../../../@vant/use/dist/index.esm.js");
const useRoute = require("../composables/use-route.js");
const index$1 = require("../icon/index.js");
const index = require("../badge/index.js");
const basic = require("../utils/basic.js");
const create = require("../utils/create.js");
const props = require("../utils/props.js");
const [name, bem] = create.createNamespace("tabbar-item");
const tabbarItemProps = basic.extend({}, useRoute.routeProps, {
  dot: Boolean,
  icon: String,
  name: props.numericProp,
  badge: props.numericProp,
  badgeProps: Object,
  iconPrefix: String
});
var stdin_default = Vue.defineComponent({
  name,
  props: tabbarItemProps,
  emits: ["click"],
  setup(props2, {
    emit,
    slots
  }) {
    const route = useRoute.useRoute();
    const vm = Vue.getCurrentInstance().proxy;
    const {
      parent,
      index: index$2
    } = index_esm.useParent(Tabbar.TABBAR_KEY);
    if (!parent) {
      return;
    }
    const active = Vue.computed(() => {
      var _a;
      const {
        route: route2,
        modelValue
      } = parent.props;
      if (route2 && "$route" in vm) {
        const {
          $route
        } = vm;
        const {
          to
        } = props2;
        const config = basic.isObject(to) ? to : {
          path: to
        };
        return $route.matched.some((val) => {
          const pathMatched = "path" in config && config.path === val.path;
          const nameMatched = "name" in config && config.name === val.name;
          return pathMatched || nameMatched;
        });
      }
      return ((_a = props2.name) != null ? _a : index$2.value) === modelValue;
    });
    const onClick = (event) => {
      var _a;
      if (!active.value) {
        parent.setActive((_a = props2.name) != null ? _a : index$2.value, route);
      }
      emit("click", event);
    };
    const renderIcon = () => {
      if (slots.icon) {
        return slots.icon({
          active: active.value
        });
      }
      if (props2.icon) {
        return Vue.createVNode(index$1.Icon, {
          "name": props2.icon,
          "classPrefix": props2.iconPrefix
        }, null);
      }
    };
    return () => {
      var _a;
      const {
        dot,
        badge
      } = props2;
      const {
        activeColor,
        inactiveColor
      } = parent.props;
      const color = active.value ? activeColor : inactiveColor;
      return Vue.createVNode("div", {
        "role": "tab",
        "class": bem({
          active: active.value
        }),
        "style": {
          color
        },
        "tabindex": 0,
        "aria-selected": active.value,
        "onClick": onClick
      }, [Vue.createVNode(index.Badge, Vue.mergeProps({
        "dot": dot,
        "class": bem("icon"),
        "content": badge
      }, props2.badgeProps), {
        default: renderIcon
      }), Vue.createVNode("div", {
        "class": bem("text")
      }, [(_a = slots.default) == null ? void 0 : _a.call(slots, {
        active: active.value
      })])]);
    };
  }
});
exports.default = stdin_default;
exports.tabbarItemProps = tabbarItemProps;
