<script setup>
import {ref} from "vue";

const show = ref(false);
</script>

<template>
    <view class="relative z-[99]">
        <view @click="show=!show">
            <slot></slot>

            <tui-icon
                :style="{
                    transform: !show ? 'rotate(0deg)' : 'rotate(180deg)'
                }"
                class="absolute top-1/2 -translate-y-1/2 right-[20rpx] duration-300"
                name="arrowdown"
                :size="20">
            </tui-icon>
        </view>

        <transition name="fade">
            <view v-if="show" class="absolute top-[calc(100%+10rpx)] min-w-full bg-[#fff] rounded-[8rpx] x-dropdown-card">
                <slot name="menu"></slot>
            </view>
        </transition>
    </view>

    <view
        v-if="show"
        id="mask"
        @click="show=false"
        class="!w-screen !h-screen !fixed left-0 top-0 z-[999]">
    </view>
</template>

<style lang="scss" scoped>
.x-dropdown-card {
    box-shadow: 0px 2px 20px 5px rgba(0, 0, 0, 0.2);
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 300ms;
    position: absolute;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    position: absolute;
}
</style>
