<template>
    <div class="main myplan">
        <div class="yellow-box mt30">
            <div class="title-box flex justify-between align-center">
                <div class="flex justify-between align-center" style="gap: 20px;">
                    <p class="title">단원</p>
                    <div class="row-bd"></div>
                    <div>
                        <p class="title mr40 mb10">1. Hello WORLD</p>
                        <p class="subtitle">my name is dd</p>
                    </div>
                </div>
                <!-- <button type="button" title="바로가기" class="yellow-btn" @click="goToPage('MyPlan2')">
                            바로가기
                        </button> -->
            </div>
        </div>
        <div class="title-box flex justify-between mb20 mt30">
            <p class="title">오답노트</p>
            <!-- <select name="" id="">
                <option value="">A반</option>
            </select> -->
        </div>
        <div class="wrap" style="border-radius: 0;">

            <div class="table-wrap">
                <table>
                    <colgroup>
                        <col style="width: 10%;">
                        <col style="width: 70%;">
                        <col style="width: 15%;">
                    </colgroup>
                    <tr>

                        <td><img src="../../../resources/img/img214_19s.png" alt=""></td>
                        <td class="text-lf">
                            <p class="title1">중간평가</p>
                            <p class="title2">wirte a</p>
                        </td>
                        <td> <button type="button" title="" class="new-btn" @click="buttonSearch">
                                View Detail
                            </button></td>
                    </tr>
                    <tr>

                        <td><img src="../../../resources/img/img214_19s.png" alt=""></td>
                        <td class="text-lf">
                            <p class="title1">중간평가</p>
                            <p class="title2">wirte a</p>
                        </td>
                        <td> <button type="button" title="" class="new-btn" @click="buttonSearch">
                                View Detail
                            </button></td>
                    </tr>
                </table>
                <div class="flex justify-end">
                    <button type="button" title="선택하기" class="yellow-btn mt30">
                        선택하기
                    </button>
                </div>
            </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>