<template>
  <!-- <div class="wrap bg-wrap"> -->
  <div>
    <div class="dimmed modal20" @click="ModalClose();"></div>
    <div class="popup-wrap modal20">
      <!-- 관리자/유치채널 등록 -->
      <div class="popup modal20 popup_form">
        <div class="pop-head">
          <h3 class="pop-tit" v-if="insertType === 1">관리자 등록</h3>
          <h3 class="pop-tit" v-else>유치채널 사용자 등록</h3>
        </div>
        <table>
          <tbody>
          <tr>
            <th>마당 ID</th>
            <td class="input_search">
              <input type="text" placeholder="아이디 입력" v-model.trim="madangId" ref="madangId"
              @keyup.enter="search" :readonly="!isFocused" @focus="isFocused = true" @blur="isFocused = false">
              <button type="button" class="button grey" @click="searchMadangId()">조회</button>
            </td>
          </tr>
          <tr>
            <th>비밀번호</th>
            <td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8"
                       maxlength="16" ref="_pwd1" v-model.trim="userPwd1"
                       @keyup.enter="search" :readonly="!isFocused" @focus="isFocused = true" @blur="isFocused = false"></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" @keypress="onlyName" @input="onlyName" v-model.trim="userNm" ref="_userNm" required
                       maxlength="40"></td>
          </tr>
          <tr>
            <th>휴대폰번호</th>
            <td><input type="text" placeholder="- 자 제외 숫자만 입력" v-model.trim="mdn" ref="_phone" @keypress="onlyNum"
                       @input="onlyNum" minlength="10" maxlength="11"></td>
          </tr>
          <tr>
            <th>이메일</th>
            <td><input type="email" v-model.trim="email" @keypress="onlyEmail" @input="onlyEmail" maxlength="20"
                       ref="_email"></td>
          </tr>
          <tr v-if="insertType === 2">
            <th>코드</th>
            <td><input type="text" disabled ref="_code" v-model.trim="code"></td>
          </tr>
          <tr>
            <th>권한</th>
            <td v-if="insertType === 1">
              <div v:class="select_box">
                <select name="" id="right" v-model="auth" ref="_auth">
                  <option value="">선택</option>
                  <option v-for="(option, i) in authType" v-bind:value="option.autCd" v-bind:key="i">
                    {{ option.autNm }}
                  </option>
                </select>
              </div>
            </td>
            <td v-else><input type="text" disabled value="대리점"></td>
          </tr>
          <tr>
            <th class="center">상태</th>
            <td>
              <input type="radio" name="state" value="01" id="popup_radio1" v-model="stat">
              <label for="popup_radio1">사용</label>
              <input type="radio" name="state" value="02" id="popup_radio2" v-model="stat">
              <label for="popup_radio2">정지</label>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="popup-btn2">
          <button class="btn-pcolor" @click="doInsert">저장</button>
          <button class="btn-default" @click="ModalClose();">취소</button>
        </div>
      </div>
    </div>
    <search-id-popup ref="searchIdPopModal"></search-id-popup>
    <common-modal ref="commmonSysModal"></common-modal>
  </div>
</template>

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

export default {
  name: "adminRegPop",
  mixins: [utils_mixin, chkPattern2],
  watch: {
    stat() {
    }
  },
  data() {
    return {
      isFocused: false,
      row: {},
      authType: [],
      insertType: 0,
      madangId: '',
      name: '',
      mdn: '',
      email: '',
      auth: '',
      stat: '01',
      userNm: "",
      userPwd1: "",
      userPwd2: "",
      code: "",
      idCheck: false,
      props: {},
    }
  },
  components: {
    SearchIdPopup,
    commonModal,
  },
  model: {
    prop: 'sendData',
    event: 'event-data'
  },
  props: ['sendData'],
  created() {
    //this.formReset();
    this.setAuthData();
    this.formReset();
  },
  methods: {
    doPwdValidate() {
      if (this.isNull(this.userPwd1)) {
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '비밀번호를 입력해 주세요.';
        this.$refs.commmonSysModal.alertSysModalOpen(this.row);
        this.$refs._pwd1.focus();
        return false;
      }
      if (this.isNull(this.userPwd2)) {
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '비밀번호 확인을 입력해 주세요.';
        this.$refs.commmonSysModal.alertSysModalOpen(this.row);
        this.$refs._pwd2.focus();
        return false;
      }
      if (!lodash.isEqual(this.userPwd1, this.userPwd2)) {
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '비밀번호가 일치하지 않습니다.';
        this.$refs.commmonSysModal.alertSysModalOpen(this.row);
        this.$refs._pwd2.focus();
        return false;
      }
      const pwdLen = this.bytes(this.userPwd1);
      if (!(pwdLen >= 8 && pwdLen <= 16)) {
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
        this.$refs.commmonSysModal.alertSysModalOpen(this.row);
        this.$refs._pwd1.focus();
        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.$refs.commmonSysModal.alertSysModalOpen(this.row);
        this.$refs._pwd1.focus();
        return;
      }
      this.row.adminPw = this.userPwd1;
      return true;
    },
    doValidate() {
      if (!this.idCheck) {
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '유효한 마당ID가 아닙니다.';
        this.$refs.commmonSysModal.alertSysModalOpen(this.row);
        this.$refs.madangId.focus();
        return false;
      }
      if (!this.doPwdValidate()) {
        return false;
      }
      if (this.isNull(this.userNm)) {
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '이름을 입력해 주세요.';
        this.$refs.commmonSysModal.alertSysModalOpen(this.row);
        this.$refs._userNm.focus();
        return false;
      }
      if (this.isNull(this.mdn)) {
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '휴대폰번호를 입력해주세요.';
        this.$refs.commmonSysModal.alertSysModalOpen(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.commmonSysModal.alertSysModalOpen(this.row);
        this.$refs._phone.focus();
        return false;
      }
      if (this.isNull(this.email)) {
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '이메일을 입력해주세요.';
        this.$refs.commmonSysModal.alertSysModalOpen(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.row.msg2 = '확인해 주세요.';
        this.$refs.commmonSysModal.alertSysModalOpen(this.row);
        this.$refs._email.focus();
        return false;
      }
      if (this.isNull(this.auth)) {
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '권한을 선택 해주세요.';
        this.$refs.commmonSysModal.alertSysModalOpen(this.row);
        this.$refs._auth.focus();
        return false;
      }
      if (this.isNull(this.stat)) {
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '상태를 선택 해주세요.';
        this.$refs.commmonSysModal.alertSysModalOpen(this.row);
        // this.$refs._auth.focus();
        return false;
      }
      this.row.madangId = this.madangId;
      this.row.name = this.userNm;
      this.row.mdn = hp;
      this.row.email = email;
      this.row.auth = this.auth;
      this.row.stat = this.stat;

      return true;
    },
    // 마당ID 조회
    async searchMadangId() {

      if (!this.madangId) {
        this.$refs.madangId.focus();
        return false;
      }
      var params = {
        "madangId": this.madangId
      }

      try {
        const response = await sysMgtApi.selectSearchMadangId(params);
        const result = response.data;
        if (result != null && result.retCode == "0000") {
          this.madangId = result.data.madangId;
          this.userNm = result.data.name;
          this.email = result.data.email;
          this.mdn = result.data.mdn;
          this.code = result.data.code;
          // 마당ID조회 성공 팝업노출
          this.searchIdPop();

          this.idCheck = true;
          this.$refs._pwd1.focus();
          return false;
        } else if (result.retCode == '1004') {
          this.searchIdFailPop();
          this.idCheck = false;
          this.$refs.madangId.focus();
          return false;
        } else {
          this.searchIdFailPop();
          this.idCheck = false;
          this.$refs.madangId.focus();
          return false;
        }
      } catch (err) {
        this.searchIdFailPop();
        this.idCheck = false;
        this.$refs.madangId.focus();
        return false;
      }

    },
    searchIdPop() {
      //alert('마당ID 조회 성공 팝업이동 ->');
      var params = {
        "madangId": this.madangId,
        "userNm": this.userNm,
        "email": this.email,
        "mdn": this.mdn
      }
      this.$refs.searchIdPopModal.searchIdPop(params);
    },
    searchIdFailPop() {
      //alert('마당ID 조회 실패 팝업이동 ->');
      this.$refs.searchIdPopModal.searchIdFailPop();
    },
    resetRegPop() {
      // this.formReset();
      this.madangId = '';
      this.userNm = '';
      this.email = '';
      this.mdn = '';
      this.code = '';
      this.$refs.madangId.focus();
    },


    // 모달 띄우기
    ModalOpen(insertType) {
      this.formReset();
      this.insertType = insertType;
      if (insertType === 2) {
        this.auth = '1002';
      }
      var dimmed = document.getElementsByClassName('modal20');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
      this.setAuthData();
    },
    // 모달 끄기
    ModalClose() {
      var dimmed = document.getElementsByClassName('modal20');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }

    },
    // 저장 후 부모창 호출.
    toComplete() {
      this.getParent('adminList').$refs.table.reloadData();
      this.ModalClose();
    },
    async doInsert() {
      if (this.doValidate()) {
        try {
          const response = await sysMgtApi.insertAdmin(this.row);
          const result = response.data;
          if (result != null && result.retCode == "0000") {
            this.row.title = '관리자/유치채널 관리';
            this.row.msg1 = '저장 하였습니다.';
            this.$refs.commmonSysModal.alertSysModalOpen(this.row);
            this.toComplete();
          } else if (result != null && result.retCode == "4018") {
            this.row.title = '관리자/유치채널 관리';
            this.row.msg1 = '이미 사용중인 아이디입니다.';
            this.$refs.commmonSysModal.alertSysModalOpen(this.row);
          }
        } catch (err) {
          this.row.title = '관리자/유치채널 관리';
          this.row.msg1 = '실패 하였습니다.';
          this.$refs.commmonSysModal.alertSysModalOpen(this.row);
        }
      }
    },
    async setAuthData() {
      // 권한 옵션.
      // api.commAuth().then(response => {
      //   this.authType = response.data.data.list;
      // });
      try {
				const response = await api.commAuth();
				if(response.data.retCode == '0000'){
					this.authType = response.data.data.list;
				}				
			}catch(err){
				
			}
    },
    formReset() {
      var type = this.insertType;
      Object.assign(this.$data, this.$options.data());
      this.insertType = type;
    },
  }
}
</script>
