<template>
    <van-dialog v-model:show="showSuccess" :showConfirmButton="false">
        <div class="py-4">
            <Vue3Lottie ref="successRef" :animationData="AnimationSuccessJSON" :height="200" :width="200"
                @onComplete="onComplete" :speed="speed" :loop="false" />
        </div>
    </van-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import AnimationSuccessJSON from '@/assets/lottie/animation_success.json'
import { Vue3Lottie } from 'vue3-lottie'
const showSuccess = ref(false)
const speed = ref(2)
const successRef = ref()

const onComplete = () => {
    showSuccess.value = false
}
const open = () => {
    if (successRef.value) {
        successRef.value.stop()
        successRef.value.play()
    }

    showSuccess.value = true
}

defineExpose({
    open
})
</script>