<template>
    <div class="title-box flex justify-between mb40">
        <p class="title">문제 등록</p>
    </div>
    <div class="content-t">
        <div class="board-wrap">
            <!--
        <div class="tab-box" >
            <label class="mr20 title1">
               <input type="radio" v-model="selectedTab" value="tab1" />
               문제 유형 (4지선다)
            </label>
            <label class="mr20 title1">
               <input type="radio" v-model="selectedTab" value="tab2" />
               문제 유형 (O,X형)
            </label>
            <label class="mr20 title1">
               <input type="radio" v-model="selectedTab" value="tab3" />
               문제 유형 (서술형)
            </label>
            <label class="mr20 title1">
               <input type="radio" v-model="selectedTab" value="tab4" />
               문제 유형 (다중 정답형)
            </label>
            
        </div>
        <hr>
        -->
            <div class="gd-col2">
                <div class="flex align-center mb20">
                    <label for="" class="title2">카테고리</label>
                    <select v-model="selectedSearchOption" class="mr10 data-wrap">
                        <option value="1">듣기 이해력(LC)</option>
                        <option value="2">독해 이해력(RC)</option>
                        <option value="4">쓰기(WT)</option>
                        <option value="5">말하기(SP)</option>
                        <option value="3">그외(ETC)</option>
                    </select>
                </div>
                <div class="flex align-center mb20">
                    <label for="" class="title2">문제 유형</label>
                    <select v-model="selectedSearchOption2" class="mr10 data-wrap">
                        <option v-for="prblmT in problemType" :key="prblmT.prblm_type_id" :value="prblmT">
                            {{ prblmT.prblm_type_nm }}
                        </option>
                    </select>
                </div>

                <div class="flex align-center">
                    <label for="" class="title2">교재</label>
                    <select name="" id="" v-model="book_id" @change="fetchUnits" class="mr10">
                        <option value="" disabled>교재를 선택하세요</option>
                        <option v-for="book in books" :key="book.book_id" :value="book.book_id">
                            {{ book.book_nm }}
                        </option>
                    </select>
                    <select name="" id="" v-model="unit_id" @change="fetchTexts" class="mr10">
                        <option value="" disabled>단원을 선택하세요</option>
                        <option v-for="unit in units" :key="unit.unitId" :value="unit.unitId">
                            {{ unit.unitName }}
                        </option>
                    </select>

                    <select v-model="text_id" class="mr10 data-wrap">
                        <option value="" disabled>지문을 선택하세요</option>
                        <option v-for="text in texts" :key="text.textId" :value="text.textId">
                            {{ text.textTtl }}
                        </option>
                    </select>
                </div>
            </div>
            <div class="flex align-center mb20 mt40">
                <label for="" class="title2">문제 배점</label>
                <input type="text" class="data-wrap" v-model="prblm_scr" />
            </div>

            <div class="flex align-center mb20">
                <label for="" class="title2">내용</label>
                <textarea name="" id="" class="data-wrap" v-model="prblm_expln"></textarea>
            </div>
            <div class="flex align-center mb20">
                <label for="" class="title2">힌트</label>
                <input type="text" class="data-wrap" v-model="prblm_hint" />
            </div>
            <div class="flex align-center">
                <label for="file" class="title2">첨부파일</label>
                <input type="file" ref="fileInput" @change="handleFileUpload" multiple />
            </div>
            <hr />
            <div v-if="selectedSearchOption2.prblm_type_cls === '5지선다'">
                <!--5지선다-->
                <div class="gd-col2" v-for="i in 5" :key="i">
                    <div>
                        <div class="flex align-center mb20 mr40">
                            <label :for="'answer' + i" class="title2">답{{ i }}</label>
                            <input
                                :id="'answer' + i"
                                type="text"
                                class="data-wrap"
                                v-model="prblmDetail.answers[i].text"
                            />
                        </div>
                        <div class="flex align-center mb20">
                            <label :for="'correct' + i" class="title2">정답여부</label>
                            <input
                                :id="'correct' + i"
                                type="checkbox"
                                class="ui-checkbox"
                                :checked="prblmDetail.correctIndex === i"
                                @change="setCorrectAnswer(i)"
                            />
                        </div>
                    </div>
                    <div class="flex align-center mb20">
                        <label :for="'file' + i" class="title2">첨부파일</label>
                        <input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple />
                    </div>
                </div>
            </div>
            <div v-else-if="selectedSearchOption2.prblm_type_cls === '4지선다'">
                <!--4지선다-->
                <div class="gd-col2" v-for="i in 4" :key="i">
                    <div>
                        <div class="flex align-center mb20 mr40">
                            <label :for="'answer' + i" class="title2">답{{ i }}</label>
                            <input
                                :id="'answer' + i"
                                type="text"
                                class="data-wrap"
                                v-model="prblmDetail.answers[i].text"
                            />
                        </div>
                        <div class="flex align-center mb20">
                            <label :for="'correct' + i" class="title2">정답여부</label>
                            <input
                                :id="'correct' + i"
                                type="checkbox"
                                class="ui-checkbox"
                                :checked="prblmDetail.correctIndex === i"
                                @change="setCorrectAnswer(i)"
                            />
                        </div>
                    </div>
                    <div class="flex align-center mb20">
                        <label :for="'file' + i" class="title2">첨부파일</label>
                        <input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple />
                    </div>
                </div>
            </div>
            <div v-else-if="selectedSearchOption2.prblm_type_cls === '3지선다'">
                <!--3지선다-->
                <div class="gd-col2" v-for="i in 3" :key="i">
                    <div>
                        <div class="flex align-center mb20 mr40">
                            <label :for="'answer' + i" class="title2">답{{ i }}</label>
                            <input
                                :id="'answer' + i"
                                type="text"
                                class="data-wrap"
                                v-model="prblmDetail.answers[i].text"
                            />
                        </div>
                        <div class="flex align-center mb20">
                            <label :for="'correct' + i" class="title2">정답여부</label>
                            <input
                                :id="'correct' + i"
                                type="checkbox"
                                class="ui-checkbox"
                                :checked="prblmDetail.correctIndex === i"
                                @change="setCorrectAnswer(i)"
                            />
                        </div>
                    </div>
                    <div class="flex align-center mb20">
                        <label :for="'file' + i" class="title2">첨부파일</label>
                        <input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple />
                    </div>
                </div>
            </div>
            <div v-else-if="selectedSearchOption2.prblm_type_cls === '2지선다'">
                <!--2지선다-->
                <div class="gd-col2" v-for="i in 2" :key="i">
                    <div>
                        <div class="flex align-center mb20 mr40">
                            <label :for="'answer' + i" class="title2">답{{ i }}</label>
                            <input
                                :id="'answer' + i"
                                type="text"
                                class="data-wrap"
                                v-model="prblmDetail.answers[i].text"
                            />
                        </div>
                        <div class="flex align-center mb20">
                            <label :for="'correct' + i" class="title2">정답여부</label>
                            <input
                                :id="'correct' + i"
                                type="checkbox"
                                class="ui-checkbox"
                                :checked="prblmDetail.correctIndex === i"
                                @change="setCorrectAnswer(i)"
                            />
                        </div>
                    </div>
                    <div class="flex align-center mb20">
                        <label :for="'file' + i" class="title2">첨부파일</label>
                        <input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple />
                    </div>
                </div>
            </div>
            <div v-else-if="selectedSearchOption2.prblm_type_cls === 'OX 문제'">
                <!-- OX 문제 -->
                <div class="flex align-center mb20">
                    <label for="" class="title2">답</label>
                    <select v-model="prblmDetail.answers[1].text" class="mr10 data-wrap">
                        <option value="O">O</option>
                        <option value="X">X</option>
                    </select>
                </div>
                <div class="flex align-center mb20">
                    <div v-if="prblmDetail.answers[1]?.fileInfo">
                        <div v-for="(data, index) in prblmDetail.answers[1].fileInfo" :key="index">
                            <label>{{ data.fileNm }}</label>
                        </div>
                    </div>

                    <input type="file" ref="fileInput1" @change="handleDetailFileUpload(1)" multiple />
                </div>
            </div>

            <div v-else-if="selectedSearchOption2.prblm_type_cls === '서술형'">
                <!-- 서술형 -->
                <div class="gd-col2">
                    <div class="flex align-center mb20">
                        <label for="" class="title2">답</label>
                        <input type="text" class="data-wrap" v-model="prblmDetail.answers[1].text" />
                    </div>
                    <div class="flex align-center mb20">
                        <label class="title2">첨부파일</label>
                        <div v-for="(data, index) in prblmDetail.answers[1]?.fileInfo" :key="index">
                            <label v-if="prblmDetail.answers[1]?.fileInfo">{{ data.fileNm }}</label>
                        </div>
                        <input type="file" ref="fileInput1" @change="handleDetailFileUpload(1)" multiple />
                    </div>
                </div>
            </div>
            <!--연결형
            <div v-else-if="['prblm_type_015'].includes(selectedSearchOption2)">
                
                <div class="gd-col2 ">
                    <div class="flex align-center mb20 mr40">
                        <label for="" class="title2">문제1</label>
                        <input type="text" class="data-wrap">
                    </div>
                    <div class="flex align-center mb20">
                        <label for="" class="title2">답1</label>
                        <input type="text" class="data-wrap">
                    </div>
                    <div class="flex align-center mb20 mr40">
                        <label for="" class="title2">문제2</label>
                        <input type="text" class="data-wrap">
                    </div>
                    <div class="flex align-center mb20">
                        <label for="" class="title2">답2</label>
                        <input type="text" class="data-wrap">
                    </div>
                    <div class="flex align-center mb20 mr40">
                        <label for="" class="title2">문제3</label>
                        <input type="text" class="data-wrap">
                    </div>
                    <div class="flex align-center mb20 ">
                        <label for="" class="title2">답3</label>
                        <input type="text" class="data-wrap">
                    </div>
                    <div class="flex align-center mb20 mr40">
                        <label for="" class="title2">문제4</label>
                        <input type="text" class="data-wrap">
                    </div>
                    <div class="flex align-center mb20">
                        <label for="" class="title2">답4</label>
                        <input type="text" class="data-wrap">
                    </div>
                </div>
            </div>
            -->
            <div class="flex align-center mb20">
                <label for="" class="title2">해설</label>
                <textarea name="" id="" class="data-wrap" v-model="prblm_cmmt"></textarea>
            </div>
            <hr />
            <div class="flex align-center mb20 mt40">
                <label for="" class="title2">문제 지표 1</label>
                <input type="text" class="data-wrap" v-model="prblm_mtr1" />
            </div>
            <div class="flex align-center mb20 mt40">
                <label for="" class="title2">문제 지표 2</label>
                <input type="text" class="data-wrap" v-model="prblm_mtr2" />
            </div>
            <div class="flex align-center mb20 mt40">
                <label for="" class="title2">문제 지표 3</label>
                <input type="text" class="data-wrap" v-model="prblm_mtr3" />
            </div>
            <div class="flex align-center mb20 mt40">
                <label for="" class="title2">문제 지표 4</label>
                <input type="text" class="data-wrap" v-model="prblm_mtr4" />
            </div>
            <div class="flex align-center mb20 mt40">
                <label for="" class="title2">문제 지표 5</label>
                <input type="text" class="data-wrap" v-model="prblm_mtr5" />
            </div>
            <div class="flex align-center mb20 mt40">
                <label for="" class="title2">문제 지표 6</label>
                <input type="text" class="data-wrap" v-model="prblm_mtr6" />
            </div>
        </div>
        <div class="flex justify-between mt50">
            <button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')">목록</button>
            <div class="flex">
                <!--
                <button type="button" title="글쓰기" class="new-btn mr10">
                    취소
                </button>-->
                <button type="button" title="글쓰기" class="new-btn" @click="submitForm">등록</button>
            </div>
        </div>
    </div>
</template>

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

export default {
    data() {
        return {
            mdiMagnify: mdiMagnify,
            selectedTab: '1',
            selectedSearchOption: '1', // 카테고리 선택
            selectedSearchOption2: '',
            text_id: '',
            prblm_ctgry_id: '', // 카테고리 ID
            prblm_type_id: '', // 문제 유형 ID
            prblm_scr: '', // 문제 배점
            prblm_expln: '', // 내용
            prblm_hint: '', // 힌트
            book_id: '',
            unit_id: '',
            user_id: '',
            file_mng_id: null, // 첨부파일 ID
            books: [],
            units: [],
            texts: [],
            file: '',
            prblm_mtr1: '',
            prblm_mtr2: '',
            prblm_mtr3: '',
            prblm_mtr4: '',
            prblm_mtr5: '',
            prblm_mtr6: '',
            selectedFiles: {},

            problemType: [],
            prblmDetail: {
                answers: {
                    1: { text: '', isCorrect: 'N', fileMngId: null },
                    2: { text: '', isCorrect: 'N', fileMngId: null },
                    3: { text: '', isCorrect: 'N', fileMngId: null },
                    4: { text: '', isCorrect: 'N', fileMngId: null },
                    5: { text: '', isCorrect: 'N', fileMngId: null },
                },
                correctIndex: 1, // 정답으로 선택된 답의 인덱스
            },
        };
    },
    methods: {
        goToPage(page) {
            this.$router.push({ name: page });
        },

        handleFileUpload(e) {
            this.file = e.target.files;
        },
        handleDetailFileUpload(index) {
            const files = this.$refs['fileInput' + index][0].files;
            this.selectedFiles[index] = files;
        },

        // 파일 업로드 메서드
        async uploadFiles(files) {
            if (!files || files.length === 0) {
                return null;
            }

            const formData = new FormData();
            for (let i = 0; i < files.length; i++) {
                formData.append('files', files[i]);
            }

            try {
                const response = await axios.post('http://165.229.169.113:9080/file/upload.json', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                });

                return response.data.fileMngId; // 파일 매니지 ID 반환
            } catch (error) {
                console.error('파일 업로드 오류:', error);
                throw new Error('파일 업로드에 실패했습니다.');
            }
        },

        // 문제 업로드
        async submitForm() {
            // 필요한 모든 필드를 검사합니다.
            if (!this.selectedSearchOption) {
                alert('카테고리를 지정해 주세요.');
                return;
            }

            if (!this.selectedSearchOption2.prblm_type_id) {
                alert('문제 유형을 지정해 주세요.');
                return;
            }

            if (!this.prblm_scr) {
                alert('문제 배점을 입력해 주세요.');
                return;
            }

            if (!this.prblm_expln) {
                alert('문제 내용을 입력해 주세요.');
                return;
            }

            const payload = {
                prblmCtgryId: this.selectedSearchOption, // 카테고리
                prblmTypeId: this.selectedSearchOption2.prblm_type_id, // 문제 유형
                prblmScr: this.prblm_scr, // 문제 배점
                prblmExpln: this.prblm_expln, // 내용
                prblmHint: this.prblm_hint, // 힌트
                prblmCmmt: this.prblm_cmmt, // 해설
                textId: this.text_id, // 지문 아이디
                unitId: this.unit_id, // 단원 아이디
                bookId: this.book_id, // 교재 아이디
                // userId: this.user_id, // 유저 아이디
                userId: 'USID_000000000000004', // 유저 아이디
                prblmMtr1: this.prblm_mtr1, // 문제 지표
                prblmMtr2: this.prblm_mtr2,
                prblmMtr3: this.prblm_mtr3,
                prblmMtr4: this.prblm_mtr4,
                prblmMtr5: this.prblm_mtr5,
                prblmMtr6: this.prblm_mtr6,
                fileMngId: this.file_mng_id, // 첨부파일 ID
            };

            if (this.file && this.file.length > 0) {
                // 파일 업로드를 수행하고, 결과로 얻은 fileMngId를 payload에 추가합니다.
                const fileMngId = await this.uploadFiles(this.file);
                payload.fileMngId = fileMngId;
            }

            try {
                const response = await axios.post('/problem/insertProblem.json', payload);
                console.log('성공:', response.data);
                const prblmId = response.data.prblmId; // 상세 문제 정보를 위한 문제 ID
                const problemDetails = await this.prepareProblemDetails(prblmId);
                await this.submitDetailForm(problemDetails);

                this.goToPage('QuestionList');
            } catch (error) {
                console.error('오류:', error);
                // 오류 처리 로직 추가
            }
        },

        // 문제 상세 업로드
        async submitDetailForm(problemDetails) {
            try {
                const response = await axios.post('/problem/insertProblemDetail.json', problemDetails);
                console.log('성공:', response.data);
            } catch (error) {
                console.error('오류:', error);
                // 오류 처리 로직 추가
            }
        },

        // 상세 정보 세팅하기
        async prepareProblemDetails(prblmId) {
            const details = [];
            const answers = this.prblmDetail.answers;

            let answerCount = 0;

            if (this.selectedSearchOption2.prblm_type_cls === '5지선다') {
                answerCount = 5;
            } else if (this.selectedSearchOption2.prblm_type_cls === '4지선다') {
                answerCount = 4;
            } else if (this.selectedSearchOption2.prblm_type_cls === '3지선다') {
                answerCount = 3;
            } else if (this.selectedSearchOption2.prblm_type_cls === '2지선다') {
                answerCount = 2;
            } else {
                answerCount = 1;
            }

            for (let i = 1; i <= answerCount; i++) {
                if (this.selectedFiles[i] && this.selectedFiles[i].length > 0) {
                    const uploadedFileMngId = await this.uploadFiles(this.selectedFiles[i]);
                    answers[i].fileMngId = uploadedFileMngId; // 파일 매니지 ID 저장
                }

                details.push({
                    prblmId,
                    prblmDtlExpln: answers[i].text || '',
                    prblmYn:
                        this.selectedSearchOption2.prblm_type_cls === '서술형' ||
                        this.selectedSearchOption2.prblm_type_cls === 'OX 문제'
                            ? 'Y'
                            : answers[i].isCorrect, // 서술형 및 OX 문제의 경우 항상 'Y'
                    fileMngId: answers[i].fileMngId,
                });
            }

            return details;
        },

        setCorrectAnswer(index) {
            this.prblmDetail.correctIndex = index;
            // 선택된 인덱스의 답만 'Y'로 설정하고, 나머지는 'N'으로 설정
            for (let i = 1; i <= 5; i++) {
                this.prblmDetail.answers[i].isCorrect = i === index ? 'Y' : 'N';
            }
        },

        resetPrblmDetail() {
            this.prblmDetail = {
                answers: {
                    1: { text: '', isCorrect: 'Y', fileMngId: null },
                    2: { text: '', isCorrect: 'N', fileMngId: null },
                    3: { text: '', isCorrect: 'N', fileMngId: null },
                    4: { text: '', isCorrect: 'N', fileMngId: null },
                    5: { text: '', isCorrect: 'N', fileMngId: null },
                },
                correctIndex: 1,
            };
            this.selectedFiles = {};
        },

        // 교재 정보 가져오기
        fetchBooks() {
            axios({
                url: '/book/findAll.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
            })
                .then((response) => {
                    console.log(response.data);
                    this.books = response.data;
                    this.text_id = '';
                })
                .catch((error) => {
                    console.error('fetchBooks - error: ', error);
                    alert('교재 목록을 불러오는 중 오류가 발생했습니다.');
                });
        },

        // 단원 정보 가져오기
        fetchUnits() {
            if (!this.book_id) return;

            axios({
                url: '/unit/unitList.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
                data: {
                    bookId: this.book_id,
                },
            })
                .then((response) => {
                    this.units = response.data;
                    this.text_id = '';
                })
                .catch((error) => {
                    console.error('fetchUnits - error: ', error);
                    alert('단원 목록을 불러오는 중 오류가 발생했습니다.');
                });
        },

        // 지문 정보 가져오기
        fetchTexts() {
            axios({
                url: '/text/textSearch.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
                data: {
                    unitId: this.unit_id,
                },
            })
                .then((response) => {
                    this.texts = response.data.list;
                })
                .catch((error) => {
                    console.error('fetchTexts - error: ', error);
                    alert('지문 목록을 불러오는 중 오류가 발생했습니다.');
                });
        },
        // 문제 유형 정보 가져오기
        selectProblemType() {
            axios({
                url: '/problem/selectType.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
            })
                .then((response) => {
                    this.problemType = response.data;
                    console.log('문제 유형 : ', response.data);
                })
                .catch((error) => {
                    console.error('selectProblemType - error: ', error);
                });
        },
    },
    watch: {
        selectedSearchOption2() {
            // 문제 유형이 변경될 때 prblmDetail 초기화
            this.resetPrblmDetail();
        },
    },
    computed: {},
    components: {
        SvgIcon,
    },
    mounted() {
        this.book_id = this.$route.query.book_id;
        this.unit_id = this.$route.query.unit_id;
        this.user_id = store.getters.getUserInfo.userId;

        this.fetchBooks();
        this.fetchUnits();
        this.fetchTexts();
        this.selectProblemType();
    },
};
</script>
<style scoped>
.ui-checkbox {
    width: 30px;
    height: 30px;
}
</style>
