<template>
    <div class="user-wrap">
        <div class="content-box">
            <div class="title-wrap">
                <h2 class="main-title">회원관리</h2>
            </div>
            <div class="content-wrap">
                <ul class="tab-menu">
                    <li v-for="(tab, index) in tabMenu" :key="index">
                        <a @click="currentTab = index" :class="{ active: currentTab === index }">{{ tab }}</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div v-show="currentTab == 0">
                        <table>
                            <thead>
                                <tr>
                                    <th>아이디</th>
                                    <th>기업명</th>
                                    <th>담당자명</th>
                                    <th>이메일</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(user,index) in user1" :key="index">
                                    <td>{{ user.id }}</td>
                                    <td>{{ user.company }}</td>
                                    <td>{{ user.name }}</td>
                                    <td>{{ user.email }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-show="currentTab == 1">
                        <table>
                            <thead>
                                <tr>
                                    <th>아이디</th>
                                    <th>기업명</th>
                                    <th>담당자명</th>
                                    <th>이메일</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(user,index) in user2" :key="index">
                                    <td>{{ user.id }}</td>
                                    <td>{{ user.company }}</td>
                                    <td>{{ user.name }}</td>
                                    <td>{{ user.email }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-show="currentTab == 2">
                        <table>
                            <thead>
                                <tr>
                                    <th>아이디</th>
                                    <th>기업명</th>
                                    <th>담당자명</th>
                                    <th>이메일</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(user,index) in user3" :key="index">
                                    <td>{{ user.id }}</td>
                                    <td>{{ user.company }}</td>
                                    <td>{{ user.name }}</td>
                                    <td>{{ user.email }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="btn-wrap">
                            <button class="blue-btn">등록</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentTab: 0,
            tabMenu: ['일반회원', '기관회원', '관리자'],
            user1:[
                {id:"test1",company:"test1C",name:"user1",email:"test1@abc.com"},
                {id:"teste2",company:"test2C",name:"user2",email:"test2@abc.com"},
                {id:"test3",company:"test3C",name:"user3",email:"test3@abc.com"},
            ],
            user2:[
                {id:"test1",company:"test1C",name:"user1",email:"test1@abc.com"},
                {id:"teste2",company:"test2C",name:"user2",email:"test2@abc.com"},
                {id:"test3",company:"test3C",name:"user3",email:"test3@abc.com"},
            ],
            user3:[
                {id:"test1",company:"test1C",name:"user1",email:"test1@abc.com"},
                {id:"teste2",company:"test2C",name:"user2",email:"test2@abc.com"},
                {id:"test3",company:"test3C",name:"user3",email:"test3@abc.com"},
            ]
        };
    },
    methods: {},
    watch: {},
    computed: {},
    components: {},
    mounted() { },
};
</script>
<style scoped>
.tab-menu{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.tab-menu li a{
    padding: 10px 15px;
    display: block;
    font-size: 1.6rem;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    border: 1px solid #ddd;
    border-bottom: 0;
}

.tab-menu li a.active{
    background-color: #f8f8f8;
    color: #2b7cff;
    font-weight: 800;
    border: 0;
}

.tab-content{
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    padding: 15px;

}
</style>
