<template>
    <div class="title-box flex justify-between mb40">
        <p class="title">게시판</p>
        <select name="" id="">
            <option value="">A반</option>
        </select>
    </div>
    <div class="flex justify-end mb20">
        <div class="search-wrap ">
            <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>
        <button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch">
            학생 추가
        </button>
    </div>
    <div class="table-wrap">
        <table>
            <thead>
                <td>No.</td>
                <td>학년</td>
                <td>반</td>
                <td>성별</td>
                <td>이름</td>
            </thead>
            <tbody>
                <tr @click="goToPage('StudentDetail')">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></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 ">

        </div>

    </div>
    <div v-show="searchOpen" class="popup-wrap">
        <div class="popup-box ">
            <div class="flex justify-between mb30">
                <p class="popup-title">학생 검색</p>
                <button type="button" class="popup-close-btn" @click="closeBtn">
                    <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>

                </button>
            </div>
            <div class="search-wrap mb30">
                <input type="text" class="data-wrap" placeholder="">
                <button type="button" >
                            <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>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><input type="checkbox" class="ui-checkbox"></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 ">

                </div>

            </div>
            <div class="flex justify-end ">
                <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, mdiWindowClose } from '@mdi/js';


export default {
    data() {
        return {
            mdiMagnify: mdiMagnify,
            mdiWindowClose: mdiWindowClose,
            showModal: false,
            searchOpen: false,
        }
    },
    methods: {
        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>