<!--
 * @Author: Fly
 * @Date: 2025-12-10 16:47:29
 * @LastEditTime: 2025-12-25 17:33:00
 * @Description: 
-->
<template>
    <el-drawer :wrapperClosable="wrapperClosable" append-to-body :visible.sync="DrawerVisible" v-bind="$attrs">
        <template v-if="skeleton">
            <div class="padd-box">
                <el-skeleton animated :rows="skeletonRows" />
            </div>
        </template>
        <template v-else>
            <div class="drawer-content-box">
                <div class="drawer-content padd-box">
                    <slot name="default" />
                </div>
                <template v-if="showFooter">
                    <div class="drawer-footer padd-box">
                        <slot name="footer" />
                    </div>
                </template>
            </div>
        </template>

    </el-drawer>
</template>

<script>
export default {
    name: 'drawer-components',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        skeleton: {
            type: Boolean,
            default: false,
        },
        skeletonRows: {
            type: Number,
            default: 4,
        },
        showFooter: {
            type: Boolean,
            default: false,
        },
        wrapperClosable: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            DrawerVisible: false
        };
    },

    watch: {
        visible: {
            handler(val) {
                this.DrawerVisible = this.visible
            },
            immediate: true
        },
        DrawerVisible: {
            handler(val) {
                if (this.DrawerVisible !== this.visible) {
                    this.$emit('update:visible', this.DrawerVisible)
                }

            },
            immediate: true
        }
    },

};
</script>

<style lang='scss' scoped>
$padding: 20px;

.padd-box {
    padding: $padding ;
}

.drawer-content-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .drawer-content {
        flex: 1 0;
        overflow: hidden;
        overflow-y: auto;
        padding-top: 0;
    }

    .drawer-footer {
        flex-shrink: 0;
    }
}
</style>