"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const Cell = require("../cell/Cell.js");
const Collapse = require("../collapse/Collapse.js");
const index_esm = require("../../../@vant/use/dist/index.esm.js");
const useExpose = require("../composables/use-expose.js");
const useLazyRender = require("../composables/use-lazy-render.js");
const index = require("../cell/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("collapse-item");
const CELL_SLOTS = ["icon", "title", "value", "label", "right-icon"];
const collapseItemProps = basic.extend({}, Cell.cellSharedProps, {
  name: props.numericProp,
  isLink: props.truthProp,
  disabled: Boolean,
  readonly: Boolean,
  lazyRender: props.truthProp
});
var stdin_default = Vue.defineComponent({
  name,
  props: collapseItemProps,
  setup(props2, {
    slots
  }) {
    const wrapperRef = Vue.ref();
    const contentRef = Vue.ref();
    const {
      parent,
      index: index$1
    } = index_esm.useParent(Collapse.COLLAPSE_KEY);
    if (!parent) {
      return;
    }
    const name2 = Vue.computed(() => {
      var _a;
      return (_a = props2.name) != null ? _a : index$1.value;
    });
    const expanded = Vue.computed(() => parent.isExpanded(name2.value));
    const show = Vue.ref(expanded.value);
    const lazyRender = useLazyRender.useLazyRender(() => show.value || !props2.lazyRender);
    const onTransitionEnd = () => {
      if (!expanded.value) {
        show.value = false;
      } else if (wrapperRef.value) {
        wrapperRef.value.style.height = "";
      }
    };
    Vue.watch(expanded, (value, oldValue) => {
      if (oldValue === null) {
        return;
      }
      if (value) {
        show.value = true;
      }
      const tick = value ? Vue.nextTick : index_esm.raf;
      tick(() => {
        if (!contentRef.value || !wrapperRef.value) {
          return;
        }
        const {
          offsetHeight
        } = contentRef.value;
        if (offsetHeight) {
          const contentHeight = `${offsetHeight}px`;
          wrapperRef.value.style.height = value ? "0" : contentHeight;
          index_esm.doubleRaf(() => {
            if (wrapperRef.value) {
              wrapperRef.value.style.height = value ? contentHeight : "0";
            }
          });
        } else {
          onTransitionEnd();
        }
      });
    });
    const toggle = (newValue = !expanded.value) => {
      parent.toggle(name2.value, newValue);
    };
    const onClickTitle = () => {
      if (!props2.disabled && !props2.readonly) {
        toggle();
      }
    };
    const renderTitle = () => {
      const {
        border,
        disabled,
        readonly
      } = props2;
      const attrs = basic.pick(props2, Object.keys(Cell.cellSharedProps));
      if (readonly) {
        attrs.isLink = false;
      }
      if (disabled || readonly) {
        attrs.clickable = false;
      }
      return Vue.createVNode(index.Cell, Vue.mergeProps({
        "role": "button",
        "class": bem("title", {
          disabled,
          expanded: expanded.value,
          borderless: !border
        }),
        "aria-expanded": String(expanded.value),
        "onClick": onClickTitle
      }, attrs), basic.pick(slots, CELL_SLOTS));
    };
    const renderContent = lazyRender(() => {
      var _a;
      return Vue.withDirectives(Vue.createVNode("div", {
        "ref": wrapperRef,
        "class": bem("wrapper"),
        "onTransitionend": onTransitionEnd
      }, [Vue.createVNode("div", {
        "ref": contentRef,
        "class": bem("content")
      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]), [[Vue.vShow, show.value]]);
    });
    useExpose.useExpose({
      toggle,
      expanded,
      itemName: name2
    });
    return () => Vue.createVNode("div", {
      "class": [bem({
        border: index$1.value && props2.border
      })]
    }, [renderTitle(), renderContent()]);
  }
});
exports.collapseItemProps = collapseItemProps;
exports.default = stdin_default;
