<template>
    <div id="Chapter1" class="content-wrap">
        <div style="margin: 30px 0px 50px; width: 20%">
            <router-link to="/MyPlan.page">
                <div class="logo mb25">
                    <img src="../../../../resources/img/new_img/logo_v2.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" style="visibility: hidden" @click="goToPage('Chapter1_2')">
                <img src="../../../../resources/img/left.png" alt="" />
            </div>
            <div class="content title-box">
                <div class="listenGroup">
                    <p class="title mt25 title-bg">step1. Hello WORLD</p>
                    <!--
                    <img class="bg" src="../../../../resources/img/img39_s.png" data-num="1" />
                    -->
                    <img class="bg" :src="img_src" />
                </div>
            </div>
            <div class="next-btn" @click="goToNextPage">
                <img src="../../../../resources/img/right.png" alt="" />
            </div>
        </div>
        <TextToImage />
    </div>
</template>

<script>
import TextToImage from '../../../component/TextToImage.vue';
import axios from 'axios';
export default {
    data() {
        return {
            text_data: null,
            img_src: null,
            seq: this.$store.getters.seqNum,
        };
    },
    methods: {
        complete() {
            const { unit_id, book_id } = this.$route.query;
            this.$router.push({
                name: 'Dashboard',
                query: { value: this.seq, unit_id, book_id },
            });
        },
        goToPage(page) {
            this.$router.push({ name: page });
        },
        goToNextPage() {
            alert('지문 학습 완료!');
            this.complete();
        },
        // 지문 API
        async fetchText() {
            axios({
                url: '/text/selectOneText.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
                data: {
                    textId: this.textId,
                },
            })
                .then((response) => {
                    this.text_data = response.data[0];
                    console.log('지문 데이터 : ', this.text_data);
                    this.img_src = this.fetchImage(this.text_data.file_rpath);
                })
                .catch((err) => {
                    console.log('지문 에러 : ', err);
                });
        },
        // 이미지 불러오기
        fetchImage(fileRpath) {
            return 'http://165.229.169.113:9080/' + fileRpath;
        },
    },
    watch: {},
    computed: {
        textId() {
            //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
            return this.$store.getters.getTextId;
        },
    },
    components: {
        TextToImage: TextToImage,
    },
    mounted() {
        this.fetchText();
    },
};
</script>
<style scoped>
.listenGroup .textbox {
    width: 900px;
}

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