<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" onSubmit="return false;">
          <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 w30">
              <th>이름</th>
              <td colspan="2"><input type="text" v-model="userNm" /></td>
              <th>구분</th>
              <td colspan="2">&nbsp;&nbsp;&nbsp;{{ userType }}</td>
            </tr>
            <tr class="tr_input w30">
              <th>등록일</th>
              <td colspan="2">&nbsp;&nbsp;&nbsp;{{ regDt }}</td>
              <th>휴대폰번호</th>
              <td colspan="2">
                  <input type="text" v-model.trim="mdn" @keypress="onlyNum" @input="onlyNum" maxlength="11" />
              </td>
            </tr>
            <tr class="tr_input w75">
              <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" /></td>
            </tr>
            <tr class="tr_input w30">
              <th>발송한도 설정</th>
              <td colspan="2" v-if="sendingLimit == '0'">
                <input type="text" v-model="sendingLimit" ref="_sendingLimit" disabled />
              </td>
              <td colspan="2" v-if="sendingLimit != '0'">
                <input type="text" v-model.trim="sendingLimit" ref="_sendingLimit" @keypress="onlyNum" @input="onlyNum" maxlength="20" />
              </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="userStat" />
                <label for="right_radio1">사용</label>
                <input type="radio" name="userStat" value="02" id="right_radio2" v-model="userStat" />
                <label for="right_radio2">정지</label>
              </td>
              <th>최종 접속일</th>
              <td colspan="2">{{ lastLoginDt }}</td>
            </tr>
            <tr>
              <th>메모</th>
              <td colspan="5">
                <div class="input-memo">
                  <textarea
                    class="memo_text"
                    placeholder="메모 입력란입니다. 작성글은 저장 버튼으로 저장되고 마지막 저장 내용은 남아 있습니다"
                    v-model="memo"
                  ></textarea>
                  <!--
										<textarea class="memo_text" cols="160" rows="10" placeholder="메모 입력란입니다. 작성글은 저장 버튼으로 저장되고 마지막 저장 내용은 남아 있습니다" v-model="memo"></textarea>
									-->
                  <!--

										textarea 구글 검색하셔서 태그 옵션 더 확인해보면 좋아요
										<textarea name="" id="" cols="30" rows="10" placeholder="메모 입력란입니다. 작성글은 저장 버튼으로 저장되고 마지막 저장 내용은 남아 있습니다"></textarea>
									-->
                  <button type="button" class="button grey btn-a" @click="memoTotalPopOpen()">전체 메모보기</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div>
        <div class="info">
          <div class="count">
            사용자ID 정보
            <p>( 최대 100개까지 등록 가능 )</p>
          </div>
          <div class="button_group" v-show="isActive">
            <button type="button" class="button blue add" @click="memberInsertPopOpen()">사용자 ID 생성</button>
            <button type="button" class="button blue add" @click="excelPopOpen()">사용자 ID 대량생성</button>
            <button type="button" class="button white del" @click="deleteMember()">삭제</button>
          </div>
        </div>
        <div class="table">
          <table>
            <colgroup>
              <col width="10%" />
              <col width="15%" />
              <col width="15%" />
              <col width="15%" />
              <col width="15%" />
              <col width="15%" />
              <col width="15%" />
            </colgroup>
            <thead>
              <tr>
                <th>
                  <input type="checkbox" id="admin_check1" v-model="selectAll" /><label for="admin_check1"></label>
                </th>
                <th>No</th>
                <th>ID</th>
                <th>이름</th>
                <th>휴대폰번호</th>
                <th>ID 잠금</th>
                <th>수정</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(option, i) in list" v-bind:key="i">
                <td>
                  <input type="checkbox" :id="'chk' + option.userId" v-model="selected" :value="option.userId" /><label
                    :for="'chk' + option.userId"
                  ></label>
                </td>
                <td>{{ option.no }}</td>
                <td>{{ option.userId }}</td>
                <td>{{ option.userNm }}</td>
                <td>{{ option.mdn }}</td>
                <td>
                  <!-- <input type="checkbox" id="user_id_status01" name="user_id_status" v-model="option.userStat" true-value='정상' false-value='사용중지' :style="{cursor: 'default'}" disabled/> -->
                  <input
                    type="checkbox"
                    id="user_id_status01"
                    name="user_id_status"
                    v-model="option.userStat"
                    true-value="정상"
                    false-value="사용중지"
                    disabled
                  />
                  <label class="toggle_switch" for="user_id_status01"></label>
                </td>
                <td v-if="isActive">
                  <button type="button" class="button white btn-a" @click="memberUpdatePopOpen(option.userId)">
                    수정
                  </button>
                </td>
                <td v-else></td>
              </tr>
              <tr v-if="list.length === 0">
                <td colspan="7">등록된 사용자 정보가 없습니다.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="pop-btn2">
        <button class="btn-pcolor" type="button" @click="updateAdminInfoTotal()">저장</button>
        <button class="btn-default" type="button" @click="toComplete()">취소</button>
      </div>

      <member-bulk-reg-pop ref="memberBulkRegPop"> </member-bulk-reg-pop>
      <member-reg-pop ref="memberRegPop"> </member-reg-pop>
      <member-modify-pop ref="memberModifyPop"> </member-modify-pop>
      <memo-total-pop ref="memoTatalListPop"> </memo-total-pop>
      <common-modal ref="commmonModal"></common-modal>
      <validation-confirm-pop ref="validationConfirmPopModal"> </validation-confirm-pop>
    </div>
  </div>
</template>
<style>
.defaultCursor {
  cursor: default;
}
</style>
<script>
import custMgtApi from '../service/custMgtApi.js';
import { utils_mixin, chkPattern2 } from '../service/mixins';
import MemberBulkRegPop from '../components/MemberBulkRegPop';
import MemberRegPop from '../components/MemberRegPop';
import MemberModifyPop from '../components/MemberModifyPop';
import MemoTotalPop from '../components/MemoTotalPop';
import commonModal from '@/components/modal/commonModal';
import ValidationConfirmPop from '@/modules/custMgt/components/ValidationConfirmPop';

export default {
  name: 'memberAdminDetail',
  mixins: [utils_mixin, chkPattern2],
  watch: {
    stat() {
    },
  },
  data() {
    return {
      row: {},
      list: [],
      totalItems: 0,
      isView: 1,
      userNm: '',
      regDt: '',
      userType: '',
      userId: '',
      adminId: '',
      adminNm: '',
      sendingLimit: '',
      lineType: '',
      userStat: '',
      lastLoginDt: '',
      memo: '',
      mdn: '',
      email: '',
      userTotalCnt: 0,
      selected: [],
      svcUserId: '',
      ezSvcUserAuthKey: '',
      homePageUrl: '',
      isActive: true,
      //applyTbStyle: 'cursor: default;',
      oldMemo: '',
    };
  },
  props: {
    serviceId: {
      type: String,
      default: '',
    },
  },
  components: {
    MemberBulkRegPop,
    MemberRegPop,
    MemberModifyPop,
    MemoTotalPop,
    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);
    }    
  },
  destroyed() {
    this.$store.commit('searchcondition/updateSearchCondition', {
      page: 1,
      perPage: 50,
      params: {
        searchType1: '',
        searchType2: '',
        searchText1: '',
      },
    });
    this.$store.commit('dataStore/updateDataStore', '');
  },
  mounted() {},
  computed: {
    selectAll: {
      get() {
        return this.list ? (this.selected ? this.selected.length === this.list.length : false) : false;
      },
      set(value) {
        const selected = [];
        if (value) {
          this.list.forEach((com) => {
            selected.push(com.userId);
          });
        }

        this.selected = selected;
      },
    },
  },
  methods: {
    valAlert(props) {      
      this.$refs.commmonModal.alertModalOpen(props);
    },
    valConfirm(props) {
      this.$refs.commmonModal.confirmModalOpen(props);
    },
    async memberDetail(serviceId) {      
      this.svcUserId = serviceId;      
      this.row.userId = serviceId;
      
      try {
        const response = await custMgtApi.memberAdminDetail(this.row);
        const result = response.data;
        if (result != null && result.retCode == '0000') {
          // this.formReset();
          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.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
          this.sendingLimit = result.data.sendingLimit;
          this.lineType = result.data.lineType;
          this.userStat = result.data.userStat;
          if (this.userStat === '02') {
            this.isActive = false;
          }
          this.lastLoginDt = result.data.lastLoginDt;
          this.memo = result.data.memo;
          this.oldMemo = result.data.memo;
          this.mdn = result.data.mdn;
          this.email = result.data.email;
          this.list = result.data.list;
          this.userTotalCnt = result.data.list.length;
          this.totalItems = result.data.paging.totalCnt;
          this.homePageUrl = result.data.homePageUrl;
          this.ezSvcUserAuthKey = result.data.authKey;
        }
      } catch (error) {
        this.row.title = '청약고객관리';
        this.row.msg1 = '실패 하였습니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
      }
    },
    fnPhoneDash(e) {
      const pattern_notNumber = /[^-0-9]/g; // 숫자가 아닌것 체크
      // 숫자 외 입력시
      if (pattern_notNumber.test(e.target.value)) {
        alert("휴대폰번호는 숫자만 입력 가능 합니다.");
        this.userInfo.hpNo = e.target.value.replace(/[^0-9]/g, "");
      }
    },
    /** 저장 */
    async updateAdminInfoTotal() {

      if(this.userNm == ""){
        this.row.title = '청약고객관리';
        this.row.msg1 = '이름을 입력해 주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
        return false;
      }
      if(this.mdn == ""){
        this.row.title = '청약고객관리';
        this.row.msg1 = '휴대폰번호를 입력해 주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
        return false;
      }else{
        let regExp = /^01([0|1|6|7|8|9])?([0-9]{3,4})?([0-9]{4})$/;
        if (!regExp.test(this.mdn)) {
          this.row.title = '청약고객관리';
          this.row.msg1 = '휴대폰 번호를 올바르게 입력하여 주십시오.';
          this.$refs.commmonModal.alertModalOpen(this.row);
          return false;
        }
      }
      if(this.email == ""){
        this.row.title = '청약고객관리';
        this.row.msg1 = '이메일을 입력해 주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
        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);
          return false;
        }
      }
      if(this.sendingLimit == ""){
        this.row.title = '청약고객관리';
        this.row.msg1 = '발송한도 설정을 입력해 주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
        return false;
      }
      this.info = {};
      if(this.memo != this.oldMemo){
        if(this.memo == "" || this.memo == null){
          this.row.title = '청약고객관리';
          this.row.msg1 = '변경 내용에 대한 메모를 입력해 주세요.';
          this.$refs.commmonModal.alertModalOpen(this.row);
          return false;
        }
        this.info.memo = this.memo;
      }else{
        if(this.memo == "" || this.memo == null || this.memo == this.oldMemo){
          this.row.title = '청약고객관리';
          this.row.msg1 = '변경 내용에 대한 메모를 입력해 주세요.';
          this.$refs.commmonModal.alertModalOpen(this.row);
          return false;
        }
        this.info.memo = this.memo;
      }
      
      this.info.userId        = this.adminId;
      this.info.userNm        = this.userNm;
      this.info.hpNo          = this.mdn;
      this.info.email         = this.email;
      this.info.sendingLimit  = this.sendingLimit;
      this.info.lineType      = this.lineType;
      this.info.userStat      = this.userStat;
      

      try {
        const response = await custMgtApi.updateAdminInfoTotal(this.info);
        const result = response.data;
        if (result != null && result.retCode == '0000') {
          this.row.title = '청약고객관리';
          this.row.msg1 = '저장 하였습니다.';
          this.$refs.commmonModal.alertModalOpen(this.row);
          this.memberDetail(this.row.userId);
        } else if (result != null && result.retCode == '4019') {
          this.row.title = '청약고객관리';
          this.row.msg1 = '발송한도금액이 정액한도금액보다 작습니다.';
          this.$refs.commmonModal.alertModalOpen(this.row);
        } else {
          this.row.title = '청약고객관리';
          this.row.msg1 = '실패 하였습니다.';
          this.$refs.commmonModal.alertModalOpen(this.row);
        }
      } catch (error) {
        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 });
    },

    excelPopOpen() {
      if (this.userTotalCnt >= 100) {
        // 사용자등록제한_최대100개까지
        this.$refs.validationConfirmPopModal.validationMaxlimitOpen();
        return false;
      }
      this.$refs.memberBulkRegPop.excelPopOpen(this.adminId, this.totalItems);
    },
    memberUpdatePopOpen(target) {
      this.row.userId = target;
      this.row.adminId = this.adminId;
      this.$refs.memberModifyPop.memberUpdateModalOpen(this.row);
    },
    memberInsertPopOpen() {
      if (this.userTotalCnt >= 100) {
        // 사용자등록제한_최대100개까지
        this.$refs.validationConfirmPopModal.validationMaxlimitOpen();
        return false;
      }
      this.row.adminId = this.adminId;
      this.row.userTotalCnt = this.userTotalCnt;
      this.$refs.memberRegPop.memberInsertModalOpen(this.row);
    },
    memoTotalPopOpen() {
      this.row.adminId = this.adminId;
      this.$refs.memoTatalListPop.memoTotalModalOpen(this.row);
    },
    deleteMember() {
      if (this.selected.length === 0) {
        this.row.title = '청약고객관리';
        this.row.msg1 = '삭제대상을 체크해주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
        return false;
      }
      this.row.title = '청약고객관리';
      this.row.msg1 = '삭제 하시겠습니까?';
      this.$refs.commmonModal.confirmModalOpen2(this.row);
    },
    async memberDelete() {
      var serviceId = this.adminId;
      this.row.list = this.selected.map((row) => ({ userId: row }));
      this.row.adminId = this.adminId;
      try {
        let response = await custMgtApi.deleteUser(this.row);
        const result = response.data;
        if (result != null && result.retCode == '0000') {
          this.memberDetail(serviceId);
        } else {
          this.row = {};
          this.row.title = '청약고객관리';
          this.row.msg1 = '실패 하였습니다.';
          this.$refs.commmonModal.alertModalOpen(this.row);
        }
      } catch (error) {
        this.row = {};
        this.row.title = '청약고객관리';
        this.row.msg1 = '실패 하였습니다.';
        this.$refs.commmonModal.alertModalOpen(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() {
    //   Object.assign(this.$data, this.$options.data());
    // },
    homeLogin() {      
      
      if(this.userStat == '02'){
        this.row = {};
        this.row.title = '로그인';
        this.row.msg1 = '사용 중지된 계정입니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
        return false;
      }else if(this.userStat == '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;
      //console.log(this.$refs.form);
      this.$refs.form.submit();
    },
    confirmCalbackFnc(props) {
      if (props.result) {
        this.memberDelete();
      }
    },

    // 대량 등록후 확인 처리
    failFileuploadOk() {
      // 대량등록 팝업 닫기
      this.$refs.memberBulkRegPop.excelPopClose();
      // reroad
      this.memberDetail(this.$route.params.serviceId);
    },
    successFileuploadOk() {
      // 대량등록 팝업 닫기
      this.$refs.memberBulkRegPop.excelPopClose();
      // reroad
      this.memberDetail(this.$route.params.serviceId);
    },
  },
};

import '../../../assets/css/checktoggle.css';
</script>