<template>
    <div id="Chapter1_1" class="content-wrap">
        <div style="margin: 30px 0px 50px; width: 20%">
            <router-link to="/MyPlan.page">
                <div class="logo mb25">
                    <img src="../../../../resources/img/logo2.png" alt="" />
                </div>
            </router-link>
        </div>
        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
            <div>
                <span class="title mr40">1. Hello WORLD</span>
                <span class="subtitle">my name is dd</span>
            </div>
            <button class="completeBtn" @click="complete">학습 종료</button>
        </div>
        <div class="flex justify-between align-center">
            <div class="pre-btn" @click="goToPage('Chapter2_13')">
                <img src="../../../../resources/img/left.png" alt="" />
            </div>
            <div class="content title-box">
                ,,,
                <p class="title mt25 title-bg">step3.</p>
                <div class="flex align-center mb30" style="justify-content: space-between">
                    <p class="subtitle2 mr20">알맞은 것을 고르세요.</p>
                </div>

                <div class="flex align-center justify-center" style="margin-top: 9rem; gap: 113px">
                    <div class="time-hint">
                        <button class="hint-btn">HINT</button>
                        <div class="time-bg mt20">
                            <div>
                                <div class="time">
                                    <p class="second">{{ timer }}</p>
                                    <p class="text">sec</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="imgGroup">
                        <div class="flex" style="gap: 60px">
                            <img src="../../../../resources/img/img106_48s.png" alt="" />
                        </div>
                    </div>
                    <div class="pickGroup">
                        <article class="flex justify-center mb50" style="gap: 60px">
                            <div class="flex" @click="handleClick(1)">
                                <button>
                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
                                    <p :class="{ active: selectedButton === 1 }">1</p>
                                </button>
                                <p>guitar</p>
                            </div>
                        </article>
                        <article class="flex justify-center mb50" style="gap: 60px">
                            <div class="flex" @click="handleClick(2)">
                                <button>
                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
                                    <p :class="{ active: selectedButton === 2 }">2</p>
                                </button>
                                <p>violin</p>
                            </div>
                        </article>
                        <article class="flex justify-center" style="gap: 60px">
                            <div class="flex" @click="handleClick(3)">
                                <button>
                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
                                    <p :class="{ active: selectedButton === 3 }">3</p>
                                </button>
                                <p>piano</p>
                            </div>
                        </article>
                    </div>
                </div>
                <button class="submit-button" @click="handleSubmit()">제출하기</button>
            </div>
            <div class="next-btn" @click="goToPage('Chapter3_1')">
                <img src="../../../../resources/img/right.png" alt="" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            timer: "00",
            selectedButton: null, // 선택한 버튼
        };
    },
    methods: {
        complete() {
            const { unit_id, book_id } = this.$route.query;
            this.$router.push({ name: 'Dashboard', query: { value: 8, unit_id, book_id } });
        },
        goToPage(page) {
            this.$router.push({ name: page });
        },
        startTimer() {
            if (this.intervalId) {
                clearInterval(this.intervalId);
            }
            this.timer = 5;
            this.intervalId = setInterval(() => {
                if (this.timer > 0) {
                    this.timer--;
                } else {
                    clearInterval(this.intervalId);
                }
            }, 1000);
        },
        handleClick(number) {
            this.selectedButton = number;
        },
        // 제출하기 버튼
        handleSubmit() {
            console.log("선택된 번호 : ", this.selectedButton);
        },
    },
    watch: {},
    computed: {},
    components: {},
    mounted() {},
};
</script>
<style scoped>
.imgGroup {
    width: fit-content;
}
.imgGroup button {
    position: relative;
}

.imgGroup button p,
.textbox p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: fit-content;
    height: fit-content;
    background: #ffffffb8;
    border-radius: 5px;
    padding: 10px;
    font-size: 48px;
    font-family: "ONEMobilePOP";
}

.pickGroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pickGroup button {
    position: relative;
    margin-right: 30px;
}

.pickGroup button p {
    font-size: 34px;
    color: #c6c6c6;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pickGroup article img {
    object-fit: contain;
    width: -webkit-fill-available;
}
.pickGroup article > div > p {
    font-size: 64px;
}

.pickGroup button p.active {
    color: #000;
    /* 선택된 버튼의 숫자 색을 더 진하게 */
}

.completeBtn {
    margin-right: 100px;
    background-color: #ffba08;
    padding: 10px 30px;
    border-radius: 10px;
    font-size: 28px;
    font-family: "ONEMobilePOPOTF";
}

.submit-button {
    position: absolute;
    background-color: #ffba08;
    padding: 10px 30px;
    border-radius: 10px;
    font-size: 28px;
    font-family: "ONEMobilePOPOTF";
    right: 5rem;
    bottom: 3rem;
}
</style>
