<template>
    <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="500px" @ok="handleSubmit">

    </BasicDrawer>
</template>
<script lang="ts">
    import {defineComponent, ref, computed, unref} from 'vue';
    import {BasicDrawer, useDrawerInner} from '/@/components/Drawer';

    export default defineComponent({
        name: 'tableDrawer',
        components: {BasicDrawer},
        emits: ['success', 'register'],
        setup(_, {emit}) {
            const isUpdate = ref(true);
            const [registerDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
                setDrawerProps({confirmLoading: false});
                isUpdate.value = !!data?.isUpdate;
            });

            const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));

            async function handleSubmit() {
                try {
                    setDrawerProps({confirmLoading: true});
                    closeDrawer();
                    emit('success');
                } finally {
                    setDrawerProps({confirmLoading: false});
                }
            }

            return {
                registerDrawer,
                getTitle,
                handleSubmit
            };
        },
    });
</script>
