<template>
    <view class="disclaimer-trigger" @click="openModal">
        <slot></slot>
    </view>
    <view v-if="show" class="disclaimer-container">
        <view
            class="disclaimer-mask"
            :class="animate"
            @click="closeModal"
        ></view>
        <view class="disclaimer-content" :class="animate">
            <view class="text-center text-xl font-medium">
                免责声明
            </view>
            <view class="py-[30rpx]">{{ content }}</view>
            <view class="mt-[20rpx]">
                <u-button
                    type="primary"
                    :custom-style="{
                        height: '82rpx',
                        fontSize: '30rpx',
                        margin: '0'
                    }"
                    shape="circle"
                    @click.stop="closeModal"
                >
                    确认
                </u-button>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = withDefaults(
    defineProps<{
        content?: any
    }>(),
    {
        content: ''
    }
)

const show = ref<boolean>(false)
const animate = ref<string>('unactive-modal')

const openModal = () => {
    show.value = true
    setTimeout(() => { animate.value = 'active-modal' })
}

const closeModal = () => {
    animate.value = 'unactive-modal'
    setTimeout(() => { show.value = false }, 300)
}
</script>

<style lang="scss" scoped>
.disclaimer-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;

    .active-modal {
        opacity: 1;
        transform: scale(1);
    }

    .unactive-modal {
        opacity: 0;
        transform: scale(0);
    }

    .disclaimer-mask {
        position: absolute;
        width: 100%;
        height: 100%;
        transform: scale(1) !important;
        transition: all 0.3s ease-in-out;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .disclaimer-content {
        position: relative;
        width: 70%;
        padding: 30rpx;
        border-radius: 14rpx;
        transition: all 0.3s ease-in-out;
        background-color: #FFFFFF;
    }
}
</style>