<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <view>
    <view id="lottieContainer" class="box"></view>
    <button @click="show = !show">Solana Wallet</button>
    <Dialog :showValue="show"></Dialog>
  </view>
</template>
<script setup lang="ts">
import lottie from 'lottie-web'
import animationData from '@/static/Animation.json'
import Dialog from '@/components/common/Dialog/index.vue'

const containerRef = ref(null)
const show = ref(false)

onShow(() => {
  nextTick(() => {
    const query = uni.createSelectorQuery()
    query
      .select('#lottieContainer')
      .boundingClientRect((rect) => {
        if (rect) {
          lottie.loadAnimation({
            container: document.getElementById('lottieContainer'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            animationData,
          })
        } else {
          console.error('Container element not found')
        }
      })
      .exec()
  })
})
</script>

<style lang="scss" scoped>
.box {
  width: 690rpx;
  height: 500rpx;
  overflow: hidden; /* 如果动画超出容器大小，确保它不会溢出 */
}
</style>
