<template>
    <div class="collapse-item-com" :style="{ marginBottom: marginBottom + 'px' }">
        <div class="title-view" @click="toggle">
            <div class="title-str">
                <slot v-if="$slots.leftIcon" name="leftIcon"></slot>
                <span v-else class="iconfont left-icon" :class="leftIcon"></span>
                <slot v-if="$slots.title" name="title"></slot>
                <span v-else class="title-text">{{ title }}</span>
            </div>
            <slot v-if="$slots.rightIcon" name="rightIcon"></slot>
            <span v-else class="iconfont right-icon" :class="_rightIcon"></span>
        </div>
        <div class="collapse-extra" :style="{ height: isActive ? height + 'px' : '0' }" ref="collapseExtra">
            <slot v-if="$slots.collapseExtra" name="collapseExtra"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CollapseItem',
    props: {
        name: {
            type: String
        },
        title: {
            type: String,
            default: null
        },
        leftIcon: {
            type: String,
            default: null
        },
        rightIcon: {
            type: String,
            default: null
        },
        marginBottom: {
            type: [String, Number]
        }
    },
    data() {
        return {
            index: 0,
            height: 0,
            isActive: false
        }
    },
    computed: {
        _rightIcon() {
            if (this.rightIcon) {
                return this.rightIcon
            } else {
                if (this.isActive) {
                    return 'icon-xiangshang2'
                } else {
                    return 'icon-xiangxia2'
                }
            }
        }
    },
    methods: {
        toggle() {
            this.$parent.toggle({
                name: this.name || this.index,
                isActive: this.isActive
            })
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.height = this.$refs.collapseExtra.childNodes[0].offsetHeight
        })
    }
}
</script>

<style lang="scss" scoped>
.collapse-item-com {
    background-color: #fff;
    .title-view {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #f5f5f5;
        .title-str {
            .left-icon {
                color: #666;
                font-size: 12px;
            }
            .title-text {
                font-size: 16px;
                color: #333;
            }
        }
        .right-icon {
            color: #666;
            font-size: 12px;
        }
    }
    .collapse-extra {
        height: 0;
        will-change: 'height';
        overflow: hidden;
        transition: all 0.2s ease 0s;
    }
}
</style>