<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">
            <BookInfo />
            <div class="flex">
                <TextToImage />
                <button class="completeBtn" @click="complete">학습 종료</button>
            </div>
        </div>
        <div class="flex justify-between align-center">
            <div class="pre-btn" @click="goToPage('Chapter1_1')">
                <img src="../../../../resources/img/left.png" alt="" />
            </div>
            <div class="content title-box">
                <p class="title mt25 title-bg">step1. Hello WORLD</p>
                <div class="flex align-center ml50 mb15" style="margin-top: -30px; gap: 10px">
                    <h4>지문을 집중해서 듣고 읽어보세요</h4>
                    <div class="listen-btn">
                        <img src="../../../../resources/img/btn10_s.png" alt="" @click="generateTts('male')" />
                        <audio id="tts-audio-player" preload="auto"></audio>
                    </div>
                </div>
                <div class="flex listen-box">
                    <div class="listenGroup">
                        <p>{{ text_ttl }}</p>
                        <div class="listen-cnt" v-for="(line, index) in text_cnt_list" :key="index">
                            {{ line }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="next-btn" @click="goToNextPage">
                <img src="../../../../resources/img/right.png" alt="" />
            </div>
        </div>
    </div>
</template>

<script>
import TextToImage from '../../../component/TextToImage.vue';
import BookInfo from '../../../component/BookInfo.vue';
import axios from 'axios';
export default {
    data() {
        return {
            text_data: null,
            text_ttl: null,
            text_cnt: null, // 지문 내용
            text_cnt_list: [],
            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() {
            this.goToPage('Chapter5');
            // 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,
                    textId: 'TEXT_000000000005004',
                },
            })
                .then((response) => {
                    this.text_data = response.data[0];
                    this.text_ttl = response.data[0].text_ttl;
                    this.text_cnt = response.data[0].text_cnt;
                    this.text_cnt_list = this.text_cnt.split('/').filter((text) => text.trim() !== '');
                    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;
        },
        // 대화 지문 재생
        generateTts(gender) {
            axios({
                url: 'http://165.229.169.32:35716/generate_tts',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
                responseType: 'blob',
                data: {
                    gender: gender,
                    input_text: this.text_cnt,
                },
            })
                .then((response) => {
                    console.log('tts 응답 : ', response);
                    const audioBlob = new Blob([response.data], { type: 'audio/mpeg' });
                    const audioUrl = URL.createObjectURL(audioBlob); // 오디오 url 생성
                    const audioPlayer = document.getElementById('tts-audio-player');
                    audioPlayer.src = audioUrl;
                    audioPlayer.play();
                })
                .catch((err) => {
                    console.log('tts 에러 : ', err);
                });
        },
    },
    watch: {},
    computed: {
        textId() {
            //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
            return this.$store.getters.getTextId;
        },
    },
    components: {
        TextToImage: TextToImage,
        BookInfo: BookInfo,
    },
    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';
}

.listen-box {
    gap: 50px;
    width: 1282px;
    height: 500px;
    overflow: scroll;
    overflow-y: auto;
    overflow-x: hidden;
}

.listenGroup {
    margin-left: 5rem;
}

.listenGroup p {
    font-size: 40px;
    font-weight: bold;
}

.listen-cnt {
    font-size: 24px;
    margin-top: 30px;
}
</style>
