<template>
    <div id="Chapter1_1" class="content-wrap">
        <div class="title-box mb25 flex align-center mt40">
            <span class="title mr40">1. Hello WORLD</span>
            <span class="subtitle">my name is dd</span>
        </div>
        <div class="flex justify-between align-center">
            <div class="pre-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/left.png" alt="">
            </div>
            <div class="content title-box">
                <p class="title mt25 title-bg">Quiz Result</p>
                <!-- <div class="flex align-center mb30">
                    <p class="subtitle2 mr20"></p>
                    <button><img src="../../../../resources/img/btn10_s.png" alt="">
                 </button>
                </div> -->

                <div class="text-ct flex justify-center" style="gap: 150px; margin: 0 auto;">
                    <div class="wrap-bg ">
                        <div class="title-box flex mb10  justify-between">
                            <p class="title mb20">최종 점수</p>
                            <button type="button" class="popup-close-btn" @click="closeBtn">
                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                            </button>
                        </div>
                        <div style="width: 100%;" class="flex mt30">
                            <p class="title5"><em class="yellow">93</em></p>
                            <p class="title4 ml10 mr10">&#47;</p>
                            <p class="title4">100</p>
                        </div>
                    </div>
                    <div class="bg-gray " style="width: 980px;">
                        <div class="title-box flex mb10  justify-between">
                            <p class="title mb20">오답 문제 리스트</p>
                            <button type="button" class="popup-close-btn" @click="closeBtn">
                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                            </button>
                        </div>
                        <article class=" mb20 flex-column result-box" style="gap: 20px;">
                            <div class="flex justify-between wrap">
                                <div class="flex align-center">
                                    <div><p class="title1 mr20">1.</p></div>
                                    <div class="text-lf">
                                        <p class="title1">2교시</p>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex align-center " style="gap: 10px;"><button type="button"
                                            title="정답 확인" class="yellow-btn">
                                            정답 확인
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="flex justify-between wrap">
                                <div class="flex align-center">
                                    <div><p class="title1 mr20">1.</p></div>
                                    <div class="text-lf">
                                        <p class="title1">2교시</p>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex align-center " style="gap: 10px;"><button type="button"
                                            title="정답 확인" class="yellow-btn">
                                            정답 확인
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="flex justify-between wrap">
                                <div class="flex align-center">
                                    <div><p class="title1 mr20">1.</p></div>
                                    <div class="text-lf">
                                        <p class="title1">2교시</p>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex align-center " style="gap: 10px;"><button type="button"
                                            title="정답 확인" class="yellow-btn">
                                            정답 확인
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="flex justify-between wrap">
                                <div class="flex align-center">
                                    <div><p class="title1 mr20">1.</p></div>
                                    <div class="text-lf">
                                        <p class="title1">2교시</p>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex align-center " style="gap: 10px;"><button type="button"
                                            title="정답 확인" class="yellow-btn">
                                            정답 확인
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>

                </div>
            </div>
            <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            timer: '00',
            showButton1: false,
            showButton2: false,
            showButton3: false,
            showButton4: false,
        }
    },
    methods: {
        goToPage(page) {
            this.$router.push({ name: page });
        },
        handleDrag(dragNumber) {
            // Drag 버튼 숨기기
            // 여기서는 상태 관리를 통해 버튼을 제어합니다.
            if (dragNumber === 1) {
                this.showButton1 = false;
            } else if (dragNumber === 2) {
                this.showButton2 = false;
            } else if (dragNumber === 3) {
                this.showButton3 = false;
            }
        },
        showButton(dropNumber) {
            // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
            // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
            if (dropNumber === 1) {
                this.showButton1 = true;
            } else if (dropNumber === 2) {
                this.showButton2 = true;
            } else if (dropNumber === 3) {
                this.showButton3 = true;
            } else if (dropNumber === 4) {
                this.showButton4 = true;
            }
        },
        startTimer() {
            if (this.intervalId) {
                clearInterval(this.intervalId);
            }
            this.timer = 5;
            this.intervalId = setInterval(() => {
                if (this.timer > 0) {
                    this.timer--;
                } else {
                    clearInterval(this.intervalId);
                }
            }, 1000);
        }
    },
    watch: {

    },
    computed: {

    },
    components: {
    },
    mounted() {

    }
}
</script>
<style scoped>
.textbox {
    height: 60px;
}

.textbox p {
    font-size: 28px;
    font-weight: bold;
    line-height: 65px;
}

.dropGroup button {
    position: relative;
}

.dropGroup button p {
    font-size: 48px;
}

.dragGroup button p {
    font-size: 48px;
}
</style>