<template>
    <div :class="prefixCls">
        <div 
            :class="`${prefixCls}-title`" 
            @click="handleCollapse">
            <div :class="`${prefixCls}-title-content`">
                <slot name="title"></slot>
            </div>
            <span :class="`${prefixCls}-icon`">
                <Icon :type="isCollapse ? 'arrow-up' : 'arrow-down'"/>
            </span>
        </div>
        <CollapseTransition>
            <div 
                v-show="isCollapse"
                :class="`${prefixCls}-content`">
                <slot name="content"></slot>
            </div>
        </CollapseTransition>
    </div>
</template>
<script>
    import CollapseTransition from '../common/collapse-transition'
    import Icon from '../icon/'

    const prefixCls = 'yy-collapse'
    /**
     * @displayName Collapse
     */
    export default {
        name: 'YYCollapse',
        components: {
            CollapseTransition,
            Icon
        },
        props: {
            defaultCollapse: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                prefixCls: prefixCls,
                isCollapse: this.defaultCollapse
            }
        },
        methods: {
            handleCollapse() {
                this.isCollapse = !this.isCollapse
                this.$emit('on-collapse', this.isCollapse)
            }
        }
    }
</script>
