<!-- 
    通用组件 ： 抽屉 

    
    父页面使用方式
    <el-button type="primary" @click="act_updateVisibility(true)">打开抽屉</el-button>

    <drawer :isVisible="g_drawerVisible" @update:isVisible="act_updateVisibility">
           
        <template v-slot:title> 标题 </template>

        <template v-slot:content> 内容 </template>
    </drawer>

    <script setup>
    // 引入抽屉组件
    import drawer from '@/components/Common/drawer.vue'
    // 抽屉状态
    const g_drawerVisible = ref(false);
    // 修改抽屉状态
    const act_updateVisibility = (newValue) => {
        g_drawerVisible.value = newValue
    }
    </script>

-->


<template>

    <el-drawer v-model="visible" :title="title" :show-close="true" :size="size" :before-close="CloseCallback"
        :destroy-on-close="true">
        <!-- 内容区域 -->
        <slot name="content">

        </slot>
    </el-drawer>

</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, watch, defineEmits, defineProps } from 'vue'
import { ElButton, ElDrawer } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'



/**
 * 接收的props定义
 * @property {Boolean} isVisible - 控制组件可见性的布尔值
 */
const props = defineProps({
    isVisible: Boolean,
    title: String,
    size: String,
    CloseCallback: Function,
})


/**
 * 定义emit函数，用于向父组件发送事件
 * @property {'update:isVisible'} - 更新可见性的事件名
 */
const emit = defineEmits(['update:isVisible'])


// 使用ref创建一个响应式变量，初始值为props.isVisible
const visible = ref(props.isVisible)


// 监听props.isVisible的变化，更新visible的值
watch(() => props.isVisible, (newVal) => {
    visible.value = newVal
})


// 监听visible的变化，更新props.isVisible的值
watch(visible, (newVal) => {
    emit('update:isVisible', newVal)
})


/**
 * 处理关闭逻辑
 * 更新visible值为false，并向父组件emit一个更新可见性的事件
 */
const handleClose = () => {
    visible.value = false
    emit('update:isVisible', false)
}
</script>

<style>
.el-drawer__body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}
</style>
<style scoped>
.el-icon--left {
    margin-right: 8px;
}
</style>