<script setup>
const visible = defineModel('visible');
const model = defineModel('model');
const emits = defineEmits(['success', 'init']);
import {watch, ref} from "vue";

const XFilterRef = ref();
const init = () => {
    Object.keys(model.value).forEach(key => {
        model.value[key] = null;
    });
    emits('init');
    success();
}

const success = () => {
    visible.value = false;
    emits('success');
}

watch(
    () => visible.value,
    (val) => {
        const node = XFilterRef.value.$el.nextElementSibling.childNodes[2];
        console.log(node);
        if (val) {
            node.style.transform = 'none';
        } else {
            node.style.transform = 'translate3d(0, -100%, 0)';
        }
    },
    {deep: true}
)
</script>

<template>
    <tui-drawer
        ref="XFilterRef"
        mode="top"
        maskZIndex="999"
        zIndex="999"
        @close="visible=false"
        :visible="visible">
        <view class="!pt-[100rpx] !p-[32rpx]">
            <slot></slot>
            <view class="!flex gap-[24rpx] !mt-[24rpx]">
                <tui-button height="88rpx" plain @click="init">重置</tui-button>
                <tui-button height="88rpx" @click="success">确定</tui-button>
            </view>
        </view>
    </tui-drawer>
</template>

<style scoped>

</style>
