<template>
    <div class="title-box flex justify-between mb40">
        <p class="title">평가</p>
        <select name="" id="">
            <option value="">1단원</option>
        </select>
    </div>
    <label for="" class="title2">단원</label>
        <div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
            <button class="selected-btn">1</button>
            <button>2</button>
            <button>3</button>
        </div>
    <div class="search-wrap flex justify-end mb20">
            <select name="" id="" class="mr10 data-wrap">
                <option value="">중간</option>
                <option value="">최종</option>
            </select>
            <select name="" id="" class="mr10 data-wrap">
                <option value="">전체</option>
            </select>
                <input  type="text" placeholder="검색하세요.">
                <button type="button" title="위원회 검색">
                    <img src="../../../resources/img/look_t.png" alt="">
                </button>
        </div>
        <div class="table-wrap">
            <table>
                <thead>
                    <td>No.</td>
                    <td>제목</td>
                    <td>중간/최종</td>
                    <td>작성자</td>
                    <td>문항</td>
                    <td>보기</td>
                    <td>등록일</td>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><button type="button" title="보기" class="new-btn" @click="goToPage('ExamDetail')">
                    보기
                </button></td>
                        <td></td>
                    </tr>
                    <!-- <tr :class="{ 'hidden-tr': !isRowVisible }" class="show-tr">
                        <td colspan="7">
                            <div>
                                <table>
                                    <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"  @click="goToPage('ExamDetail')">
                    수정
                </button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr> -->
                </tbody>
            </table>
            <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
                    <button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button>
                    <button class="selected-btn">1</button>
                    <button>2</button>
                    <button>3</button>
                    <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button>
                </article>
                <div class="flex justify-end ">
                <button type="button" title="등록" class="new-btn" @click="goToPage('ExamInsert')">
                    등록
                </button>
        </div>
        </div>
</template>

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


export default {
    data () {
        return {
            mdiMagnify: mdiMagnify,
            mdiWindowClose: mdiWindowClose,
            showModal: false,
            searchOpen: false,
            isRowVisible: false
        }
    },
    methods: {
        toggleRow() {
                    this.isRowVisible = !this.isRowVisible;
                },
        goToPage(page) {
         this.$router.push({ name: page });
      },
      showConfirm(type) {
            let message = '';
            if (type === 'cancel') {
                message = '삭제하시겠습니까?';
            } else if (type === 'reset') {
                message = '초기화하시겠습니까?';
            } else if (type === 'save') {
                message = '등록하시겠습니까?';
            }

            if (confirm(message)) {
                this.goBack();
            }
        },
        
        closeModal() {
            this.showModal = false;
        },
        buttonSearch() {
            this.searchOpen = true;
        },
        closeBtn() {
            this.searchOpen = false;

        },

    },
    watch: {

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