<template>
    <div class="user-wrap">
        <div class="content-box">
            <div class="title-wrap">
                <div class="flex-start">
                    <img src="../../../../resources/jpg/user-icon.png" alt="회원관리 아이콘" class="title-icon">
                    <h2 class="main-title">회원관리</h2>
                </div>
            </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">
                        <div class="btn-wrap data-select-list">
                            <div class="data-select">
                                <select v-model="userListSearch.searchType" name="data-table-sild" id="data-table-sild"
                                        class="data-table-search">
                                    <option v-for="(item, idx) in option1" :key="idx" :value=item.value>
                                        {{ item.name }}
                                    </option>
                                </select>
                                <div class="input-group">
                                    <input type="text" class="input" placeholder="검색어를 입력해주세요."
                                        v-model="userListSearch.searchText" @keyup.enter="userSelectList()">
                                    <input class="button--submit" value="검색" type="submit" @click="userSelectList()">
                                </div>
                            </div>
                            <div>
                                <p>※ 보안을 위해, 이름 검색시 전체 이름을 정확하게 입력해주세요.</p>
                            </div>
                        </div>
                        <table>
                            <thead>
                                <tr>
                                    <th>NO</th>
                                    <th>아이디</th>
                                    <th>이름</th>
                                    <th>이메일</th>
                                    <th>승인</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(user, index) in userList" :key="index" @click="userSelectOnePage(user)">
                                    <td>{{ userIdx - index }}</td>
                                    <td>{{ user.user_id }}</td>
                                    <td>{{ user.user_nm }}</td>
                                    <td>{{ user.user_eml }}</td>
                                    <td><button class="red-btn" v-if="user.create_account_approval === 'N'"
                                            @click.stop="confirmCheck(user.user_id)">승인</button>
                                        <p v-else class="approve">승인 완료</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="flex-center">
                            <PaginationButton v-if="userListCount > 0" v-model:currentPage="userListSearch.currentPage"
                                :perPage="userListSearch.perPage" :totalCount="userListCount" :maxRange="5"
                                :click="userSelectList" />
                        </div>
                    </div>
                    <div v-show="currentTab == 1">
                        <div class="btn-wrap data-select-list">
                            <div class="data-select">
                                <select v-model="companyListSearch.searchType" name="data-table-sild" id="data-table-sild"
                                        class="data-table-search">
                                    <option v-for="(item, idx) in option2" :key="idx" :value=item.value>
                                        {{ item.name }}
                                    </option>
                                </select>
                                <div class="input-group">
                                    <input type="text" class="input" placeholder="검색어를 입력해주세요."
                                        v-model="companyListSearch.searchText" @keyup.enter="companySelectList()">
                                    <input class="button--submit" value="검색" type="submit" @click="companySelectList()">
                                </div>
                            </div>
                            <div>
                                <p>※ 보안을 위해, 담당자명 검색시 전체 이름을 정확하게 입력해주세요.</p>
                            </div>
                        </div>
                        <table>
                            <thead>
                                <tr>
                                    <th>NO</th>
                                    <th>아이디</th>
                                    <th>기업명</th>
                                    <th>담당자명</th>
                                    <th>이메일</th>
                                    <th>승인</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(company, index) in companyList" :key="index"
                                    @click="companySelectOnePage(company)">
                                    <td v-show="company.use_yn === 'Y'">{{ companyIdx - index }}</td>
                                    <td v-show="company.use_yn === 'Y'">{{ company.user_id }}</td>
                                    <td v-show="company.use_yn === 'Y'">{{ company.company_nm }}</td>
                                    <td v-show="company.use_yn === 'Y'">{{ company.user_nm }}</td>
                                    <td v-show="company.use_yn === 'Y'">{{ company.user_eml }}</td>
                                    <td v-show="company.use_yn === 'Y'"><button class="red-btn"
                                            v-if="company.create_account_approval === 'N'"
                                            @click.stop="confirmCheck(company.user_id)">승인</button>
                                        <p v-else class="approve">승인 완료</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="flex-center">
                            <PaginationButton v-if="companyListCount > 0" v-model:currentPage="companyListSearch.currentPage"
                                :perPage="companyListSearch.perPage" :totalCount="companyListCount" :maxRange="5"
                                :click="companySelectList" />
                        </div>
                    </div>
                    <div v-show="currentTab == 2">
                        <div class="btn-wrap data-select-list">
                            <div class="data-select">
                                <select v-model="managerListSearch.searchType" name="data-table-sild" id="data-table-sild"
                                        class="data-table-search">
                                    <option v-for="(item, idx) in option3" :key="idx" :value=item.value>
                                        {{ item.name }}
                                    </option>
                                </select>
                                <div class="input-group">
                                    <input type="text" class="input" placeholder="검색어를 입력해주세요."
                                        v-model="managerListSearch.searchText" @keyup.enter="managerSelectList()">
                                    <input class="button--submit" value="검색" type="submit" @click="managerSelectList()">
                                </div>
                            </div>
                            <div>
                                <p>※ 보안을 위해, 이름 검색시 전체 이름을 정확하게 입력해주세요.</p>
                            </div>
                        </div>
                        <table>
                            <thead>
                                <tr>
                                    <th>NO</th>
                                    <th>아이디</th>
                                    <th>이름</th>
                                    <th>이메일</th>
                                    <th>등록자</th>
                                    <th>등록시간</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(mngr, index) in mngrList" :key="index" @click="adminSelectOnePage(mngr)" class="user-list-padding">
                                    <td>{{ mngrIdx - index }}</td>
                                    <td>{{ mngr.mngr_id }}</td>
                                    <td>{{ mngr.mngr_nm }}</td>
                                    <td>{{ mngr.mngr_eml }}</td>
                                    <td>{{ mngr.rgtr_id }}</td>
                                    <td>{{ mngr.reg_dt }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="flex-center">
                            <PaginationButton v-if="mngrListCount > 0" v-model:currentPage="managerListSearch.currentPage"
                                :perPage="managerListSearch.perPage" :totalCount="mngrListCount" :maxRange="5"
                                :click="managerSelectList" />
                        </div>
                        <div class="btn-wrap">
                            <button class="blue-btn" @click="modalType = 'userInsert'">등록</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-show="isModalOpen" class="modal-wrapper">
            <div class="modal-container">
                <div class="modal-title">
                    <h2>관리자 등록</h2>
                </div>
                <div v-show="modalType == 'userInsert'" class="modal-content-monthly">
                    <div class="flex admin-id">
                        <input type="text" placeholder="ID" v-model="mngr.mngr_id" class="id-input" ref="mngr_id"/>
                        <button type="button" class="idchk blue-btn" @click="idCheck">중복확인</button>
                    </div>
                    <div><input type="password" name="pw" id="pw" placeholder="password" v-model="mngr.mngr_pw" ref="mngr_pw"
                            @change="passwordSyncCheck()" /></div>
                    <div>
                        <input type="password" name="pwCk" id="pwCk" placeholder="password 확인" v-model="passwordCheck" ref="mngr_pwCheck"
                            @change="passwordSyncCheck()" />
                        <div v-if="this.passwordCheckFlag === true" style="color:rgb(0, 198, 60); display:block" class="warning">비밀번호
                            일치</div>
                        <div v-else-if="this.passwordCheckFlag === false" style="color:red; display:block" class="warning">비밀번호 불일치</div>
                    </div>
                    <div><input type="text" placeholder="이름" v-model="mngr.mngr_nm" ref="mngr_nm" /></div>
                    <div class="flex">
                        <input type="text" v-model="email_id" placeholder="email" ref="email_id">
                        <div class="at">@</div>
                        <input class="mail-input" type="text" v-model="email_domain" :disabled="email_disabled === true" ref="email_domain">
                        <select @change="emailValue($event.target.value)" class="mail-select">
                            <option selected disabled>선택하세요</option>
                            <option value="naver.com">naver.com</option>
                            <option value="gmail.com">gmail.com</option>
                            <option value="hanmail.net">hanmail.net</option>
                            <option value="daum.net">daum.net</option>
                            <option value="nate.com">nate.com</option>
                            <option value="null">직접입력</option>
                        </select>
                    </div>
                </div>
                <div class="modal-end">
                    <button class="dark-gray-btn small-btn" @click="closeModal()">취소</button>
                    <button class="blue-btn small-btn" @click="managerInsert">저장</button>
                </div>
            </div>
        </div>
</template>
<script>
import { useStore } from "vuex";
import axios from "axios";
import crypto from "crypto-js";
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import PaginationButton from "../../../component/pagination/PaginationButton.vue";


export default {

    data() {
        return {
            currentTab: 0,
            tabMenu: ['일반회원', '기업회원', '관리자'],
            // 모달창 오픈 상태
            isModalOpen: false,
            // 모달창 타입
            modalType: null,
            mngr: {
                mngr_id: null,
                mngr_pw: null,
                mngr_nm: null,
                mngr_eml: null,
            },

            // 비밀번호 체크
            passwordCheck: null,
            passwordCheckFlag: false,
            //아이디 중복
            idCheck_boolean: false,

            //이메일
            email_disabled: true,
            email_id: null,
            email_domain: null,

            // 관리자 목록조회
            managerListSearch: {
                currentPage: 1,
                perPage: 10,
                searchType: 'id',
                searchText: null,
                mngr_id: null,
                mngr_nm: null
            },
            mngrList: [],
            mngrListCount: 0,
            mngrIdx: 0,

            // 사용자 목록조회
            userListSearch: {
                currentPage: 1,
                perPage: 10,
                searchType: 'id',
                searchText: null,
                user_id: null,
                user_nm: null
            },
            userList: [],
            userListCount: 0,
            userIdx: 0,

            // 기관회원 목록조회
            companyListSearch: {
                currentPage: 1,
                perPage: 10,
                searchType: 'id',
                searchText: null,
                user_id: null,
                user_nm: null
            },
            companyList: [],
            companyListCount: 0,
            companyIdx: 0,
            store: useStore(),

            option1: [
                { name: '아이디', value: 'id'},
                { name: '이름', value: 'name'},
            ],

            option2: [
                { name: '아이디', value: 'id'},
                { name: '기업명', value: 'cpn_name'},
                { name: '담당자명', value: 'name'},
            ],

            option3: [
                { name: '아이디', value: 'id'},
                { name: '이름', value: 'name'},
            ],
        };
    },
    methods: {
        openModal: function () {
            this.isModalOpen = true;
            this.passwordSyncCheck()
        },

        closeModal: function () {
            this.isModalOpen = false;
            this.modalType = null;
        },

        //비밀번호 매칭 확인
        passwordSyncCheck: function () {
            if (!this.mngr.mngr_pw && !this.passwordCheck) {
                this.passwordCheckFlag = null;
            } else if (this.mngr.mngr_pw != this.passwordCheck) {
                this.passwordCheckFlag = false;
            } else {
                this.passwordCheckFlag = true;
            }
        },
        //ID 중복 검사
        idCheck: function () {
            const vm = this;
            axios({
                url: '/managerSelectOne.json',
                method: 'post',
                headers: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.mngr

            }).then(function (response) {
                // console.log("idCheck - response : ", response.data);
                if (response.data != null) {
                    alert("중복된 ID 입니다.");
                    vm.idCheck_boolean = false;
                    return false;
                } else {
                    alert("사용가능한 ID 입니다.");
                    vm.idCheck_boolean = true;
                    return true;
                }
            }).catch(function (error) {
                console.log("idCheck - error : ", error);
                alert("중복검사 오류, 다시 시도해주세요.");
                vm.idCheck_boolean = false;
            });
        },

        //이메일 도메인 자동 입력
        emailValue: function (value) {
            if (value === 'null') {
                this.email_disabled = false;
                this.email_domain = null;
            }
            else {
                this.email_disabled = true;
                this.email_domain = value;
            }
        },
        // 등록버튼 클릭 시 빈칸 검사
        managerInsertCheck: function () {
            if (COMMON_UTIL.isEmpty(this.mngr.mngr_id) === false) {
                alert('ID를 입력해주세요.');
                this.$refs.mngr_id.focus()
                return false;
            }

            if (this.idCheck_boolean === false) {
                alert("ID중복검사를 완료해주세요.")
                this.$refs.mngr_id.focus()
                return false;
            }
            
            if (this.mngr.mngr_pw == '' || this.mngr.mngr_pw == null){
                alert("비밀번호를 입력하세요.")
                this.$refs.mngr_pw.focus()
                return false;
            }

            if (this.passwordCheckFlag === false){
                alert("비밀번호가 일치하지 않습니다.")
                this.$refs.mngr_pwCheck.focus()
                return false;
            }

            if (COMMON_UTIL.isEmpty(this.mngr.mngr_nm) === false) {
                alert('이름을 입력해주세요.');
                this.$refs.mngr_nm.focus()
                return false;
            }


            if (COMMON_UTIL.isEmpty(this.email_id) === false) {
                alert('이메일 ID를 입력해주세요.');
                this.$refs.email_id.focus()
                return false;
            }

            if (COMMON_UTIL.isEmpty(this.email_domain) === false) {
                alert('도메인을 선택 혹은 입력해주세요.');
                this.$refs.email_domain.focus()
                return false;
            }

            return true
        },

        //관리자 등록
        managerInsert: async function () {
            if (await this.managerInsertCheck() === false) {
                return;
            }
            const vm = this;

            vm.mngr.mngr_eml = vm.email_id + '@' + vm.email_domain;

            var iv = vm.store.state.key.iv;
            var salt = vm.store.state.key.salt;
            var passPhrase = vm.store.state.key.ENC_KEY;
            var keySize = 128;
            var iterationCount = 1000;
            var key128Bits100Iterations = crypto.PBKDF2(passPhrase, crypto.enc.Hex.parse(salt), { keySize: keySize / 32, iterations: iterationCount });

            let encryptedMngrId = crypto.AES.encrypt(vm.mngr.mngr_id, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
            let encryptedMngrPw = crypto.AES.encrypt(vm.mngr.mngr_pw, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
            let encryptedMngrNm = crypto.AES.encrypt(vm.mngr.mngr_nm, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
            let encryptedMngrEml = crypto.AES.encrypt(vm.mngr.mngr_eml, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();

            var data = {
                mngr_id: encryptedMngrId,
                mngr_pw: encryptedMngrPw,
                mngr_nm: encryptedMngrNm,
                mngr_eml: encryptedMngrEml,
            };
            
            axios({
                url: '/managerInsert.json',
                method: 'post',
                headers: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: data
            }).then(function (response) {
                // console.log("userInsert - response : ", response);
                let result = response.data;
                if (result > 0) {
                    alert("사용자 등록을 완료 하였습니다.");
                    vm.isModalOpen = false;
                    vm.modalType = null;

                    vm.mngr.mngr_id = null;
                    vm.mngr.mngr_pw = null;
                    vm.mngr.mngr_nm = null;
                    vm.mngr.mngr_eml = null;
                    vm.passwordCheck = null;
                    vm.email_id = null;
                    vm.email_domain = null;
                    vm.managerSelectList();

                } else {
                    alert("등록 실패, 관리자에게 문의해주세요.");
                    vm.isModalOpen = false;
                }
            }).catch(function (error) {
                console.log("userInsert - error : ", error);
                alert("사용자 등록 오류, 관리자에게 문의해주세요.");
                vm.isModalOpen = false;
            })
        },
        // 관리자 조회
        managerSelectList: function () {
            const vm = this;
            axios({
                url: '/managerSelectList.json',
                method: 'post',
                headers: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.managerListSearch
            }).then(function (response) {
                //console.log("managerSelectList - response : ", response.data);
                vm.mngrListCount = response.data.managerListCount
                vm.mngrList = response.data.managerList;
                vm.mngrIdx = vm.mngrListCount - (vm.managerListSearch.currentPage - 1) * vm.managerListSearch.perPage;
            }).catch(function (error) {
                console.log("managerSelectList - error : ", error);
                alert('사용자 목록 조회 오류, 관리자에게 문의해주세요.');
            });
        },
        // 일반회원 조회
        userSelectList: function () {
            const vm = this;
            axios({
                url: '/user/userSelectList.json',
                method: 'post',
                headers: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.userListSearch
            }).then(function (response) {
                //console.log("userSelectList - response : ", response.data);
                vm.userListCount = response.data.userListCount
                vm.userList = response.data.userList;
                vm.userIdx = vm.userListCount - (vm.userListSearch.currentPage - 1) * vm.userListSearch.perPage;
            }).catch(function (error) {
                console.log("userSelectList - error : ", error);
                alert('사용자 목록 조회 오류, 관리자에게 문의해주세요.');
            });
        },

        // 기관회원 조회
        companySelectList: function () {
            const vm = this;
            axios({
                url: '/company/companySelectList.json',
                method: 'post',
                headers: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.companyListSearch
            }).then(function (response) {
                //console.log("companySelectList - response : ", response.data);
                vm.companyListCount = response.data.companyListCount;
                vm.companyList = response.data.companyList;
                vm.companyIdx = vm.companyListCount - (vm.companyListSearch.currentPage - 1) * vm.companyListSearch.perPage;
            }).catch(function (error) {
                console.log("companySelectList - error : ", error);
                alert('사용자 목록 조회 오류, 관리자에게 문의해주세요.');
            });
        },
        //사용자 승인
        approval: function (userId) {
            const vm = this;
            axios({
                url: '/user/userApproval.json',
                method: 'post',
                headers: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: { user_id: userId }
            }).then(function (response) {
                if (response.data > 0) {
                    alert(userId + " 님에 대한 승인이 완료되었습니다.");
                    vm.userSelectList()
                    vm.companySelectList()
                }
            }).catch(function (error) {
                console.log("approval - error : ", error);
                alert('승인오류, 관리자에게 문의해주세요.');
            });
        },

        //사용자 승인을 위한 confirm창
        confirmCheck: function (userId) {
            var confirmation = confirm(userId + " 사용자를 승인 하시겠습니까?");
            if (confirmation) {
                this.approval(userId);
            } else {
                alert(userId + " 님에 대한 승인을 취소하였습니다. 확인 후 재승인 해주시기 바랍니다.")
            }
        },

        //상세조회 페이지로 이동
        userSelectOnePage: function (user) {
            this.$router.push({ path: '/adm/userSelectOne.page', query: { 'user_id': user.user_id } });
        },

        companySelectOnePage: function (company) {
            this.$router.push({ path: '/adm/companySelectOne.page', query: { 'user_id': company.user_id } });
        },

        //상세조회 페이지로 이동
        adminSelectOnePage: function (admin) {
            this.$router.push({ path: '/adm/userSelectOne.page', query: { 'mngr_id': admin.mngr_id } });
        },
    },
    watch: {
        "modalType": function (newValue, oldValue) {
            if (this.modalType != null) {
                this.openModal();
            }
        },
        "mngr.mngr_id": function(newVal, oldVal){
            this.idCheck_boolean = false;
        }
        
    },
    computed: {},
    components: {
        'PaginationButton': PaginationButton,
    },
    mounted() {
        this.managerSelectList();
        this.userSelectList();
        this.companySelectList();
    },
};
</script>
