import { defineComponent, onBeforeUnmount, ref } from "vue"
import { Vue3Lottie } from "vue3-lottie";
import styles from "./index.module.less"
import state from "/src/state"
import fly from "./imgs/fly.json"
import stilln from "./imgs/stilln.json"
import note from "./imgs/note.json"

export default defineComponent({
    name: "Bird",
    setup() {
        const vue3LottieDom = ref()
        const vue3Lottie1Dom = ref()
        const vue3Lottie2Dom = ref()
        onBeforeUnmount(()=>{
            vue3LottieDom.value?.destroy()
            vue3Lottie1Dom.value?.destroy()
            vue3Lottie2Dom.value?.destroy()
        })
        return () => <>
                <Vue3Lottie ref={vue3LottieDom} style={ { display : state.playState === "paused" ? "" : "none" } } key={1} class={styles.brid} animationData={stilln} autoPlay={true} loop={true}></Vue3Lottie>
                <>
                    <Vue3Lottie ref={vue3Lottie1Dom} style={ { display : state.playState === "paused" ? "none" : "" } } key={2} class={styles.brid} animationData={fly} autoPlay={true} loop={true}></Vue3Lottie>
                    <Vue3Lottie ref={vue3Lottie2Dom} style={ { display : state.playState === "paused" ? "none" : "" } } key={2} class={styles.note} animationData={note} autoPlay={true} loop={true}></Vue3Lottie>
                </>
        </>
    }
})
