<!-- userid, bookid, unitid 추가해야함. filemng는? 모르겟음 -->
<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 type="text" class="data-wrap" v-model="newData.textTtl">
        </div>
        <div class="flex align-center mb20">
            <label for="" class="title2">URL</label>
            <input type="text" class="data-wrap" v-model="newData.textUrl">
        </div>
        <div class="flex align-center">
            <label class="title2">형식</label>
            <label class="title2">
                <input type="radio" v-model="newData.textTypeId" value="1" class="data-wrap"> 일반
            </label>
            <label class="title2">
                <input type="radio" v-model="newData.textTypeId" value="2" class="data-wrap"> 대화
            </label>
            <label class="title2">
                <input type="radio" v-model="newData.textTypeId" value="3" class="data-wrap"> 책 리스닝
            </label>
        </div>
        <hr>
        <div class="flex align-center">
            <label for="" class="title2">스크립트</label>
            <textarea name="" id="" class="data-wrap" v-model="newData.textCnt"></textarea>
        </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="handleButtonAction">
                작성
            </button>
        </div>
    </div>
</template>

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


export default {
  computed: {
    textId() {
      return this.$route.query.textId;
    }
  },
    data() {
        return {
            mdiMagnify: mdiMagnify,
            post: null,
            newData: {
                textId: "",
                textTtl: "",
                textCnt: "",
                textUrl: "",
                textTypeId: ""
            },
        }
    },
    methods: {
        goToPage(page) {
            this.$router.push({ name: page });
        }, fetchPostDetail() {
            const textId=this.$route.query.textId
            axios({
                url: `/text/selectOneText.json`,
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {    "textId":  textId   }
            })
                .then(response => {
                    if (response.data && response.data[0]) {
                        this.post = response.data[0];
                        this.editTitle = this.post.title;
                        this.editContent = this.post.content;
                        console.log(this.post);
                    } 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() {
            const vm = this;
            axios({
                url: "/text/insertText.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: vm.newData,
            })
                .then(response => {
                    alert(response.data.message);
                    this.goToPage('TextList')
                })
                .catch(error => {
                    console.log("dataInsert - error : ", error.response.data);
                    alert("게시글 등록에 오류가 발생했습니다.");
                });
        },
        handleButtonAction() {
            if (!this.newData.textTtl) {
                alert("제목을 입력해 주세요.");
                return;
            }

            if (!this.newData.textCnt) {
                alert("내용을 입력해 주세요.");
                return;
            }

            this.dataInsert();
        }
    },
    watch: {

    },
    computed: {

    },
    components: {
        SvgIcon
    },
    mounted() {
        this.fetchPostDetail();
        console.log('Main2 mounted');
    }
}
</script>