<template>
    <div class="v-content-expand">
       <div class="v-content-expand-content" :style="{'max-height':(expand?'':maxHeight+'px')}">
            <div class="v-content-expand-container">
                <slot></slot>
            </div>
        </div>
        <div class="v-content-expand-footer" :class="(isOverHeight?'':'v-content-expand-hidden')">
            <input type="button" :class="[(expand?'v-content-expand-btn-packup':'v-content-expand-btn-expand')]" v-on:click="toggleButtonState()"/>
        </div>
    </div>
</template>

<script>
    export default{
        name:'v-content-expand',
        props: {
            maxHeight: [Number]
        },
        computed: {
            
        },
        data(){
            return {
                expand:false,
                isOverHeight:false,
                cache_outerHTML:''
            }
        },
        methods:{
            toggleButtonState(){
                this.expand=!this.expand;
            },

            refresh(){
                var container=this.$el.querySelector(".v-content-expand-container");
                var height=container.clientHeight;
                if(height > this.maxHeight){
                    this.isOverHeight=true;
                }else{
                     this.isOverHeight=false;
                }

            }
        },
        mounted(){
            this.cache_outerHTML=this.$el.querySelector(".v-content-expand-container").outerHTML;
        },
        beforeUpdate(){
            
        },
        updated(){
            //vue的update机制有问题，这里最好通过outerHtml检测组件更新：https://github.com/vuejs/vue/issues/5727
            this.cache_outerHTML=this.$el.querySelector(".v-content-expand-container").outerHTML;
        },
        watch: {
            'cache_outerHTML': function (newVal) {
                this.refresh();
            }
        }
    }
</script>