<template>
  <div class="contents">
    <div class="contents_wrap">
      <div class="top_wrap">
        <h3 class="title">유치현황관리</h3>
        <p class="breadcrumb">유치현황관리 &gt; 유치고객 상세정보</p>
      </div>
      <div class="info">
        <div class="title">상세 정보</div>
      </div>
      <div class="table table_form m50">
        <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="subsSttusNm" /></td>
            </tr>
            <tr class="tr_input w75">
              <th>고객사</th>
              <td colspan="2"><input type="text" disabled v-model="custNm" /></td>
              <th>요금제</th>
              <td colspan="2"><input type="text" disabled v-model="plan" /></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="custTyNm" /></td>
            </tr>
            <tr class="tr_input">
              <th>사업자등록번호</th>
              <td colspan="2">
                <div class="input-bnumber">
                  <input type="text" disabled v-model="bizrno1" />
                  <input type="text" disabled v-model="bizrno2" />
                  <input type="text" disabled v-model="bizrno3" />
                </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>
            <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-double">
                  <input type="text" disabled v-model="channelId" />
                  <input type="text" disabled v-model="channelNm" />
                </div>
              </td>
              <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>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="info">
        <div class="count">
          발송건수
          <p>( 최근 3년 사용 전월까지 확인 가능하며, 청구금액은 유큐브에서 확인 가능합니다. )</p>
        </div>
        <div class="button_group">
          <button type="button" class="button blue download" @click="excelDown()">엑셀 다운로드</button>
        </div>
      </div>
      <div class="table calculate">
        <form autocomplete="off">
          <table class="table-r">
            <colgroup>
              <col width="16%" />
              <col width="16%" />
              <col width="16%" />
              <col width="16%" />
              <col width="16%" />
              <col width="20%" />
            </colgroup>
            <thead>
              <tr>
                <th rowspan="2">날짜</th>
                <th colspan="5">채널별 발송 건수</th>
              </tr>
              <tr class="total">
                <th>전체</th>
                <th>SMS</th>
                <th>LMS</th>
                <th>MMS</th>
                <th>알림톡</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>합계</td>
                <td>{{ sndCntTotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
                <td>{{ sndCntSTotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
                <td>{{ sndCntLTotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
                <td>{{ sndCntMTotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
                <td>{{ sndCntATotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
              </tr>
              <tr v-for="(option, i) in list" v-bind:key="i">
                <td>{{ option.sumYm }}</td>
                <td>{{ option.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
                <td>{{ option.sndCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
                <td>{{ option.sndCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
                <td>{{ option.sndCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
                <td>{{ option.sndCntA.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
              </tr>
            </tbody>
          </table>
        </form>
      </div>

      <div class="pop-btn2">
        <button class="btn-pcolor" type="button" @click="goChannelList()">확인</button>
        <button class="btn-default" type="button" @click="goChannelList()">취소</button>
      </div>
    </div>
    <admin-nm-pop ref="adminNmPop"></admin-nm-pop>
  </div>
</template>

<script>
import api from '@/service/api';
import channelMgtApi from '../service/channelMgtApi';
import moment from 'moment';
import xlsx from '@/common/excel';
import AdminNmPop from '../../custMgt/components/AdminNmPop';

export default {
  name: 'channelDetail',
  data() {
    return {
      row: {},
      subsDt: '',
      norgNm: '',
      userSeq: '',
      loginId: '',
      custNm: '',
      bizrno: '',
      bizrno1: '',
      bizrno2: '',
      bizrno3: '',
      userNm: '',
      subsSttusCd: '',
      custTyCd: '',
      sndCnt: '',
      adr1: '',
      adr2: '',
      adr3: '',
      cprRegNo: '',
      cprRegNo1: '',
      cprRegNo2: '',
      adminId: '',
      adminNm: '',
      channelId: '',
      channelNm: '',
      reprNm: '',
      plan: '',
      sumYm: '',
      sndCntS: '',
      sndCntL: '',
      sndCntM: '',
      sndCntA: '',
      succCnt: '',
      succCntS: '',
      succCntL: '',
      succCntM: '',
      succCntA: '',
      sndCntTotal: 0,
      sndCntSTotal: 0,
      sndCntLTotal: 0,
      sndCntMTotal: 0,
      sndCntATotal: 0,
      list: [],
      totalCnt: '',
      props: {},
      excelHeader: [],
      pageType: 'CHANNELDETAIL',
      serviceId: '',
      subsSttusNm: '',
      custTyNm: '',
    };
  },
  // props: {
  //   userSeq: {
  //     type: String,
  //     default: "",
  //   },
  // },
  components: {
    channelMgtApi,
    AdminNmPop,
  },
  created() {
    this.getExcelHeader();
    if (this.$route.params.userSeq != null) {
      //리스트에서 상세 호출
      this.$store.commit('dataStore/updateUserSeq', this.$route.params.userSeq);
      this.channelDetail(this.$route.params.userSeq);
    }
  },
  destroyed() {
    this.$store.commit('dataStore/updateUserSeq', '');
    this.$store.commit('dataStore/updateUserId', '');
  },
  methods: {
    async channelDetail(userSeq) {
      this.row.userSeq = userSeq;

      try {
        const response = await channelMgtApi.channelDetail(this.row);
        const result = response.data;
        var sndCntTotal = 0;
        var sndCntSTotal = 0;
        var sndCntLTotal = 0;
        var sndCntMTotal = 0;
        var sndCntATotal = 0;
        if (result != null && result.retCode == '0000') {
          //데이터값이 널이면 오류처리

          for (var i = 0; i < result.data.list.length; i++) {
            sndCntTotal = sndCntTotal + Number(result.data.list[i].sndCnt);
            sndCntSTotal = sndCntSTotal + Number(result.data.list[i].sndCntS);
            sndCntLTotal = sndCntLTotal + Number(result.data.list[i].sndCntL);
            sndCntMTotal = sndCntMTotal + Number(result.data.list[i].sndCntM);
            sndCntATotal = sndCntATotal + Number(result.data.list[i].sndCntA);
          }
          this.sndCntTotal = sndCntTotal;
          this.sndCntSTotal = sndCntSTotal;
          this.sndCntLTotal = sndCntLTotal;
          this.sndCntMTotal = sndCntMTotal;
          this.sndCntATotal = sndCntATotal;
          this.list = result.data.list;
          this.sndCntS = result.data.sndCntS;
          this.sndCntL = result.data.sndCntL;
          this.sndCntM = result.data.sndCntM;
          this.sndCntA = result.data.sndCntA;
          this.loginId = result.data.loginId;
          this.custNm = this.fromHtmlEntities(result.data.custNm);
          this.subsDt = result.data.subsDt;
          this.subsSttusCd = result.data.subsSttusCd;
          this.reprNm = result.data.reprNm;
          this.bizrno = result.data.bizrno;
          this.channelId = result.data.channelId;
          this.channelNm = result.data.channelNm;
          this.adminId = result.data.adminId;
          this.adminNm = result.data.adminNm;
          this.cprRegNo = result.data.cprRegNo;
          this.adr1 = this.fromHtmlEntities(result.data.adr1);
          this.adr2 = this.fromHtmlEntities(result.data.adr2);
          this.adr3 = this.fromHtmlEntities(result.data.adr3);
          this.custTyCd = result.data.custTyCd;
          this.plan = result.data.plan;
          this.subsSttusNm = result.data.subsSttusNm;
          this.custTyNm = result.data.custTyNm;
          if (this.bizrno != '' && this.bizrno != null) {
            this.bizrno1 = this.bizrno.substr(0, 3);
            this.bizrno2 = this.bizrno.substr(3, 2);
            this.bizrno3 = this.bizrno.substr(5);
          }
          if (this.cprRegNo != '' && this.cprRegNo != null) {
            this.cprRegNo1 = this.cprRegNo.substr(0, 6);
            this.cprRegNo2 = this.cprRegNo.substr(6);
          }
          this.serviceId = result.data.userId;
        }
      } catch (error) {}
    },

    getExcelHeader() {
      // 헤더를 mockup으로 관리한다.
      channelMgtApi.getExcelHeader(this.pageType).then((res) => {
        this.excelHeader = res;
      });
    },

    async excelDown() {
      if (this.list.length <= 0) {
        // this.row.title = '유치채널현황';
        // this.row.msg1 = '조회된 데이터가 없습니다.';
        // this.$refs.commonModal.alertModalOpen(this.row);
        return false;
      }
      let today = moment().format('YYYYMMDDHHmmss');
      const saveFileName = `유치고객발송건수_${today}.xls`;
      const data = await this.getExcelDataDown();

      // 엑셀 합계 데이터 구하기
      var sndCntTotal = 0;
      var sndCntSTotal = 0;
      var sndCntLTotal = 0;
      var sndCntMTotal = 0;
      var sndCntATotal = 0;
      for (var i = 0; i < data.list.length; i++) {
        sndCntTotal = sndCntTotal + Number(data.list[i].sndCnt);
        sndCntSTotal = sndCntSTotal + Number(data.list[i].sndCntS);
        sndCntLTotal = sndCntLTotal + Number(data.list[i].sndCntL);
        sndCntMTotal = sndCntMTotal + Number(data.list[i].sndCntM);
        sndCntATotal = sndCntATotal + Number(data.list[i].sndCntA);
      }
      console.log('sndCntTotal : ' + sndCntTotal);
      console.log('sndCntSTotal : ' + sndCntSTotal);
      console.log('sndCntLTotal : ' + sndCntLTotal);
      console.log('sndCntMTotal : ' + sndCntMTotal);
      console.log('sndCntATotal : ' + sndCntATotal);
      let totalRow = {
        sumYm: '합계',
        sndCnt: sndCntTotal,
        sndCntA: sndCntATotal,
        sndCntL: sndCntLTotal,
        sndCntM: sndCntMTotal,
        sndCntS: sndCntSTotal,
      };
      // 합계 데이터 추가
      data.list.unshift(totalRow);

      let options = {
        header: this.excelHeader,
        dataOrder: 'header',
      };
      xlsx.export(data.list, saveFileName, options).then(() => {});
    },

    async getExcelDataDown() {
      try {
        let response;
        const params = {
          userSeq: this.row.userSeq,
        };

        response = await channelMgtApi.sendNumberListExcel(params);

        const result = response.data;
        // entity code 변환
        result.data.list = result.data.list.map((item) => {
          return {
            ...item,
            custNm: this.fromHtmlEntities(item.custNm),
          };
        });
        if (result != null && result.retCode == '0000') {
          return result.data;
        } else {
          return false;
        }
      } catch (err) {
        return false;
      }
    }, // end of getExcelDataDown
    goChannelList() {
      this.$router.push({ name: 'channelList' });
    },
    searchIDPopOpen: function () {
      var params = {
        serviceId: this.serviceId,
        serviceSeq: this.row.userSeq,
        parentDiv: 'channelDetail',
      };
      this.$refs.adminNmPop.ModalOpen(params);
    },
    fromHtmlEntities(str) {
      return (str + '').replace(/&#\d+;/gm, function (s) {
        return String.fromCharCode(s.match(/\d+/gm)[0]);
      });
    },
  },
};
</script>
