<template>
    <div class="content management">
        <div class="sub-title-area mb-30">
            <h2>회원관리</h2>
            <div class="breadcrumb-list">
                <ul>
                    <li><img :src="homeicon" alt="Home Icon">
                        <p>회원관리</p>
                    </li>
                    <li><img :src="righticon" alt=""></li>
                    <li>회원관리</li>
                </ul>
            </div>
        </div>
        <div class="flex-sp-bw">
            <div class="left-con">
                <div class="search-wrap mb-20">
                    <div class="search-area">
                        <div class="select-box">
                            <select name="" id="">
                                <option value="all" selected>전체</option>
                                <option value="id">아이디</option>
                                <option value="name">이름</option>
                            </select>
                        </div>
                       <div class="wfull" style="height: 100%;"> <input type="text"  v-model="searchText"></div>
                        <button class="search-btn"><img :src="searchicon" alt=""></button>
                    </div>
                   
                    
                </div>
                <table class="mb-10">
                        <thead>
                            <tr>
                                <th>아이디</th>
                                <th>이름</th>
                                <th>권한</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in items" :key="index" :class="{'delete-member': item.delete}">
                                <!-- Category 칼럼 -->
                                <td>
                                    {{ item.id }}
                                </td>
                                <!-- Checkbox 칼럼 -->
                                <td>
                                    {{ item.name }}
                                </td>
                                <td>
                                    {{ item.gownhan }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
            </div>
            <div class="righi-con wfull">
                <div class="btn-group-small flex-end mb-20">
                    <div class="button green-line">복구</div>
                    <div class="button red-line">회원탈퇴</div>
                    <div class="button gray-line">비밀번호 초기화</div>
                    <div class="button pink-line-bg flex align-center"><img :src="check_pink" alt="">
                        <p>신규등록</p>
                    </div>
                    <div class="button blue-line-bg flex align-center"><img :src="check_blue" alt="">
                        <p>등록</p>
                    </div>
                    <div class="button gray-bg">취소</div>
                </div>
                <form action="" class="insert-form mb-50">
                    <dl>
                        <dd>
                            <label for="id" class="require">아이디</label>
                            <input type="text" id="id" value="admin" readonly>
                        </dd>
                        <div class="hr"></div>
                        <dd>
                            <label for="pw" class="require">비밀번호</label>
                            <div class="wfull"><input type="text" id="pw" value=""></div>

                        </dd>
                        <div class="hr"></div>
                        <dd>
                            <label for="pwcheck" class="require">비밀번호 확인</label>
                            <div class="wfull"><input type="text" id="pwcheck" value=""></div>

                        </dd>
                        <div class="hr"></div>
                        <dd>
                            <label for="name" class="require">이름</label>
                            <input type="text" id="name" value="관리자" readonly>

                        </dd>
                        <div class="hr"></div>
                        <dd>
                            <label for="gwonhan" class="require">권한</label>
                            <div class="select-box">
                                <select>
                                    <option selected>관리자</option>
                                    <option></option>
                                    <option></option>
                                </select>
                            </div>

                        </dd>
                        <div class="hr"></div>
                        <dd>
                            <label for="use" class="require">사용여부</label>
                            <div class="switch">
                                <input type="checkbox" id="switch" />
                                <label for="switch">Toggle</label>

                            </div>

                        </dd>
                    </dl>
                </form>
            </div>

        </div>

    </div>
</template>
<script>
import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';

export default {
    components: {
        DoubleLeftOutlined,
        LeftOutlined,
        RightOutlined,
        DoubleRightOutlined,
    },

    data() {
        return {
            items: [
                { id: 'user1', name: '카테고리 1', gownhan:'관리자',  delete: false },
                { id: 'user2', name: '카테고리 2', gownhan:'사용자', delete: false },
                { id: 'user3', name: '카테고리 3', gownhan:'사용자', delete: true },
            ],
            isModalOpen: false,
            // Define the image sources
            homeicon: 'client/resources/images/icon/home.png',
            erroricon: 'client/resources/images/icon/error.png',
            righticon: 'client/resources/images/icon/right.png',
            check_pink: 'client/resources/images/checkbox_pink.png',
            check_blue: 'client/resources/images/checkbox_blue.png',
            searchicon: 'client/resources/images/icon/search.png',
            fileNames: [],
            selectedCategories: [],
        };
    },
    computed: {
        filteredItems() {
            // This could be modified to support filtering based on searchQuery
            return this.items.filter(item =>
                item.id.includes(this.searchQuery)
            );
        }
    },
    methods: {
    }
};
</script>
