<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">
            <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_6')">
                <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">
                    <p class="subtitle2 mr20">O X 퀴즈</p>
                    <button>
                        <img
                            src="../../../../resources/img/btn10_s.png"
                            alt=""
                        />
                    </button>
                </div>

                <div class="text-ct">
                    <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="pickGroup flex align-center justify-between mt80"
                        style="gap: 100px"
                    >
                        <p>Q. {{ dataList.prblmExpln }}</p>
                        <div class="flex justify-center" style="gap: 60px">
                            <article>
                                <div class="flex align-center">
                                    <button @click="handleCheck('O')" name="O">
                                        <img
                                            src="../../../../resources/img/img136_71s.png"
                                            alt=""
                                        />
                                        <p :class="{ active: answer === 'O' }">
                                            1
                                        </p>
                                    </button>
                                    <img
                                        src="../../../../resources/img/img111_56s.png"
                                        alt=""
                                    />
                                </div>
                            </article>
                            <article>
                                <div class="flex align-center">
                                    <button @click="handleCheck('X')" name="X">
                                        <img
                                            src="../../../../resources/img/img136_71s.png"
                                            alt=""
                                        />
                                        <p :class="{ active: answer === 'X' }">
                                            2
                                        </p>
                                    </button>
                                    <img
                                        src="../../../../resources/img/img112_56s.png"
                                        alt=""
                                    />
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="next-btn"
                @click="
                    [
                        goToPage('Chapter3_8'),
                        // handleSubmitAnswer()
                    ]
                "
            >
                <img src="../../../../resources/img/right.png" alt="" />
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            timer: "00",
            prblmId: "PROBLEM_000000000000003",
            problemDetail: [],
            dataList: [],
            prblmExpln: null,
            accessTime: null,
            answer: null,
            prblmLogAnsCnt: 0,
        };
    },
    methods: {
        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);
        },
        problemSearch() {
            const vm = this;
            sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
            // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
            axios({
                url: "problem/problemInfo.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {
                    prblmId: vm.prblmId,
                },
            })
                .then(function (res) {
                    console.log("problem - response : ", res.data);
                    vm.dataList = res.data.problem;
                    vm.problemDetail = res.data.problemDetail;
                })
                .catch(function (error) {
                    console.log("problem - error : ", error);
                });
        },

        // 문제 풀이 전송
        handleSubmitAnswer() {
            const vm = this;
            // const accessTime = new Date();
            // const formattedTime =
            //     this.formatToTimestampWithoutTimeZone(accessTime);
            axios({
                url: "problemLog/insertProblemLog.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {
                    prblmAns: vm.answer,
                    prblmLogAnsCnt: vm.prblmLogAnsCnt + 1,
                    stdId: "2",
                    // prblmStrtTm: formattedTime,
                    prblmId: vm.prblmId,
                },
            })
                .then(function (res) {
                    console.log("answer submit - response : ", res.data);
                })
                .catch(function (error) {
                    console.log("answer submit - error : ", error);
                });
        },

        handleCheck(value) {
            this.answer = value;
            console.log(this.answer);
        },

        // 풀이 시작 시간
        created() {
            const now = new Date();
            this.accessTime = this.formatToTimestampWithoutTimeZone(now);
            console.log("Formatted timestamp: ", this.accessTime);
        },
        formatToTimestampWithoutTimeZone(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, "0");
            const day = String(date.getDate()).padStart(2, "0");
            const hours = String(date.getHours()).padStart(2, "0");
            const minutes = String(date.getMinutes()).padStart(2, "0");
            const seconds = String(date.getSeconds()).padStart(2, "0");

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
    },
    watch: {},
    computed: {},
    components: {},
    mounted() {
        this.problemSearch();
        this.created();
    },
    beforeUnmount() {
        sessionStorage.removeItem("previewNote");
    },
};
</script>
<style scoped>
.inputbox {
    font-size: 38px;
    font-family: "Pretendard-ExtraBold";
}

.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 {
    padding: 0px 80px;
}

.pickGroup p {
    font-size: 34px;
    font-weight: bold;
}

.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 button p.active {
    color: #000000;
}
</style>
