<template>
	<!-- <div class="wrap bg-wrap"> -->
	<div>
		<div class="dimmed memberUpdate" @click="memberUpdateModalClose();"></div>
		<div class="popup-wrap memberUpdate">
			<!-- 수정 확인 -->
			<div class="popup memberUpdate popup_form">
				<div class="pop-head">
					<h3 class="pop-tit">사용자 ID 수정</h3>
				</div>
				<form autocomplete="off">
					<table>
						<tbody>
							<tr>
								<th>관리자 ID</th>
								<td>{{adminId}}</td>
							</tr>
							<tr>
								<th>ID</th>
								<td>{{userId}}</td>
							</tr>
							<tr>
								<th>비밀번호</th>
								<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd1" v-model.trim="userPwd1"></td>
							</tr>
							<tr>
								<th>비밀번호 확인</th>
								<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd2" v-model.trim="userPwd2"></td>
							</tr>
							<tr>
								<th>이름</th>
								<td><input type="text" v-model.trim="userNm" ref="_userNm"></td>
							</tr>
							<tr>
								<th>휴대폰번호</th>
								<td><input type="text" v-model.trim="mdn" ref="_phone"></td>
							</tr>
							<tr>
								<th>이메일</th>
								<td><input type="email" v-model.trim="email" ref="_email"></td>
							</tr>
							<tr>
								<th class="center">상태</th>
								<td>
									<input type="radio" name="userStateUpdate" value="01" id="user_popup_update_radio1" v-model="userStat">
									<label for="user_popup_update_radio1">사용</label>
									<input type="radio" name="userStateUpdate" value="02" id="user_popup_update_radio2" v-model="userStat">
									<label for="user_popup_update_radio2">정지</label>
								</td>
							</tr>
						</tbody>
					</table>
				</form>
				<div class="pop-btn2">
					<button class="btn-pcolor" @click="memberUpdateConfirm();">저장</button>
					<button class="btn-default" @click="memberUpdateModalClose();">취소</button>
				</div>
			</div>

            <validation-confirm-pop ref="validationConfirmPopModal"> </validation-confirm-pop>
            <common-modal ref="commmonModal"></common-modal>

        </div>        
    </div>
</template>

<script>
import api from '@/service/api';
import custMgtApi from "../service/custMgtApi.js";
import { utils_mixin, chkPattern2 } from '../service/mixins';
import ValidationConfirmPop from '../components/ValidationConfirmPop.vue';
import lodash from "lodash";
//import commonModal from "@/components/modal/commonModal";
import commonModal from "../components/commonModal";

export default {
    name: "memberModifyPop",
    mixins: [utils_mixin, chkPattern2],
	watch:{
		stat(){
			console.log('watch : ', this.stat)
		}
	},
    components: {
      ValidationConfirmPop,
      commonModal,
    },
    model: {
		//prop: 'sendData',
		//event: 'event-data'
	},
	//props: ['sendData'],
    created(){
        // this.setAuthData();
        // this.formReset();
    },
	data(){
    return{
      row:{},
			madangId:'',
			name:'',
			mdn:'',
			email:'',
			auth:'',
			stat: "",
      		userId: "",
      		adminId: "",
			userNm:"",
      		userPwd1:"",
      		userPwd2:"",
			code:"",
      		userStat:"",
    }
  },
	methods :{
        //사용자ID 수정 모달 Open
        async memberUpdateModalOpen(props){
			this.row.userId = props.userId;
            this.adminId = props.adminId;
			try {
				const response = await custMgtApi.memberDetail(this.row);
				const result = response.data;
				console.log(result);
				if (result != null && result.retCode == "0000") {
					this.userId = result.data.userId;
					this.userNm = result.data.userNm;
					this.email = result.data.email;
					this.mdn = result.data.mdn;
					this.userStat = result.data.userStat;
				} else {
          			this.row.title = '청약고객관리';
          			this.row.msg1 = '실패 하였습니다.';
          			this.$refs.commmonModal.alertModalOpen(this.row);
                }
			} catch(err) {
        			this.row.title = '청약고객관리';
        			this.row.msg1 = '실패 하였습니다.';
        			this.$refs.commmonModal.alertModalOpen(this.row);
			}
            // 모달 오픈
			var dimmed = document.getElementsByClassName('memberUpdate');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'block';
			}
		},
        //사용자ID 수정 Confirm
        memberUpdateConfirm(){
            // confirm 팝업 노출
            if(this.doValidate()){
                this.$refs.validationConfirmPopModal.confirmUpdateOpen();
            }
        },
        //사용자ID 수정 처리
        async memberUpdate(){
            this.row.userId = this.userId;
            this.row.userPw = this.userPwd1;
            this.row.userNm = this.userNm;            
            this.row.userEmail = this.email;
            this.row.mdn = this.mdn;
            this.row.userStat = this.userStat;
			try {
				const response = await custMgtApi.updateUser(this.row);
				const result = response.data;
				console.log(result);
				if (result != null && result.retCode == "0000") {
          			this.row.title = '청약고객관리';
          			this.row.msg1 = '수정 완료하였습니다.';
          			this.$refs.commmonModal.alertModalOpen(this.row);
          			this.toComplete();

				} else {
          			this.row.title = '청약고객관리';
          			this.row.msg1 = '실패 하였습니다.';
          			this.$refs.commmonModal.alertModalOpen(this.row);
        		}
			} catch(err) {
        			this.row.title = '청약고객관리';
        			this.row.msg1 = '실패 하였습니다.';
        			this.$refs.commmonModal.alertModalOpen(this.row);
			} 
        },
        //사용자ID 수정 모달 Close
        memberUpdateModalClose(){
            var dimmed = document.getElementsByClassName('memberUpdate');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'none';
			}
        },
        toComplete(){
            this.row.serviceId = this.adminId;
            this.memberUpdateModalClose();
            this.$parent.memberDetail(this.adminId);			
        },
        doPwdValidate(){
			if(this.isNull(this.userPwd2)){
				this.row.title = '청약고객관리';
        		this.row.msg1 = '비밀번호 확인을 입력해 주세요.';
				this.row.focusTaget = '2';
        		this.$refs.commmonModal.alertModalOpen(this.row);
				return false;
			}
			if(!lodash.isEqual(this.userPwd1, this.userPwd2)){
				this.row.title = '청약고객관리';
        		this.row.msg1 = '비밀번호가 일치하지 않습니다.';
				this.row.focusTaget = '2';
        		this.$refs.commmonModal.alertModalOpen(this.row);
				return false;
			}
			const pwdLen = this.bytes(this.userPwd1);
			if(!(pwdLen >= 8 && pwdLen <= 16)){
        		this.row.title = '청약고객관리';
        		this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
        		this.row.focusTaget = '1';
				this.$refs.commmonModal.alertModalOpen(this.row);
				return false;
			}
			const pEng = /[A-Za-z]/g;	// 영문자 
			const pNum = /[0-9]/g;	// 숫자 
			const pSpc = /[!@$%^&*]/g; // 특수문자
			if(!(pEng.test(this.userPwd1) && pNum.test(this.userPwd1) && pSpc.test(this.userPwd1))) {
        		this.row.title = '청약고객관리';
        		this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
        		this.row.focusTaget = '1';
				this.$refs.commmonModal.alertModalOpen(this.row);
				return false;
			}	
		
			return true;
		},
		doValidate(){
			if(!this.isNull(this.userPwd1)){
				if(!this.doPwdValidate()){
					return false;
				}
			} 
				
			if(this.isNull(this.userPwd1) && !this.isNull(this.userPwd2)){
				this.row.title = '청약고객관리';
        		this.row.msg1 = '비밀번호를 입력해 주세요.';
				this.row.focusTaget = '1';
        		this.$refs.commmonModal.alertModalOpen(this.row);
				return false;
			}

      		if(this.isNull(this.userNm)){
        		this.row.title = '청약고객관리';
        		this.row.msg1 = '이름을 입력해 주세요.';
				this.row.focusTaget = '3';
        		this.$refs.commmonModal.alertModalOpen(this.row);
				return false;	
			}

			if(this.isNull(this.mdn)){
				this.row.title = '청약고객관리';
        		this.row.msg1 = '휴대폰번호를 입력해주세요.';
				this.row.focusTaget = '4';
        		this.$refs.commmonModal.alertModalOpen(this.row);
				return false;
			}
			const hp = this.mdn;
			if(!this.isNull(hp) && !this.isMobile(hp)){
        		this.$refs.validationConfirmPopModal.validationPhonenumberOpen();				
				return false;
			}

      		if(this.isNull(this.email)){
				this.row.title = '청약고객관리';
        		this.row.msg1 = '이메일을 입력해주세요.';
				this.row.focusTaget = '5';
        		this.$refs.commmonModal.alertModalOpen(this.row);
				return false;
			}
			const email = this.email;
			if(!this.isNull(email) && !lodash.isEqual(email,'@') && !this.emailCheck(email)){
                this.$refs.validationConfirmPopModal.validationEmailOpen();				
				return false;
			}      		

      		if(this.isNull(this.userStat)){
				this.row.title = '청약고객관리';
        		this.row.msg1 = '상태를 선택 해주세요.';
        		this.$refs.commmonModal.alertModalOpen(this.row);
				return false;	
			}

			return true;
		},
    	checkPhoneFocus(){
        	this.$refs._phone.focus();
    	},
    	checkEmailFocus(){
        	this.$refs._email.focus();
    	},
		checkFocus(){
			if(this.row.focusTaget === '1'){
				this.$refs._pwd1.focus();
			} else if(this.row.focusTaget === '2'){
				this.$refs._pwd2.focus();
			} else if(this.row.focusTaget === '3'){
				this.$refs._userNm.focus();
			} else if(this.row.focusTaget === '4'){
				this.$refs._phone.focus();
			} else if(this.row.focusTaget === '5'){
				this.$refs._email.focus();
			}
		},
        
	}
}
</script>