<template>
    <div class="visual-dl-expand-panel">
        <h3
            class="visual-dl-expand-head"
            @click="isShow = !isShow"
        >
            <span>{{title}}</span>
            <span class="visual-dl-expand-head-info">
                <v-icon class="visual-dl-expand-head-arrow" size="20">{{iconName}}</v-icon>
                <span class="visual-dl-expand-head-num">({{info}})</span>
            </span>
        </h3>
        <div
            v-if="isShow"
            class="visual-dl-expand-panel-content"
        >
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        title: String,
        info: Number
    },
    computed: {
        iconName() {
            return this.isShow ? 'expand_less' : 'expand_more';
        }
    },
    data() {
        return {
            isShow: true
        };
    }
};
</script>
<style lang="stylus">
    .visual-dl-expand-panel
        .visual-dl-expand-head
            border solid 1px #ccc
            line-height 50px
            height 50px
            padding 0 20px
            cursor pointer
            position relative
            .visual-dl-expand-head-info
                position absolute
                left 90%
                .visual-dl-expand-head-arrow
                    vertical-align middle
                .visual-dl-expand-head-num
                    line-height 20px
                    font-size 12px
                    font-weight normal
        .visual-dl-expand-panel-content
            padding 0 20px
        .visual-dl-expand-panel-content:after
            content: "";
            clear: both;
            display: block;
</style>


