<template>
	<div class="contents">
		<div class="contents_wrap">
			<div class="top_wrap">
				<h3 class="title">청약고객관리</h3>
				<p class="breadcrumb">고객관리 &gt; 청약고객관리 &gt; 회원관리</p>
			</div>
			
				<div class="table table_form">
          <form action=""
                target="_blank"
                method="post"
                ref="form">
            <input type="hidden" name="svcUserId" id="svcUserId" v-model="svcUserId"/>
            <input type="hidden" name="ezSvcUserAuthKey" id="ezSvcUserAuthKey" v-model="ezSvcUserAuthKey"/>
          </form>
						<table>
						 <colgroup>
							<col style="width:140px">
							<col style="width:auto"> 
							<col style="width:auto">  
							<col style="width:140px"> 
							<col style="width:auto"> 
							<col style="width:auto"> 
						  </colgroup>
							<tbody>
								<tr class="tr_input">
									<th>이름</th>
									<td colspan="2">
									 <input type="text" v-model="userNm" ref="_userNm">
									</td>
								</tr>
								<tr>
									<th>등록일</th>
									<td colspan="2">{{regDt}}</td>
									<th class="center">관리자 ID</th>
									<td colspan="2">{{adminId}}</td>
								</tr>
								<tr>
									<th>ID</th>
									<td colspan="2">
										{{userId}}
									      <button type="button" class="button grey btn-a" @click="homeLogin">로그인</button>
									</td>
									<th class="center">구분</th>
									<td colspan="2">{{userType}}</td>
								</tr>
								<tr class="tr_input">
									<th>휴대폰번호</th>
									<td colspan="2">
									   <input type="text" v-model="mdn" ref="_phone">
									</td>
									<th class="center">이메일</th>
									<td colspan="2">
									   <input type="text" v-model="email" ref="_email">
									</td>
								</tr>
								<tr class="w30">
									<th>잠금</th>
									<td colspan="2">
									    <input type="radio" name="userStat" value="01" id="right_radio1" v-model="stat">
									    <label for="right_radio1">사용</label>
										<input type="radio" name="userStat" value="02" id="right_radio2" v-model="stat">
										<label for="right_radio2">정지</label>
									</td>
									<th class="center">최종접속일</th>
									<td colspan="2">{{lastLoginDt}}</td>
								</tr>
							</tbody>
						</table>
				</div>

			<div class="pop-btn2">
				<button class="btn-default" type="button" @click="toComplete();">취소</button>
				<button class="btn-pcolor" type="button" @click="memberUpdate();">저장</button>
			</div>

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

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

<script>
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";

export default {
    name: 'memberDetail',
	mixins: [utils_mixin, chkPattern2],
	watch:{
		stat(){
			console.log('watch : ', this.stat)
		}
	},
  data() {
		return {
			row:{},  
			userNm:'',
			regDt: '',
			userType: '',
			userId: '',
			adminId:'',
			adminNm: '',
			sendingLimit: '',
			lineType: '',
			userStat: '',
			lastLoginDt: '',
			userStat:'',
			memo: '',
			mdn : '',
			email: '',
			stat:'',
    		svcUserId:'',
      		ezSvcUserAuthKey:'',
			homePageUrl: ''
			
		}
	},
  props: {
		serviceId: {
			type: String,
			default: "",
		},
	},
  components: {
    commonModal,
    ValidationConfirmPop,
  },
  created(){            
	if(this.$route.params.serviceId != null){
      this.$store.commit('dataStore/updateUserId', this.$route.params.serviceId);
      this.memberDetail(this.$route.params.serviceId);
    }else{
      var userId = this.$store.getters["dataStore/getUserId"];
      this.memberDetail(userId);
    }
  },  
  destroyed() {
    this.$store.commit('dataStore/updateUserId', '');
  },
  mounted() {
    
  },  
  methods: {
    async memberDetail(serviceId){
		this.row.userId = serviceId;
		try {
			const response = await custMgtApi.memberDetail(this.row);
			const result = response.data;
			console.log('>>>>>>>>>>>>');
			console.log(result);
			if (result != null && result.retCode == "0000") {
				// isView
				this.userNm = result.data.userNm;
				this.userId = result.data.userId;
				this.regDt = result.data.regDt;
				this.userType = result.data.userType;
				this.adminId = result.data.adminId;
				this.adminNm = result.data.adminNm;
				this.sendingLimit = result.data.sendingLimit;
				this.lineType = result.data.lineType;
				this.stat = result.data.userStat;
				this.lastLoginDt = result.data.lastLoginDt;
				this.memo = result.data.memo;
				this.mdn = result.data.mdn;
				this.email = result.data.email;
				this.homePageUrl = result.data.homePageUrl;
				this.ezSvcUserAuthKey = result.data.authKey;
			}
		} catch (error) {
			console.log(error);
      this.row.title = '청약고객관리';
      this.row.msg1 = '실패 하였습니다.';
      this.$refs.commmonModal.alertModalOpen(this.row);
		}

	},
	async memberUpdate(){
			if(!this.doValidate()){
                return false;
            }

            this.row.userId = this.userId;
            this.row.userNm = this.userNm;            
            this.row.userEmail = this.email;
            this.row.mdn = this.mdn;
            this.row.userStat = this.stat;
			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);
			} 
    },
	// 저장 후 부모창 호출.
	toComplete(){
		this.$router.push({ name: 'memberList', params: this.row });
	},
	doValidate(){
			
    	if(this.isNull(this.userNm)){
			this.row.title = '청약고객관리';
			this.row.msg1 = '이름을 입력해 주세요.';
			this.$refs.commmonModal.alertModalOpen(this.row);
			this.$refs._userNm.focus();
			return false;	
		}
		
    if(this.isNull(this.email)){
      this.row.title = '청약고객관리';
      this.row.msg1 = '이메일을 입력해주세요.';
      this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs._email.focus();
				return false;
			}
			const email = this.email;
			if(!this.isNull(email) && !lodash.isEqual(email,'@') && !this.emailCheck(email)){
        this.row.title = '청약고객관리';
        this.row.msg1 = '이메일 형식이 잘못되었습니다. 확인해 주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
        this.$refs._email.focus();
        //this.$refs.validationConfirmPopModal.validationEmailOpen();
				
				return false;
			}

      if(this.isNull(this.mdn)){
        this.row.title = '청약고객관리';
        this.row.msg1 = '휴대폰번호를 입력해주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs._phone.focus();
				return false;
			}
			const hp = this.mdn;
			if(!this.isNull(hp) && !this.isMobile(hp)){
        this.row.title = '청약고객관리';
        this.row.msg1 = '휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
        this.$refs._phone.focus();
        //this.$refs.validationConfirmPopModal.validationPhonenumberOpen();
				
				return false;
			}

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

			return true;
		},
    checkPhoneFocus(){
        //this.mdn = '';
        this.$refs._phone.focus();
    },
    checkEmailFocus(){
        //this.email = '';
        this.$refs._email.focus();
    },
    homeLogin(){      
	  this.$refs.form.action = this.homePageUrl;
      this.svcUserId = this.userId      
      this.$refs.form.submit()
    },
  },
};
</script>