<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="info">
        <div class="title">고객정보</div>
      </div>
      <div class="table table_form">
        <!--					<form autocomplete="off">-->
        <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 w75">
              <th>고객사명</th>
              <td colspan="2"><input type="text" disabled v-model="custNm" /></td>
            </tr>
            <tr class="tr_input w75">
              <th>대표자명</th>
              <td colspan="2"><input type="text" disabled v-model="reprNm" /></td>
              <th>사용자 구분</th>
              <td colspan="2"><input type="text" disabled v-model="custType" /></td>
            </tr>
            <tr class="tr_input">
              <th>사업장 주소</th>
              <td colspan="5">
                <div class="input-address">
                  <input type="text" disabled v-model="adr1" />
                  <input type="text" disabled v-model="adr2" />
                  <input type="text" disabled v-model="adr3" />
                </div>
              </td>
            </tr>
            <tr class="tr_input">
              <th>사업자등록번호</th>
              <td colspan="2">
                <div class="input-bnumber">
                  <input type="text" disabled v-model="bregNo1" />
                  <input type="text" disabled v-model="bregNo2" />
                  <input type="text" disabled v-model="bregNo3" />
                </div>
              </td>
              <th>법인등록번호</th>
              <td colspan="2">
                <div class="input-double">
                  <input type="text" disabled v-model="cprRegNo1" />
                  <input type="text" disabled v-model="cprRegNo2" />
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <!--					</form>-->
      </div>
      <div class="info">
        <div class="title">청약정보</div>
      </div>
      <div class="table table_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 w75">
              <th>가입일</th>
              <td colspan="2"><input type="text" disabled v-model="subsDt" /></td>
              <th>상태</th>
              <td colspan="2">
                <input type="text" disabled v-model="stat" />
              </td>
            </tr>
            <tr class="tr_input w75">
              <th>요금제</th>
              <td colspan="2"><input type="text" disabled v-model="plan" /></td>
              <th>가입번호</th>
              <td colspan="2"><input type="text" disabled v-model="subsNo" /></td>
            </tr>
            <tr class="tr_input w75">
              <th>관리자명</th>
              <td colspan="2">
                <div class="input-double">
                  <input type="text" disabled v-model="adminId" />
                  <input type="text" disabled v-model="adminNm" />
                  <button type="button" class="button grey btn-a" @click="searchIDPopOpen">변경</button>
                </div>
              </td>
              <th>유치자명</th>
              <td colspan="2">
                <div class="input-double">
                  <input type="text" disabled v-model="channelId" />
                  <input type="text" disabled v-model="channelNm" />
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="info">
        <div class="title">담당자 정보</div>
      </div>
      <div class="table table_form">
        <form autocomplete="off">
          <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 w75">
                <th>담당자명</th>
                <td colspan="2">
                  <div class="input-double button-double">
                    <input type="text" disabled v-model="serviceId" />
                    <input type="text" disabled v-model="userNm" />
                  </div>
                </td>
                <th>구분</th>
                <td colspan="2"><input type="text" disabled v-model="useAuth" /></td>
              </tr>
              <tr class="tr_input w75">
                <th>휴대폰 번호</th>
                <td colspan="2"><input type="text" disabled v-model="mdn" /></td>
                <th>이메일</th>
                <td colspan="2"><input type="text" disabled v-model="email" /></td>
              </tr>
              <tr class="tr_input w75">
                <th>이월누적금액</th>
                <td colspan="2">
                  <div class="input-double button-double">
                    <input type="text" disabled v-model="carryOver" />
                    <button type="button" class="button grey" @click="carryOverListPopOpen()">이월금액보기</button>
                  </div>
                </td>
                <th>사용자ID 개수</th>
                <td colspan="2">
                  <div class="input-double button-double">
                    <input type="text" disabled v-model="userCnt" />
                    <button type="button" class="button grey" @click="goMemberDetail">사용자ID 확인</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </form>
      </div>
      <div class="pop-btn2">
        <button class="btn-pcolor" type="button" @click="confirmPopOpen()">저장</button>
        <button class="btn-default" type="button" @click="toComplete()">취소</button>
      </div>

      <!--이월금액 모달.-->
      <carry-Over-List-Pop ref="carryOverListPop"></carry-Over-List-Pop>
      <!--수정 확인 모달-->
      <validation-confirm-pop ref="validationConfirmPop"></validation-confirm-pop>
      <!--관리자명 조회 모달-->
      <common-modal ref="commmonModal"></common-modal>
    </div>
    <admin-nm-pop ref="adminNmPop"></admin-nm-pop>
  </div>
</template>

<script>
import custMgtApi from '../service/custMgtApi.js';
import CarryOverListPop from '../components/CarryOverListPop';
import ValidationConfirmPop from '../components/ValidationConfirmPop';
import AdminNmPop from '../components/AdminNmPop';
import commonModal from '../components/commonModal';
//import { mapGetters } from 'vuex';

export default {
  name: 'subsDetail',
  data() {
    return {
      row: {},
      custNm: '',
      reprNm: '',
      custType: '',
      adr1: '',
      adr2: '',
      adr3: '',
      bregNo: '',
      bregNo1: '',
      bregNo3: '',
      bregNo2: '',
      cprRegNo: '',
      cprRegNo1: '',
      cprRegNo2: '',
      birth: '',
      subsDt: '',
      stat: '',
      plan: '',
      subsNo: '',
      adminId: '',
      adminNm: '',
      bindDis: '',
      channelId: '',
      channelNm: '',
      useAuth: '',
      userNm: '',
      mdn: '',
      email: '',
      carryOver: '',
      userCnt: '',
      saveConfirm: false,
      props: {},
    };
  },
  props: {
    serviceId: {
      type: String,
      default: '',
    },
  },
  components: {
    CarryOverListPop,
    ValidationConfirmPop,
    AdminNmPop,
    commonModal,
  },
  created() {
    this.$store.commit('login/isLogin', true);

    if (this.$route.params.serviceId != null) {
      // 리스트에서 상세 호출시
      this.$store.commit('dataStore/updateDataStore', this.$route.params.serviceId);
      this.subsDetail(this.$route.params.serviceId);
      //this.setMenuActive();
    }
    // else{ // 상세 화면에서 새로고침 호출시
    //   var serviceId = this.$store.getters["dataStore/getDataStore"];
    //   //this.row.serviceId = serviceId;
    //   //return $router.push({ path: '/custMgt/subsDetail', params:  this.row});
    //   //if(serviceId == ''){
    //     //window.top.location.href = '/custMgt/subsList';
    //     //this.
    //     //$router.push({ path: '/custMgt/subsList', params:  })
    //   //}
    //   this.subsDetail(serviceId);
    // }
  },

  destroyed() {
    this.$store.commit('dataStore/updateDataStore', '');
  },
  methods: {
    callAlert(props) {
      this.$refs.commmonModal.alertModalOpen(props);
    },
    doValidate() {
      return true;
    },
    // 저장 후 부모창 호출.
    toComplete() {
      this.row.searchType1 = '';
      this.row.searchType2 = '';
      this.row.searchType3 = '';
      this.row.searchText1 = '';
      this.row.startDt = '';
      this.row.endDt = '';
      this.row.page = 1;
      this.row.serviceId = this.$route.params.serviceId;
      console.log(this.row);
      this.$router.push({ name: 'subsList', params: this.row });
    },
    async subsDetail(serviceId) {
      this.row.serviceId = serviceId;

      try {
        const response = await custMgtApi.subsDetail(this.row);
        const result = response.data;
        if (result != null && result.retCode == '0000') {
          //데이터값이 널이면 오류처리
          this.custNm = this.fromHtmlEntities(result.data.custNm);
          this.reprNm = result.data.reprNm;
          this.custType = result.data.custType;
          this.adr1 = this.fromHtmlEntities(result.data.adr1);
          this.adr2 = this.fromHtmlEntities(result.data.adr2);
          this.adr3 = this.fromHtmlEntities(result.data.adr3);
          this.bregNo = result.data.bregNo;
          this.cprRegNo = result.data.cprRegNo;
          this.birth = result.data.birth;
          this.subsDt = result.data.subsDt;
          this.stat = result.data.stat;
          this.plan = result.data.plan;
          this.subsNo = result.data.subsNo;
          this.adminId = result.data.adminId;
          this.adminNm = result.data.adminNm;
          this.bindDis = result.data.bindDis;
          this.channelId = result.data.channelId;
          this.channelNm = result.data.channelNm;
          this.serviceId = result.data.serviceId;
          this.useAuth = result.data.useAuth;
          this.userNm = result.data.userNm;
          this.mdn = result.data.mdn;
          this.email = result.data.email;
          this.carryOver = result.data.carryOver;
          this.userCnt = result.data.userCnt;
          if (this.bregNo != '' && this.bregNo != null) {
            this.bregNo1 = this.bregNo.substr(0, 3);
            this.bregNo2 = this.bregNo.substr(3, 2);
            this.bregNo3 = this.bregNo.substr(5);
          }
          if (this.cprRegNo != '' && this.cprRegNo != null) {
            this.cprRegNo1 = this.cprRegNo.substr(0, 6);
            this.cprRegNo2 = this.cprRegNo.substr(6);
          }
        } 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);
      }
    },

    // updateAdminInfo 청약고객-사용정보-관리자ID,관리자명 수정
    async updateAdminInfo() {
      this.row.serviceId = this.$route.params.serviceId;
      this.row.adminId = this.adminId;
      this.row.adminNm = this.adminNm;

      try {
        const response = await custMgtApi.updateAdminInfo(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 (error) {
        this.row.title = '청약고객관리';
        this.row.msg1 = '실패 하였습니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
      }
    },
    carryOverListPopOpen: function () {
      this.$refs.carryOverListPop.carryOverListPopOpen(this.serviceId);
    },
    confirmPopOpen: function () {
      if (this.doValidate()) {
        this.$refs.validationConfirmPop.confirmUpdateSubOpen();
      }
    },
    /* confirmCalbackFnc: function (props) {
      if (props.result) {
      }
    }, */
    searchIDPopOpen: function () {
      var params = {
        serviceId: this.serviceId,
        serviceSeq: '',
        parentDiv: 'subsDetail',
      };
      this.$refs.adminNmPop.ModalOpen(params);
    },
    goMemberDetail: function () {
      this.$router.push({ name: 'memberAdminDetail', params: { serviceId: this.row.serviceId } });
    },

    // 메뉴 활성화
    setMenuActive() {
      const activedMenu = document.querySelectorAll('.main_menu .is-current');
      activedMenu[0].classList.remove('is-current');
      const nowMenu = document.querySelectorAll('.customer');
      nowMenu[0].classList.add('is-current');

      //menuList.classList.add('is-current');
    },

    // 조회후 모달창 닫기
    checkFocus() {
      this.$router.go(-1);
    },
    fromHtmlEntities(str) {
      return (str + '').replace(/&#\d+;/gm, function (s) {
        return String.fromCharCode(s.match(/\d+/gm)[0]);
      });
    },
  },
};
</script>
