import { VantComponent } from "../common/component";
const nextTick = () => new Promise((resolve) => setTimeout(resolve, 20));
VantComponent({
    classes: ["title-class", "content-class"],
    relation: {
        name: "collapse",
        type: "ancestor",
        current: "collapse-item",
    },
    props: {
        name: null,
        title: null,
        value: null,
        icon: String,
        label: String,
        disabled: Boolean,
        clickable: Boolean,
        border: {
            type: Boolean,
            value: true,
        },
        isLink: {
            type: Boolean,
            value: true,
        },
    },
    data: {
        contentHeight: 0,
        expanded: false,
        transition: false,
    },
    mounted() {
        this.updateExpanded()
            .then(nextTick)
            .then(() => {
                const data = { transition: true };
                if (this.data.expanded) {
                    data.contentHeight = "auto";
                }
                this.setData(data);
            });
    },
    methods: {
        updateExpanded() {
            if (!this.parent) {
                return Promise.resolve();
            }
            const { value, accordion } = this.parent.data;
            const { children = [] } = this.parent;
            const { name } = this.data;
            const index = children.indexOf(this);
            const currentName = name == null ? index : name;
            const expanded = accordion ? value === currentName : (value || []).some((name) => name === currentName);
            const stack = [];
            if (expanded !== this.data.expanded) {
                stack.push(this.updateStyle(expanded));
            }
            stack.push(this.set({ index, expanded }));
            return Promise.all(stack);
        },
        updateStyle(expanded) {
            return this.getRect(".van-collapse-item__content")
                .then((rect) => rect.height)
                .then((height) => {
                    if (expanded) {
                        return this.set({
                            contentHeight: height ? `${height}px` : "auto",
                        });
                    }
                    return this.set({ contentHeight: `${height}px` })
                        .then(nextTick)
                        .then(() => this.set({ contentHeight: 0 }));
                });
        },
        onClick() {
            if (this.data.disabled) {
                return;
            }
            const { name, expanded } = this.data;
            const index = this.parent.children.indexOf(this);
            const currentName = name == null ? index : name;
            this.parent.switch(currentName, !expanded);
        },
        onTransitionEnd() {
            if (this.data.expanded) {
                this.setData({
                    contentHeight: "auto",
                });
            }
        },
    },
});