const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
const search = createApp({
    setup() {
        const musicData = ref([
            ["A组 世界在转动.MP3", "A组《来吧，占领我的无私》.MP3"],
            ["B组 《远方》.MP3", "B组 大闹天宫.MP3", "B组 下一站旅行.MP3"],
            ["C组 旧唱片.MP3", "C组 梅雨季.MP3", "C组 尊重成长共赢.MP3", "C组《弥留》.MP3"],
        ]);

        let step = ref(null); // null 是未开始 0 是第一题
        let detailsHeight = ref(500)
        const detailsRef = ref(null)

        let isAnswer = ref(false)

        onMounted(() => {
            console.log("init");
            init();

            console.log("detailsRef", detailsRef.value);

            const searchParams = new URLSearchParams(window.location.search);
            isAnswer.value = searchParams.has('answer') ? true : false;

            nextTick(() => {
                if (detailsRef.value) {
                    detailsHeight.value = detailsRef.value.clientHeight
                    console.log(detailsHeight.value);
                }
            })

        });

        const init = () => {
            musicData.value.forEach((item) => {
                item.sort(() => Math.random() - 0.5);
            });

            console.log(musicData.value);
        };

        const begin = () => {
            step.value = 0;
        };

        // 添加一个方法来切换到下一题
        const nextStep = () => {
            step.value++;
        };
        const audioPlayer = ref(null)
        const audiozSrc = ref("")


        const play = (item) => {
            console.log("item", item);
            audioPlayer.value.src = './static/mp3/guess/' + item
            audioPlayer.value.play()

            audiozSrc.value = item
        };

        const stop = () => {
            audioPlayer.value.pause()
            audiozSrc.value = ""
        }

        const playSucceed = () => {
            audioPlayer.value.src = './static/mp3/guess/succeed.mp3'
            audioPlayer.value.play()
        }
        const playLose = () => {
            audioPlayer.value.src = './static/mp3/guess/lose.mp3'
            audioPlayer.value.play()
        }

        const audioEnd = () => {
            console.log("结束");

            audiozSrc.value = ""
        }

        const select = (item, index) => {
            stop()
            if (item.indexOf("《") !== -1) {
                playSucceed()
                if (step.value == musicData.value.length - 1) {
                    winState.value = true
                } else {
                    replyState.value = true
                    autoSkip()
                }
            } else {
                loseState.value = true
                playLose()
            }
        }

        let replyState = ref(false)
        let winState = ref(false)
        let loseState = ref(false)

        const autoSkip = () => {
            setTimeout(() => {
                replyState.value = false
                nextStep()
            }, 2000)
        }

        const backHome = () => {
            step.value = null
            replyState.value = false
            winState.value = false
            loseState.value = false
        }



        return { isAnswer, detailsHeight, detailsRef, audioEnd, playSucceed, stop, audiozSrc, audioPlayer, backHome, select, loseState, winState, replyState, play, step, begin, musicData, nextStep };
    },
}).mount("#guess");