<template>
  <div>
    <div class="login-box pw-change">
      <div class="logo"></div>
      <div class="wbox">
        <h3 class="title">비밀번호 변경</h3>
        <p class="desc">임시비밀번호로 로그인할 경우 비밀번호를 변경 후<br>서비스 이용이 가능합니다.</p>
        <ul class="pw-form">
          <li><input type="password" placeholder="기존 비밀번호를 입력하세요" v-model="oldPw" ref="oldPw"></li>
          <li><input type="password" placeholder="새로운 비밀번호를 입력하세요" required minlength="8" maxlength="16" v-model.trim="newPw" ref="_newPw"></li>
          <li><input type="password" placeholder="새로운 비밀번호를 다시 한 번 입력하세요" required minlength="8" maxlength="16"  v-model.trim="newPw2"  ref="_newPw2"></li>
          <li><button class="btn-pcolor" @click="changedPwd()">비밀번호 변경하기</button></li>
        </ul>
      </div>
    </div>
    <common-modal ref="commonModal"></common-modal>
  </div>


</template>

<script>
import lodash from "lodash";
import api from '../service/api';
import commonModal from "../components/commonModal";
import { mapGetters } from 'vuex';

export default {
  name: 'updatePassword',
  data: function() {
    return {
      userId: '',
      oldPw: '',
      newPw: '',
      newPw2: '',
      passwordValidFlag: true,
      row: {},
      isLogin: false,
    }
  },
  created() {
    if(!this.getLogin){
      this.$router.push({ path: '/login' });
    }
  },
  computed: {
    ...mapGetters({
      getLogin: 'login/isLogin',      
    }),
  },
  watch: {
    getLogin(data) {
      if (data != null && data != '' && data == true) {
        this.isLogin = true;
      } else {
        this.isLogin = false;
      }
    }    
  },    
  components: {
    commonModal,
  },
  mounted() {

    if (localStorage.hubwebUserId) {
      this.userId = localStorage.hubwebUserId;
    }
    this.isLogin = this.getLogin;
    this.oldPw = this.getPwd;
  },
  methods: {
    verifyNewPw: function() {
      this.message.newPw = '';
    },

    formCheck: function() {
      this.errors = [];


      if (!this.oldPw) this.errors.push('기존비밀번호');
      if (!this.newPw) this.errors.push('새로운비밀번호');

      return this.errors.length == 0;
    },

    doPwdValidate(){
      if(lodash.isNull(this.newPw)){
        this.row.title = '비밀번호 변경';
        this.row.msg1 = '비밀번호 확인을 입력해 주세요.';
        this.$refs.commonModal.alertModalOpen(this.row);
        this.$refs._newPw2.focus();
        return false;
      }
      if(!lodash.isEqual(this.newPw, this.newPw2)){
        this.row.title = '비밀번호 변경';
        this.row.msg1 = '비밀번호가 일치하지 않습니다.';
        this.$refs.commonModal.alertModalOpen(this.row);
        this.$refs._newPw2.focus();
        return false;
      }
      const pwdLen = this.bytes(this.newPw);
      if(!(pwdLen >= 8 && pwdLen <= 16)){
        this.row.title = '비밀번호 변경';
        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
        this.$refs.commonModal.alertModalOpen(this.row);
        this.$refs._newPw2.focus();
        return false;
      }
      const pEng = /[A-Za-z]/g;	// 영문자
      const pNum = /[0-9]/g;	// 숫자
      const pSpc = /[!@$%^&*]/g; // 특수문자
      if(!(pEng.test(this.newPw) && pNum.test(this.newPw) && pSpc.test(this.newPw))) {
        this.row.title = '비밀번호 변경';
        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
        this.$refs.commonModal.alertModalOpen(this.row);
        this.$refs._newPw2.focus();
        return;
      }
      return true;
    },

    //비밀번호 유효성 체크
    async changedPwd() {

      if(this.doPwdValidate()){
        var vm = this;

        var params = {

          "userId": this.userId,
          "oldPw": this.oldPw,
          "newPw": this.newPw
        }
        try {
          const response = await api.updatePassword(params)
          const rsp = response.data;
          if(rsp.retCode == '0000') {
            this.row.title = '비밀번호 변경';
            this.row.msg1 = '비밀번호가 정상적으로 변경되었습니다.';
            this.row.msg2 = '변경된 비밀번호로 다시 로그인 해주세요.';
            this.row.callFnc = 'login'
            this.$refs.commonModal.alertModalOpen(this.row);
          } else if(rsp.retCode == '4016') {
            this.row.title = '비밀번호 변경';
            this.row.msg1 = '비밀번호를 확인해주세요.';
            this.$refs.commonModal.alertModalOpen(this.row);
          } else if(rsp.retCode == '4017') {
            this.row.title = '비밀번호 오류';
            this.row.msg1 = '비밀번호를 사용할 수 없습니다.';
            this.row.msg2 = '비밀번호는 영문/숫자/특수기호를 혼합하여';
            this.row.msg3 = '8~16자리로 설정해주세요.';
            this.$refs.commonModal.alertModalOpen(this.row);
          } else if(rsp.retCode == '4003') {
            this.row.title = '아이디 오류';
            this.row.msg1 = '등록되지 않은 아이디입니다.';
            this.$refs.commonModal.alertModalOpen(this.row);

          }
        } catch(err) {
          this.row.title = '비밀번호 초기화';
          this.row.msg1 = '실패 하였습니다.';
          this.$refs.commonModal.alertModalOpen(this.row);
          return false;
        }

      }
    },
    bytes: function (str) {
      var length = ((s,b,i,c) => {
        b=0,i=0;
        while(1 === 1){
          c = s.charCodeAt(i++);
          if (isNaN(c)) {
            break;
          }
          b += c >> 11 ? 2 : c >> 7 ? 1 : 1;
        }
        return b
      })(str);
      return length;
    },
    ModalOpen: function(target){
      this.$refs.LoginPopup.ModalOpen(target);
      this.$refs.oldPw.focus(target);
    },
    alertCalbackFnc(callFnc){
      if(callFnc === 'login'){        
        this.$router.push({ name: 'login',params: {}});
      }
    },
  }
}
</script>
