import { Toast } from 'vant'
import { defineComponent, reactive } from 'vue'
import { Vue3Lottie } from 'vue3-lottie'
import AstronautJSON from '../components/o-full-refresh/datas/data.json'
import baseEvent from '@/base-event'

export default defineComponent({
  name: 'App',
  setup() {
    const state = reactive({
      showToast: false
    })

    baseEvent.on('toastShow', () => {
      state.showToast = true
    })

    baseEvent.on('toastClose', () => {
      state.showToast = false
    })

    return () => (
      <>
        <router-view></router-view>
        <div class={'appRootToast'}>
          <Toast v-model:show={state.showToast} overlay duration={30000}>
            {{
              message: () => (
                <>
                  <Vue3Lottie class={'toastAnimate'} animationData={AstronautJSON}></Vue3Lottie>
                  {/* <p>加载中...</p> */}
                </>
              )
            }}
          </Toast>
        </div>
      </>
    )
  }
})