<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>
              <th>구분</th>
              <td colspan="2">&nbsp;&nbsp;&nbsp;{{ userType }}</td>
            </tr>
            <tr class="tr_input">
              <th>등록일</th>
              <td colspan="2">&nbsp;&nbsp;&nbsp;{{ regDt }}</td>
              <th>휴대폰번호</th>
              <td colspan="2">
                <input type="text" v-model="mdn" ref="_phone" @input="onlyNum" maxlength="11"/>
              </td>
            </tr>
            <tr class="tr_input">
              <th>ID</th>
              <td colspan="2">
                &nbsp;&nbsp;&nbsp;{{ userId }}
                <button type="button" class="button grey btn-a" @click="homeLogin">로그인</button>
              </td>
              <th>이메일</th>
              <td colspan="2">
                <input type="text" v-model="email" ref="_email" />
              </td>
            </tr>
            <tr class="tr_input w30">
              <th>관리자 ID</th>
              <td colspan="2">&nbsp;&nbsp;&nbsp;{{ adminId }}</td>
              <th>라인타입</th>
              <td colspan="2">
                <select name="" id="" v-model="lineType">
                  <option value="NORMAL">일반</option>
                  <option value="BATCH">배치</option>
                  <option value="REAL">실시간</option>
                </select>
              </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>최종접속일</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() {
    },
  },
  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/updateDataStore', this.$route.params.serviceId);
      this.userId = this.$route.params.serviceId;
      this.memberDetail(this.$route.params.serviceId);
    } 
    // else {
    //   var userId2 = this.$store.getters['dataStore/getUserId'];
    //   this.userId = userId2;
    //   this.memberDetail(this.userId);
    // }
  },
  destroyed() {
    this.$store.commit('dataStore/updateDataStore', '');
  },
  mounted() {},
  methods: {
    async memberDetail(serviceId) {
      this.svcUserId = serviceId;
      this.row.userId = serviceId;
      try {
        const response = await custMgtApi.memberDetail(this.row);
        const result = response.data;        
        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) {
        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;
      this.row.lineType   = this.lineType;
      try {
        const response = await custMgtApi.updateUser(this.row);
        const result = response.data;
        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.row.serviceId = this.userId;
      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;
      }else{
        let regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
        if (!regExp.test(this.email)) {
          this.row.title = '청약고객관리';
          this.row.msg1 = '이메일을 올바르게 입력하여 주십시오.';
          this.$refs.commmonModal.alertModalOpen(this.row);
          this.$refs._email.focus();
          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();
        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() {      
      if(this.stat == '02'){
        this.row = {};
        this.row.title = '로그인';
        this.row.msg1 = '사용 중지된 계정입니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
        return false;
      }else if(this.stat == '99'){        
        this.row = {};
        this.row.title = '로그인';
        this.row.msg1 = '삭제된 계정입니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
        return false;      
      }

      this.$refs.form.action = this.homePageUrl;
      this.svcUserId = this.userId;
      this.$refs.form.submit();
    },
  },
};
</script>