''<template>

    <div>

        <form class="resultsReport">

            <div class="titleBox">

                <h4>멘토링 결과 보고서</h4>

            </div>

            <div class="userInfo">

                <div class="mentorInfo">

                    <div class="title">

                        <h6>멘토 (Mentor)</h6>

                    </div>

                    <div>

                        <label for="mentorName">이<span class="spacing"></span>름</label>

                        <input type="text" id="mentorName" name="mentorName" v-model="mentorName">

                    </div>

                    <div>

                        <label for="field">상담분야</label>

                        <input type="text" id="field" name="field" v-model="mentorArea">

                    </div>

                    <div>

                        <label for="belong">소속기관</label>

                        <input type="text" id="belong" name="belong" v-model="mentorGroup">

                    </div>

                    <div>

                        <label for="level">직<span class="spacing"></span>위</label>

                        <input type="text" id="level" name="level" v-model="mentorRank">

                    </div>

                </div>

                <div class="mentorInfo">

                    <div class="title">

                        <h6>멘티 (Mentee)</h6>

                    </div>

                    <div>

                        <label for="menteeName">이<span class="spacing"></span>름</label>

                        <input type="text" id="menteeName" name="menteeName" v-model="menteeName">

                    </div>

                    <div class="founded">

                        <p>창업여부</p>

                        <div class="radioStyle">

                            <div>

                                <input type="radio" id="spare" name="founded" v-model="menteeIsStartUp" value="spare">

                                <label for="spare">예비창업자</label>

                            </div>

                            <div>

                                <input type="radio" id="already" name="founded" v-model="menteeIsStartUp" value="already">

                                <label for="already">가창업자</label>

                            </div>

                        </div>

                    </div>

                    <div>

                        <label for="company">기<span class="spacing02"></span>업<span class="spacing02"></span>명</label>

                        <input type="text" id="company" name="company" v-model="menteeCompany">

                    </div>

                    <div>

                        <label for="item">아이템명</label>

                        <input type="text" id="item" name="item" v-model="menteeItem">

                    </div>

                </div>

            </div>

            <div class="activity">

                <div class="title">

                    <h6>멘토링 활동 수행 방법</h6>

                </div>

                <div class="activityLine">

                    <div>

                        <label for="count">차수</label>

                        <input type="text" id="count" name="count" v-model="degree">

                    </div>

                    <div>

                        <label for="day">수행날짜</label>

                        <input type="date" id="day" name="day" v-model="performanceDate">

                    </div>

                    <div class="teach">

                        <p>지도방법</p>

                        <input type="radio" id="contact" name="teach" v-model="teachingMethod" value="contact">

                        <label for="contact">대면</label>

                        <input type="radio" id="uncontact" name="teach" v-model="teachingMethod" value="uncontact">

                        <label for="uncontact">비대면</label>

                    </div>

                </div>

                <div class="activityLine">

                    <div>

                        <label for="place">장소</label>

                        <input type="text" id="place" name="place" v-model="place">

                    </div>

                    <div>

                        <label for="etc">기<span class="spacing"></span>타</label>

                        <input type="text" id="etc" name="etc" v-model="etc">

                    </div>

                    <div style="width: 186.45px;"></div>

                </div>

            </div>

            <div class="request">

                <div class="title">

                    <h6>멘티 요구사항(주제)</h6>

                </div>

                <textarea v-model="subject"></textarea>

            </div>

            <div class="mentorResults">

                <div class="title">

                    <h6>멘토링 수행결과</h6>

                </div>

                <div class="opinion">

                    <div class="subTitle">

                        <p>주요 내용 요약</p>

                    </div>

                    <textarea v-model="summary"></textarea>

                </div>

                <div class="opinion">

                    <div class="subTitle">

                        <p>멘토링 성과</p>

                    </div>

                    <textarea v-model="result"></textarea>

                </div>

                <div class="opinion">

                    <div class="subTitle">

                        <p>기대효과 및 추가 멘토링 사항</p>

                    </div>

                    <textarea v-model="benefit"></textarea>

                </div>

                <div class="opinion">

                    <div class="subTitle">

                        <p>수행사진</p>

                    </div>

                    <div class="imageUploadWrap">

                        <label for="image01">

                            <div class="imageUpload">

                                <div>

                                    <span>+</span>

                                    <span>사진파일 업로드</span>

                                    <img v-if="pathUrl01" :src="pathUrl01" alt="미리보기01">

                                </div>

                            </div>

                        </label>

                        <input ref="fileInput01" type="file" id="image01" name="image01" accept="image/*" value="첨부파일"

                            @change="handleFileUpload($event, '01')">

                        <label for="image02">

                            <div class="imageUpload">

                                <div>

                                    <span>+</span>

                                    <span>사진파일 업로드</span>

                                    <img v-if="pathUrl02" :src="pathUrl02" alt="미리보기02">

                                </div>

                            </div>

                        </label>

                        <input ref="fileInput02" type="file" id="image02" name="image02" accept="image/*" value="첨부파일"

                            @change="handleFileUpload($event, '02')">

                        <label for="image03">

                            <div class="imageUpload">

                                <div>

                                    <span>+</span>

                                    <span>사진파일 업로드</span>

                                    <img v-if="pathUrl03" :src="pathUrl03" alt="미리보기03">

                                </div>

                            </div>

                        </label>

                        <input ref="fileInput03" type="file" id="image03" name="image03" accept="image/*" value="첨부파일"

                            @change="handleFileUpload($event, '03')">

                    </div>

                </div>

            </div>

            <!-- <div class="submit">

                <button type="button" @click="saveJournal" v-if="$route.path.startsWith('/main/mentor/state/')">저장</button>

                <button v-else type="button" @click="updateJournalData">수정</button>

            </div> -->

            <div class="submit">

                <button type="button" @click="saveJournal">저장</button>

                <!-- <button v-else type="button" @click="updateJournalData">수정</button> -->

            </div>

        </form>

    </div>

</template>

<script>

import MatchDateService from "@/services/main/UserMatch";

import jwtDecode from "jwt-decode";

export default {

    name: "JournalCheck",

    props: {

        buildId: Number,

    },

    data() {

        return {

            // input data

            mentorName: "",

            mentorArea: "",

            mentorGroup: "",

            mentorRank: "",

            menteeName: "",

            menteeIsStartUp: "",

            menteeCompany: "",

            menteeItem: "",

            performanceDate: "",

            degree: "",

            teachingMethod: "",

            place: "",

            etc: "",

            subject: "",

            summary: "",

            result: "",

            benefit: "",

            pathUrl01: "",

            pathUrl02: "",

            pathUrl03: "",

        }

    },

    methods: {

        getUserId() {

            const tokenData = localStorage.getItem("user");

            const parsedToken = JSON.parse(tokenData);

            const accessToken = parsedToken.accessToken;

            const decodedToken = jwtDecode(accessToken);

            const userId = decodedToken.id;

            return userId;

        },

        async saveJournal() {

            if (confirm("저장하시겠습니까?")) {

                const formData = new FormData();

                const filesArr = [];

                filesArr.push(this.$refs.fileInput01.files[0]);

                filesArr.push(this.$refs.fileInput02.files[0]);

                filesArr.push(this.$refs.fileInput03.files[0]);

                formData.append("files", filesArr);

                formData.append("buildId", this.$route.params.id);

                formData.append("mentorName", this.mentorName);

                formData.append("mentorArea", this.mentorArea);

                formData.append("mentorGroup", this.mentorGroup);

                formData.append("mentorRank", this.mentorRank);

                formData.append("menteeName", this.menteeName);

                formData.append("menteeIsStartUp", this.menteeIsStartUp);

                formData.append("menteeCompany", this.menteeCompany);

                formData.append("menteeItem", this.menteeItem);

                formData.append("degree", this.degree);

                formData.append("performanceDate", this.performanceDate);

                formData.append("teachingMethod", this.teachingMethod);

                formData.append("place", this.place);

                formData.append("etc", this.etc);

                formData.append("subject", this.subject);

                formData.append("summary", this.summary);

                formData.append("result", this.result);

                formData.append("benefit", this.benefit);

                for (let key of formData.keys()) {

                    console.log(key, ":", formData.get(key));

                }

                try {

                    await MatchDateService.createConsultingJournal(this.getUserId(), formData);

                    alert("저장되었습니다.");

                    this.$router.push("/main/mentor");

                } catch (e) {

                    console.log("저장실패", e);

                }

            }

        },

        async getJournalData(id) {

            try {

                const response = await MatchDateService.getConsultingJournalDetail(id);

                this.mentorName = response.data.mentorName;

                this.mentorArea = response.data.mentorArea;

                this.mentorGroup = response.data.mentorGroup;

                this.mentorRank = response.data.mentorRank;

                this.menteeName = response.data.menteeName;

                this.menteeIsStartUp = response.data.menteeIsStartUp;

                this.menteeCompany = response.data.menteeCompany;

                this.menteeItem = response.data.menteeItem;

                this.performanceDate = response.data.performanceDate;

                this.degree = response.data.degree;

                this.teachingMethod = response.data.teachingMethod;

                this.place = response.data.place;

                this.etc = response.data.etc;

                this.subject = response.data.subject;

                this.summary = response.data.summary;

                this.result = response.data.result;

                this.benefit = response.data.benefit;

                this.pathUrl01 = response.data.pathUrl01;

                this.pathUrl02 = response.data.pathUrl02;

                this.pathUrl03 = response.data.pathUrl03;

                console.log("조회 성공", response.data);

            } catch (e) {

                console.log("조회 실패", e.response.data.message);

            }

        },

        // async updateJournalData() {

        //     if (confirm("수정하시겠습니까?")) {

        //         try {

        //             const formData = new FormData();

        //             const filesArr = [];

        //             filesArr.push(this.$refs.fileInput01.files[0]);

        //             filesArr.push(this.$refs.fileInput02.files[0]);

        //             filesArr.push(this.$refs.fileInput03.files[0]);

        //             formData.append("files", filesArr);

        //             formData.append("buildId", this.$route.params.id);

        //             formData.append("mentorName", this.mentorName);

        //             formData.append("mentorArea", this.mentorArea);

        //             formData.append("mentorGroup", this.mentorGroup);

        //             formData.append("mentorRank", this.mentorRank);

        //             formData.append("menteeName", this.menteeName);

        //             formData.append("menteeIsStartUp", this.menteeIsStartUp);

        //             formData.append("menteeCompany", this.menteeCompany);

        //             formData.append("menteeItem", this.menteeItem);

        //             formData.append("degree", this.degree);

        //             formData.append("performanceDate", this.performanceDate);

        //             formData.append("teachingMethod", this.teachingMethod);

        //             formData.append("place", this.place);

        //             formData.append("etc", this.etc);

        //             formData.append("subject", this.subject);

        //             formData.append("summary", this.summary);

        //             formData.append("result", this.result);

        //             formData.append("benefit", this.benefit);

        //             const response = await MatchDateService.updateConsultingJournal(this.getUserId(), formData);

        //             console.log("업데이트 성공", response.data);

        //             this.$router.push("/main/mentor");

        //         } catch (e) {

        //             console.log("업데이트 실패", e);

        //         }

        //     }

        // },

        async handleFileUpload(event, target) {

            const file = event.target.files[0];

            if (file && file.type.startsWith("image/")) {

                const reader = new FileReader();

                reader.onload = () => {

                    this['pathUrl' + target] = reader.result;

                };

                reader.readAsDataURL(file);

            }

        },

    },

    async mounted() {

        await this.getJournalData(this.$route.params.id);

    }

};

</script>

<style>

.resultsReport {

    background: #f8f6fb;

    padding: 60px 70px;

    font-size: 16px;

}

.resultsReport h4 {

    font-weight: normal;

}

.resultsReport h6 {

    font-weight: bold;

    font-size: 20px;

}

.resultsReport h6,

.resultsReport h4 {

    margin: 0;

    padding: 10px 0;

}

.resultsReport input,

.resultsReport select {

    border: 1px solid #dbdbdb;

    height: 30px;

    outline: none;

}

.resultsReport input,

.resultsReport select,

.input[type="radio"] {

    margin-left: 8px;

}

.userInfo input[type="text"] {

    width: 75%;

}

.resultsReport .title {

    margin-bottom: 15px;

    color: #6857a4;

}

.resultsReport p {

    margin: 0;

}

.radioStyle {

    display: flex;

    justify-content: space-around;

    width: 80%;

}

.radioStyle>div {

    display: flex;

    align-items: center;

}

.radioStyle label[for="spare"],

.radioStyle label[for="already"],

.radioStyle label[for="contact"],

.radioStyle label[for="uncontact"],

.teach>label {

    margin-left: 5px;

}

.titleBox {

    width: 100%;

    border: 2px solid #6857a4;

    text-align: center;

    padding: 5px;

    border-radius: 3px;

}

.mentorInfo>div,

.activity>div {

    margin-bottom: 7px;

}

.userInfo {

    display: flex;

}

.activity,

.request,

.mentorResults,

.userInfo {

    padding: 40px 20px 0 20px;

}

.mentorInfo {

    width: 100%;

}

.activity input[type="text"] {

    margin-right: 60px;

}

.activityLine {

    display: flex;

}

.activityLine input[id="day"] {

    width: 216px;

    margin-right: 60px;

    padding: 0 10px;

}

.teach,

.founded {

    display: flex;

    align-items: center;

}

.teach p,

.username {

    margin-right: 10px;

}

.spacing {

    margin-right: 28px;

}

.spacing02 {

    margin-right: 7px;

}

textarea {

    width: 100%;

    height: 80px;

    border: 1px solid #dbdbdb;

    resize: none !important;

    outline: none;

}

.mentorResults .subTitle {

    margin-bottom: 7px;

    font-weight: 600;

}

.mentorResults .opinion {

    margin-bottom: 15px;

}

input[type="file"] {

    display: none;

}

.imageUploadWrap {

    display: flex;

    justify-content: space-between;

}

.imageUploadWrap label {

    width: 100%;

}

.imageUpload {

    width: 95%;

    height: 200px;

    border: 2px dashed #dbdbdb;

}

.imageUpload div {

    width: 300px;

    height: 100%;

    color: #dbdbdb;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    font-weight: bold;

    cursor: pointer;

    position: relative;

}

.imageUpload div span:first-child {

    font-size: 50px;

}

.imageUpload div img {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

}

.submit {

    display: flex;

    justify-content: center;

    margin-top: 50px;

}

.submit button {

    border: 1px solid #dbdbdb;

    background: none;

    padding: 5px 12px;

}

tr th {

    border-top: 2px solid #777;

    text-align: center;

    padding: 10px 0px;

    border-bottom: 1px solid #dfdfdf;

    background: #f5f5f5 !important;

    font-size: 14px;

    color: #555;

}

.mainTitle {

    text-align: center;

    padding: 30px 0;

}

</style>''

저장 버튼을 누르면 다른건 다 저장이 되는데 이미지가 저장이 안됩니다ㅜㅜ