<template>
    <div class="title-box flex justify-between mb40">
        <p class="title">평가 등록</p>
    </div>
    <!-- <label for="" class="title1">문제 리스트</label>
    <table class="mt20 mb100">
        <colgroup>
            <col style="width: 10%;">
            <col style="width: 70%;">
            <col style="width: 20%;">
        </colgroup>
        <thead>
            <td>No.</td>
            <td>문제</td>
            <td>보기</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td><button type="button" title="수정" class="new-btn">
                        수정
                    </button></td>
            </tr>
        </tbody>
    </table> -->
    <label for="" class="title1">상세 내용</label>
    <div class="board-wrap mt20">
        <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>

        <hr>
        <div class="flex align-center mb20">
            <label for="" class="title2">문제 1</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">문제 2</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">문제 3</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">문제 4</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 justify-between mt50">
        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('C_ExamList')">
            목록
        </button>
        <div class="flex">
            <button type="button" title="글쓰기" class="new-btn mr10">
                취소
            </button>
            <button type="button" title="글쓰기" class="new-btn">
                등록
            </button>
        </div>
    </div>
</template>

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


export default {
    data() {
        return {
            mdiMagnify: mdiMagnify,
        }
    },
    methods: {
        goToPage(page) {
            this.$router.push({ name: page });
        },
    },
    watch: {

    },
    computed: {

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