"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const shared_esmBundler = require("../../../@vue/shared/dist/shared.esm-bundler.js");
const Tabs = require("../tabs/Tabs.js");
const index_esm = require("../../../@vant/use/dist/index.esm.js");
const useId = require("../composables/use-id.js");
const useExpose = require("../composables/use-expose.js");
const useRoute = require("../composables/use-route.js");
const useTabStatus = require("../composables/use-tab-status.js");
const TabTitle = require("./TabTitle.js");
const index = require("../swipe-item/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("tab");
const tabProps = basic.extend({}, useRoute.routeProps, {
  dot: Boolean,
  name: props.numericProp,
  badge: props.numericProp,
  title: String,
  disabled: Boolean,
  titleClass: props.unknownProp,
  titleStyle: [String, Object],
  showZeroBadge: props.truthProp
});
var stdin_default = Vue.defineComponent({
  name,
  props: tabProps,
  setup(props2, {
    slots
  }) {
    const id = useId.useId();
    const inited = Vue.ref(false);
    const instance = Vue.getCurrentInstance();
    const {
      parent,
      index: index$1
    } = index_esm.useParent(Tabs.TABS_KEY);
    if (!parent) {
      return;
    }
    const getName = () => {
      var _a;
      return (_a = props2.name) != null ? _a : index$1.value;
    };
    const init = () => {
      inited.value = true;
      if (parent.props.lazyRender) {
        Vue.nextTick(() => {
          parent.onRendered(getName(), props2.title);
        });
      }
    };
    const active = Vue.computed(() => {
      const isActive = getName() === parent.currentName.value;
      if (isActive && !inited.value) {
        init();
      }
      return isActive;
    });
    const parsedClass = Vue.ref("");
    const parsedStyle = Vue.ref("");
    Vue.watchEffect(() => {
      const {
        titleClass,
        titleStyle
      } = props2;
      parsedClass.value = titleClass ? shared_esmBundler.normalizeClass(titleClass) : "";
      parsedStyle.value = titleStyle && typeof titleStyle !== "string" ? shared_esmBundler.stringifyStyle(shared_esmBundler.normalizeStyle(titleStyle)) : titleStyle;
    });
    const renderTitle = (onClickTab) => Vue.createVNode(TabTitle.TabTitle, Vue.mergeProps({
      "key": id,
      "id": `${parent.id}-${index$1.value}`,
      "ref": parent.setTitleRefs(index$1.value),
      "style": parsedStyle.value,
      "class": parsedClass.value,
      "isActive": active.value,
      "controls": id,
      "scrollable": parent.scrollable.value,
      "activeColor": parent.props.titleActiveColor,
      "inactiveColor": parent.props.titleInactiveColor,
      "onClick": (event) => onClickTab(instance.proxy, index$1.value, event)
    }, basic.pick(parent.props, ["type", "color", "shrink"]), basic.pick(props2, ["dot", "badge", "title", "disabled", "showZeroBadge"])), {
      title: slots.title
    });
    const hasInactiveClass = Vue.ref(!active.value);
    Vue.watch(active, (val) => {
      if (val) {
        hasInactiveClass.value = false;
      } else {
        index_esm.doubleRaf(() => {
          hasInactiveClass.value = true;
        });
      }
    });
    Vue.watch(() => props2.title, () => {
      parent.setLine();
      parent.scrollIntoView();
    });
    useTabStatus.useProvideTabStatus(active);
    useExpose.useExpose({
      id,
      renderTitle
    });
    return () => {
      var _a;
      const label = `${parent.id}-${index$1.value}`;
      const {
        animated,
        swipeable,
        scrollspy,
        lazyRender
      } = parent.props;
      if (!slots.default && !animated) {
        return;
      }
      const show = scrollspy || active.value;
      if (animated || swipeable) {
        return Vue.createVNode(index.SwipeItem, {
          "id": id,
          "role": "tabpanel",
          "class": bem("panel-wrapper", {
            inactive: hasInactiveClass.value
          }),
          "tabindex": active.value ? 0 : -1,
          "aria-hidden": !active.value,
          "aria-labelledby": label,
          "data-allow-mismatch": "attribute"
        }, {
          default: () => {
            var _a2;
            return [Vue.createVNode("div", {
              "class": bem("panel")
            }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])];
          }
        });
      }
      const shouldRender = inited.value || scrollspy || !lazyRender;
      const Content = shouldRender ? (_a = slots.default) == null ? void 0 : _a.call(slots) : null;
      return Vue.withDirectives(Vue.createVNode("div", {
        "id": id,
        "role": "tabpanel",
        "class": bem("panel"),
        "tabindex": show ? 0 : -1,
        "aria-labelledby": label,
        "data-allow-mismatch": "attribute"
      }, [Content]), [[Vue.vShow, show]]);
    };
  }
});
exports.default = stdin_default;
exports.tabProps = tabProps;
