<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" />
                    문제 유형 (일반형)
                </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="bbsTtl">제목</option>
                        <option value="bbsCnt">내용</option>
                        <option value="userNm">작성자</option>
                        <option value="bbsCls">카테고리</option>
                    </select>
                </div>
                <div class="flex align-center mb20">
                    <label for="" class="title2">문제 유형</label>
                    <select v-model="selectedSearchOption" class="mr10 data-wrap">
                        <option value="bbsTtl">제목</option>
                        <option value="bbsCnt">내용</option>
                        <option value="userNm">작성자</option>
                        <option value="bbsCls">카테고리</option>
                    </select>
                </div>
                <div class="flex align-center">
                    <label for="" class="title2">지문</label>
                    <select v-model="selectedSearchOption" class="mr10 data-wrap">
                        <option value="bbsTtl">제목</option>
                        <option value="bbsCnt">내용</option>
                        <option value="userNm">작성자</option>
                        <option value="bbsCls">카테고리</option>
                    </select>
                </div>
                <div class="flex align-center">
                    <label for="" class="title2">문제 지표</label>
                    <select v-model="selectedSearchOption" class="mr10 data-wrap">
                        <option value="bbsTtl">제목</option>
                        <option value="bbsCnt">내용</option>
                        <option value="userNm">작성자</option>
                        <option value="bbsCls">카테고리</option>
                    </select>
                </div>
            </div>
            <div class="flex align-center mb20 mt40">
                <label for="" class="title2">문제 배점</label>
                <input type="text" class="data-wrap">
            </div>

            <div class="flex align-center mb20">
                <label for="" class="title2">내용</label>
                <textarea name="" id="" class="data-wrap"></textarea>
            </div>
            <div class="flex align-center mb20">
                <label for="" class="title2">힌트</label>
                <input type="text" class="data-wrap">
            </div>
            <div class="flex align-center mb20">
                <label for="" class="title2">첨부파일</label>
                <input type="file" ref="fileInput" @change="handleFileUpload" />
            </div>
            <hr>
            <div v-if="selectedTab === 'tab1'">
                <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">
                    <label for="" class="title2">답2</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">
                    <label for="" class="title2">답4</label>
                    <input type="text" class="data-wrap">
                </div>
                <div class="flex align-center mb20">
                    <label for="" class="title2">해설</label>
                    <textarea name="" id="" class="data-wrap"></textarea>
                </div>
            </div>
            <div v-else-if="selectedTab === 'tab2'">
                <div class="flex align-center mb20">
                    <label for="" class="title2">답</label>
                    <select v-model="selectedSearchOption" class="mr10 data-wrap">
                        <option value="bbsTtl">O</option>
                        <option value="bbsCnt">X</option>
                    </select>
                </div>
                <div class="flex align-center mb20">
                    <label for="" class="title2">해설</label>
                    <textarea name="" id="" class="data-wrap"></textarea>
                </div>
            </div>
            <div v-else-if="selectedTab === 'tab3'">
                <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 class="flex align-center mb20">
                    <label for="" class="title2">해설</label>
                    <textarea name="" id="" class="data-wrap"></textarea>
                </div>
            </div>
            <div v-else-if="selectedTab === 'tab4'">
                <div class="flex align-center mb20 mr40">
                    <label for="" class="title2">문제1</label>
                    <input type="text" class="data-wrap">
                    <input type="checkbox" class="ui-checkbox ml30">
                </div>
                <div class="flex align-center mb20 mr40">
                    <label for="" class="title2">문제2</label>
                    <input type="text" class="data-wrap">
                    <input type="checkbox" class="ui-checkbox ml30">
                </div>
                <div class="flex align-center mb20 mr40">
                    <label for="" class="title2">문제3</label>
                    <input type="text" class="data-wrap">
                    <input type="checkbox" class="ui-checkbox ml30">
                </div>
                <div class="flex align-center mb20 mr40">
                    <label for="" class="title2">문제4</label>
                    <input type="text" class="data-wrap">
                    <input type="checkbox" class="ui-checkbox ml30">
                </div>
                <div class="flex align-center mb20">
                    <label for="" class="title2">해설</label>
                    <textarea name="" id="" class="data-wrap"></textarea>
                </div>
            </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">
                    수정
                </button>
            </div>
        </div>
    </div>
</template>

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

export default {
    data() {
        return {
            mdiMagnify: mdiMagnify,
            selectedTab: 'tab1',
            prblm: {},
            dataList: [],
            problemDetail: [],
        }
    },
    methods: {
        goToPage(page) {
            this.$router.push({ name: page });
        },
        problemSearch() {
            const vm = this;
            vm.prblm = JSON.parse(sessionStorage.getItem("selectQuestionList"));
            axios({
                url: "problem/problemInfo.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {
                    prblmId: vm.prblm.prblmId,
                },
            })
                .then(function (res) {
                    console.log("problem - response : ", res.data);
                    vm.dataList = res.data.problem;
                    vm.problemDetail = res.data.problemDetail;

                })
                .catch(function (error) {
                    console.log("problem - error : ", error);
                });
        },

    },
    watch: {

    },
    computed: {

    },
    components: {
        SvgIcon
    },
    mounted() {
        this.problemSearch();
    }
}
</script>
<style scoped>
.ui-checkbox {
    width: 30px;
    height: 30px;
}
</style>
