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,
      showToastCenter: false
    })

    baseEvent.on('toastShow', (type?: string) => {
      if (type === 'center') {
        state.showToastCenter = true
      }
      state.showToast = true
    })

    baseEvent.on('toastClose', (type?: string) => {
      state.showToast = false
      if (type === 'center') {
        setTimeout(() => {
          state.showToastCenter = false
        }, 300)
      }
    })
    // 查看状态
    baseEvent.on('toastStatus', () => {
      return state.showToast
    })

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