<template>
    <div style="height: 100%;position: relative;" @mouseover="isMouseIn=true" @mouseleave="isMouseIn=false">
        <el-aside class="su-aside" :style="style">
                <slot></slot>
        </el-aside>
        <transition name="fade">
            <slide-btn @change="foldChange" :is-collapse="isCollapse" v-if="slideBtn" v-show="isMouseIn || !show"></slide-btn>
        </transition>
    </div>
</template>

<script>
import slideBtn from "./slide-btn"

export default {
    name: "su-aside",
    components: {
        slideBtn
    },
    data() {
        return {
            show: true,
            isMouseIn: false,
        }
    },
    props: {
        isCollapse: {
            type: Boolean,
            default: false,//是否折叠菜单 64px 200px
        },
        slideBtn:{
            type: Boolean,
            default: true,
        }
    },
    computed: {
        style() {
            return {
                height:"100%",
                width: `${
                    this.show ? this.isCollapse ? "64px" : 'auto'//:'200px'
                        : '0'} !important`,
                transition: `width 0.3s`
            }
        }
    },
    methods: {
        foldChange(show) {
            this.show = show;
        }
    }
}
</script>

<style scoped lang="less">
.su-aside {
}
.fade-enter-active,
.fade-leave-active {
    transition: 0.8s;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}
.fade-enter-to, .fade-leave {
    opacity: 1;
}
</style>
