<template>
	
    <HomeButton />

	<div class="reveal" ref="revealRef">
      <div class="slides">

		<section>
			<DragDropNxNHanjaBox :id="characters_id" :characters="characters" :dropZones="dropZones"></DragDropNxNHanjaBox>
		</section>
		<section>
			<DragDropNxNHanjaBox :id="characters2_id" :characters="characters2" :dropZones="dropZones2"></DragDropNxNHanjaBox>
		</section>

		<section>
			<RowWordBlank :svgId="lineWord1_id" :words="lineWord1_words" :term="lineWord1_term" :width="lineWord1_width"></RowWordBlank>
		</section>

		<section>
			<RowWordBlank :svgId="lineWord2_id" :words="lineWord2_words" :term="lineWord2_term" :width="lineWord2_width"></RowWordBlank>
		</section>

		<section>
			<CrossWord :svgId="crossWord_id" :problems="crossWord_problems" :length="crossWord_length" :width="crossWord_width"></CrossWord>
		</section>

		<section>
			<ConnectNxNHanjaBox :id="connect_characters_id" :characters="connect_characters" :meaningList="connect_meaningList" :correctPairs="connect_correctPairs"></ConnectNxNHanjaBox>
		</section>
		<section>
			<ConnectNxNHanjaBox :id="connect_characters2_id" :characters="connect_characters2" :meaningList="connect_meaningList2" :correctPairs="connect_correctPairs2"></ConnectNxNHanjaBox>
		</section>
		

	</div>
</div>


</template>


<script>
import HomeButton from "@/components/HomeButton.vue";

import Reveal from "reveal.js/dist/reveal.js";
import "reveal.js/dist/reveal.css";
import initializeReveal from "@/assets/js/revealSetup.js";

import DragDropNxNHanjaBox from "@/components/services/quiz/DragDropNxNHanjaBox.vue";
import RowWordBlank from "@/components/services/quiz/RowWordBlank.vue";
import CrossWord from "@/components/services/quiz/CrossWord.vue";
import ConnectNxNHanjaBox from "@/components/services/quiz/ConnectNxNHanjaBox.vue";

export default {
	components: {
			HomeButton: HomeButton,

			DragDropNxNHanjaBox : DragDropNxNHanjaBox,
			RowWordBlank : RowWordBlank,
			CrossWord : CrossWord,
			ConnectNxNHanjaBox : ConnectNxNHanjaBox
		},
	data() {
		return {
			
			//	DragDropNxNHanjaBox start
			characters_id: "characters",
			characters: ['你', '好', '天'],
			dropZones: [
				{ label: 'A', answer: '你' },
				{ label: 'B', answer: '好' },
				{ label: 'C', answer: '天' }
			],
			placeholder: null,
			dragElement: null,
			offsetX: 0,
			offsetY: 0,
			originalParent: null,
			originalNextSibling: null,
			//	DragDropNxNHanjaBox end


			//	NxNHanjaBoxSample__ start
			characters2_id: "characters2",
			characters2: ['你', '好', '天'],
			dropZones2: [
				{ label: 'A', answer: '你' },
				{ label: 'B', answer: '好' },
				{ label: 'C', answer: '天' }
			],
			placeholder: null,
			dragElement: null,
			offsetX: 0,
			offsetY: 0,
			originalParent: null,
			originalNextSibling: null,
			//	DragDropNxNHanjaBox end
			//	NxNHanjaBoxSample__ end

			//	RowWordBlank start
			lineWord1_id: "lineWordId1",
			lineWord1_words: [
				{ text: "나는"},
				{ text: "", answer: "학교 교무실"},
				{ text: "에 간다"},
			],
			lineWord1_term: 10,
			lineWord1_width: 50,

			
			lineWord2_id: "lineWordId2",
			lineWord2_words: [
				{ text: "A"},
				{ text: "B"},
				{ text: "", answer: "Z"},
				{ text: "C"},
				{ text: "D"},
			],
			lineWord2_term: 10,
			lineWord2_width: 60,
			//	RowWordBlank end
			

			//	CrossWord start
			crossWord_id: "crossWordId",
			crossWord_problems: [
				{ x: 0, y: 0, answer: "A", linear: 1 },
				{ x: 0, y: 1, answer: "B" },
				{ x: 2, y: 1, answer: "", linear: 2 },
				{ x: 3, y: 1, answer: "" },
				{ x: 3, y: 4, answer: "" }
			],
			crossWord_length: 6,
			crossWord_width: 60,
			//	CrossWord end


			//	ConnectNxNHanjaBox start
			connect_characters_id: "connect_characters",
			connect_characters: ['爱', '火', '水'],
			connect_meaningList: ['불', '사랑', '물'],
			connect_correctPairs: {
				0: 1,
				1: 0,
				2: 2,
			},
			//	ConnectNxNHanjaBox end

			//	ConnectNxNHanjaBox start
			connect_characters2_id: "connect_characters2",
			connect_characters2: ['日', '火', '水'],
			connect_meaningList2: ['날', '불', '물'],
			connect_correctPairs2: {
				0: 0,
				1: 1,
				2: 2,
			},
			//	ConnectNxNHanjaBox end


		};
	},
	methods: {
		goSlide(number) {
			if (this.deck) {
				this.deck.slide(number);
			} else {
				console.error("Reveal 인스턴스가 초기화되지 않았습니다.");
			}
		},
		
	},
	mounted() {
		// ✅ 3. ref로 지정한 DOM 엘리먼트를 넘겨주고, 인스턴스를 this.deck에 저장합니다.
		this.deck = initializeReveal(this.$refs.revealRef, false);
		
		// ✅ 4. 전역 Reveal.addEventListener 대신 인스턴스의 on 메서드 사용
		this.deck.on('slidechanged', (event) => {
			console.log("Slide is now " + event.indexh);
		});

 	},
	unmounted() {
        // ✅ 5. 여기가 핵심! 페이지를 벗어날 때 Reveal 객체를 메모리에서 완전히 파괴합니다.
        if (this.deck) {
            this.deck.destroy();
        }
    }
};
</script>

<style scoped>
/* @import url('@/assets/js/plugins/reveal-js/css/reset.css'); */
@import url('@/assets/js/plugins/reveal-js/css/reveal.css');
@import url('@/assets/js/plugins/reveal-js/css/theme/white.css');
@import url('@/assets/js/plugins/reveal-js/plugin/highlight/monokai.css');
@import url('@/assets/js/plugins/reveal-js/plugin/chalkboard/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/customcontrols/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/menu/menu.css');
@import url('@/assets/css/reveal-lecture.css');

</style>