<template>
    <div class="title-box flex justify-between mb40">
        <p class="title">지문 등록</p>
    </div>
    <div class="board-wrap">
        <div class="flex align-center mb20">
            <label for="" class="title2">제목</label>
            <input v-if="isEditing" type="text" v-model="post.textTtl" class="data-wrap">
            <p v-else class="data-wrap">{{ post.textTtl }}</p>
        </div>
        <div class="flex align-center mb20">
            <label for="" class="title2">URL</label>
            <input v-if="isEditing" type="text" v-model="post.textUrl" class="data-wrap">
            <p v-else class="data-wrap">{{ post.textUrl }}</p>
        </div>
        <div class="flex align-center mb20">
            <label class="title2">형식</label>
            <label class="title2">
                <input type="radio" v-model="post.textTypeId" value="1" class="data-wrap" :disabled="!isEditing"> 일반
            </label>
            <label class="title2">
                <input type="radio" v-model="post.textTypeId" value="2" class="data-wrap" :disabled="!isEditing"> 대화
            </label>
            <label class="title2">
                <input type="radio" v-model="post.textTypeId" value="3" class="data-wrap" :disabled="!isEditing"> 책 리스닝
            </label>
        </div>
        <hr>
        <div class="flex align-center">
            <label for="" class="title2">스크립트</label>
            <textarea v-if="isEditing" v-model="post.textCnt" class="data-wrap"></textarea>
            <p v-else class="data-wrap">{{ post.textCnt }}</p>
        </div>
    </div>
    <div class="flex justify-between mt50">
        <button type="button" title="목록으로" class="new-btn" @click="goToPage('TextList')">
            목록
        </button>
        <div class="flex">
            <button type="button" title="수정" class="new-btn mr10" @click="toggleEdit">
                {{ isEditing ? '저장' : '수정' }}
            </button>
            <button type="button" title="삭제" class="new-btn" @click="deletePost">
                삭제
            </button>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify } from '@mdi/js';

export default {
    data() {
        return {
            mdiMagnify: mdiMagnify,
            post: {"textId": "",
                "textTtl": "",
                "textCnt": "",
                "textUrl": "",
                "textTypeId": ""}, 
            isEditing: false // Add this property to toggle edit mode
        };
    },
    computed: {
        textId() {
            return this.$route.query.textId;
        }
    },
    methods: {
        goToPage(page) {
            this.$router.push({ name: page });
        },
        fetchPostDetail() {
            const textId = this.$route.query.textId;
            axios.post('/text/selectOneText.json', { textId }, {
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                }
            })
                .then(response => {
                    if (response.data && response.data[0]) {
                        this.post.textId = response.data[0].text_id;
                        this.post.textTtl = response.data[0].text_ttl;
                        this.post.textCnt = response.data[0].text_cnt;
                        this.post.textUrl = response.data[0].text_url;
                        this.post.textTypeId = response.data[0].text_type_id; 
                    } else {
                        this.error = "Failed to fetch post details.";
                    }
                })
                .catch(error => {
                    console.error("Error fetching post detail:", error);
                    this.error = "Failed to fetch post details.";
                });
        },
        dataInsert() { 
            axios.post("/text/textUpdate.json", this.post, {
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                }
            })
                .then(response => {
                    alert(response.data.message);
                    this.fetchPostDetail();
                })
                .catch(error => {
                    console.log("dataInsert - error : ", error.response.data);
                    alert("게시글 등록에 오류가 발생했습니다.");
                });
        },
        toggleEdit() {
            if (this.isEditing) { 
                this.dataInsert();
                this.isEditing = false;
            } else {
                // Enter edit mode
                this.isEditing = true;
            }
        },
        deletePost() {
            axios.post("/text/textDelete.json", { textId: this.textId }, {
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                }
            })
                .then(response => {
                    alert(response.data.message);
                    this.goToPage('TextList');
                })
                .catch(error => {
                    console.error("Error deleting post:", error);
                    alert("게시글 삭제에 오류가 발생했습니다.");
                });
        }
    },
    mounted() {
        this.fetchPostDetail();
        console.log('Main2 mounted');
    },
    components: {
        SvgIcon
    }
};
</script>

<style scoped>
/* Add any necessary styles here */
</style>
