<template>
	<view :class="'custom-class van-collapse '+(border ? 'van-hairline--top-bottom' : '')">
		<slot></slot>
	</view>
</template>

<script>
export default {
    data() {
		return {
			name: 'collapse-item',
			type: 'descendant',
			current: 'collapse',
		}
	},
    props: {
        value: {
            type: null,
        },
        accordion: {
            type: Boolean,
        },
        border: {
            type: Boolean,
            value: true
        }
    },
	watch: {
		value: function() {
			this.updateExpanded()
		},
		accordion: function() {
			this.updateExpanded()
		},
	},
	mounted() {
		this.updateExpanded()
	},
    methods: {
        updateExpanded: function () {
            this.$children.forEach(function (child) {
				console.log(child)
                child.updateExpanded();
            });
        },
        switch: function (name, expanded) {
            var _a = this, accordion = _a.accordion, value = _a.value;
            if (!accordion) {
                name = expanded
                    ? (value || []).concat(name)
                    : (value || []).filter(function (activeName) { return activeName !== name; });
            }
            else {
                name = expanded ? name : '';
            }
            this.$emit('change', name);
            this.$emit('input', name);
        }
    }
}
</script>
<style>
@import '../common/index.css';
</style>