<template>
    <el-drawer v-model="drawer" :destroy-on-close="true" :direction="direction" size="50%" @close="handleClose">
        <template #header>
            <h4>商品選擇</h4>
        </template>
        <template #default>
            <div>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="User" name="first" />
                    <el-tab-pane label="Config" name="second" />
                    <el-tab-pane label="Role" name="third" />
                    <el-tab-pane label="Task" name="fourth" />
                </el-tabs>
                <div>
                    --- {{ drawer }} ---
                </div>
            </div>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelClick">cancel</el-button>
                <el-button type="primary" @click="confirmClick">confirm</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
});

console.log('prop', props.visible)

const emit = defineEmits(["update:visible"]);

const loading = ref(false);
const direction = ref("rtl");

const drawer = computed({
    get: () => {
        return props.visible
    }, set: (value) => {
        emit("update:visible",value)
        return value
    }
})

const activeName = ref('')

const handleClose = () => {
    drawer.value = false
}

const handleClick = () => {

}

const confirmClick = () => {

}

const cancelClick = () => {

}

</script>