<template>
  <!-- <div class="wrap bg-wrap"> -->
  <div>
    <div class="dimmed modal33" @click="excelPopClose()"></div>
    <div class="popup-wrap modal33">
      <div class="popup modal33 popup_form">
        <div class="pop-head">
          <h3 class="pop-tit">사용자 ID 대량 생성</h3>
        </div>
        <table>
          <tbody>
          <tr>
            <th>관리자 ID</th>
            <td>{{ adminId }}</td>
          </tr>
          <tr>
            <th>사용자 ID 업로드</th>
            <td>
              <div class="popup-btn2 bulk">
                <input
                    type="file"
                    ref="file"
                    style="display: none"
                    @change="readFile"
                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"                    
                />
                <button class="btn-default" @click="sampleDown">샘플 다운로드</button>
                <button class="button btn-p2color" @click="$refs.file.click()">파일 업로드</button>
              </div>
              <p class="file" id="uploadFile"></p>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="popup-btn2">
          <button class="btn-pcolor" @click="saveExcel">저장</button>
          <button class="btn-default" @click="excelPopClose">취소</button>
        </div>
      </div>
<!--      <validationConfirm-modal ref="validationConfirmPop"></validationConfirm-modal>-->
      <common-modal ref="commmonModal"></common-modal>
    </div>
  </div>
</template>

<script>
import api from '@/service/api';
import custMgtApi from '../service/custMgtApi.js';
import {utils_mixin, chkPattern2} from '../service/mixins';
import xlsx from '@/common/excel';
import moment from 'moment';
import XLSX from 'xlsx';
import commonModal from "../components/commonModal";
// import ValidationConfirmPop from "./ValidationConfirmPop";

export default {
  name: 'memberBulkRegPop',
  mixins: [utils_mixin, chkPattern2],
  data() {
    return {
      row: {},
      excelHeader: [],
      pageType: 'SAMPLE',
      adminId: '',
      varList: ['이름', '휴대폰번호', '기타1', '기타2', '기타3', '기타4'],
      varList2: ['이름', '기타1', '기타2', '기타3', '기타4'],
      nData: [],
      oData: [],
      totalItems: 0,
      totalCnt: 0,
      failCnt: 0,
      insertRowCnt: 0,
      sampleList : [],
    };
  },
  components: {
    // ValidationConfirmPop,
    commonModal
  },
  created() {
    this.getExcelHeader();
  },
  methods: {
    // 모달 띄우기
    excelPopOpen(adminId, totalItems) {
      this.adminId = adminId;
      this.totalItems = totalItems;
      var excelPop = document.getElementsByClassName('modal33');
      for (var i = 0; i < excelPop.length; i++) {
        excelPop[i].style.display = 'block';
      }
    },
    // 모달 끄기
    excelPopClose() {
      //this.formReset();
      var excelPop = document.getElementsByClassName('modal33');
      for (var i = 0; i < excelPop.length; i++) {
        excelPop[i].style.display = 'none';
      }
      // this.$refs.file.reset()
      let element = document.getElementById('uploadFile');
      while (element.firstChild) {
        element.removeChild(element.firstChild);
      }
    },
    // 저장 후 부모창 호출.
    toComplete() {
      this.row.serviceId = this.adminId;
      // 팝업으로 교체 예정
      // if (confirm('정상 업로드 되었습니다.')) {
      this.excelPopClose();      
      this.$parent.memberDetail(this.adminId);
      // }
    },
    async doInsert() {
      if (this.doValidate() && window.confirm('등록 하시겠습니까?')) {
        try {
          const response = await custMgtApi.insertTestId(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();            
          }
        } catch (err) {
          this.row.title = '청약고객관리';
          this.row.msg1 = '실패 하였습니다.';
          this.$refs.commmonModal.alertModalOpen(this.row);
        }
      }
    },
    async sampleDown() {
      let today = moment().format('YYYYMMDDHHmmss');
      const saveFileName = `어드민_사용자ID 대량생성_${today}.xlsx`;

      let options = {
        header: this.excelHeader,
        dataOrder: 'header',
      };
      xlsx.export(this.sampleList, saveFileName, options).then(() => {
      });
    },
    getExcelHeader() {
      // 헤더를 mockup으로 관리한다.
      custMgtApi.getExcelHeader(this.pageType).then((res) => {
        this.excelHeader = res;
      });
      this.getSampleBody();
    },
    getSampleBody() {
      const tempRow = [        
        { id : '', 
          userNm : '',
          mdn : '',
          email : '',
          stat : '사용'
        }        
      ];      
      this.sampleList = tempRow;
    },
    readFile(event) {
      this.nData = [];
      this.oData = [];

      const file = event.target.files[0];

      // 파일 개수 제한
      if(file != null){
        let element = document.getElementById('uploadFile');
        while (element.firstChild) {
          element.removeChild(element.firstChild);
        }
      }
      // 파일 이름 체크
      var fileName = file.name;
      var fileExpend = fileName .slice(fileName .indexOf(".") + 1).toLowerCase();      
      if(fileExpend != "xlsx"){
        //alert("파일은 (xlsx) 형식만 등록 가능합니다.");
        this.row.title = '파일 업로드';
        this.row.msg1 = '업로드 할 수 없는 파일 형식입니다.';
        this.row.msg2 = '샘플 파일을 내려 받아 사용해주세요.';
        // this.row.msg1 = '샘플과 동일한 확장자가 아닙니다.';
        // this.row.msg1 = '다시 업로드 해주세요.';

        this.$refs.commmonModal.alertModalOpen(this.row);
        return false;
      }


      // inner Html.
      const button = document.createElement('button');
      const text = document.createElement('p');
      text.innerText = file.name;
      button.addEventListener('click', () => {
        this.delFile(event);
      });
      button.innerText = 'X';
      const root = document.getElementById('uploadFile');
      root.appendChild(text);
      root.appendChild(button);

      let reader = new FileReader();
      let tmpResult = {};
      const vm = this;
      reader.onerror = (e) => {
        this.row.title = '청약고객관리';
        this.row.msg1 = '파일을 읽는 동안 에러가 발생 했습니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
      };
      // reader.onloadend = (e) => {
      // };

      reader.onload = (e) => {
        let data = reader.result;
        let workbook = XLSX.read(data, {type: 'binary'});

        /** header 규격 비교 start */
        var readHeader = vm.get_header_row(workbook.Sheets["Sheet1"]);
        var headersArr = [];
        var excelHeaders = this.excelHeader[0];
        for(var i=0; i < excelHeaders.length; i++){
          var headerCol = excelHeaders[i];
          headersArr.push(headerCol.name);
        }

        if(readHeader.length == headersArr.length){
          for(var i=0; i<readHeader.length; i++){
            if(readHeader[i] != headersArr[i]){
              this.$refs.file.value = null;
              let element = document.getElementById('uploadFile');
              while (element.firstChild) {
                element.removeChild(element.firstChild);
              }
              this.row.title = '청약고객관리';
              this.row.msg1 = '규격이 다른 파일 입니다.';
              this.row.msg1 = '샘플파일을 다운로드 받아 업로드 해주세요.';
              this.$refs.commmonModal.alertModalOpen(this.row);
              return false;
            }
          }       
        }else{
          this.row.title = '청약고객관리';
          this.row.msg1 = '규격이 다른 파일 입니다.';
          this.row.msg1 = '샘플파일을 다운로드 받아 업로드 해주세요.';
          this.$refs.commmonModal.alertModalOpen(this.row);
          return false;
        }
       /** header 규격 비교 end */

        workbook.SheetNames.forEach((sheetName) => {
          const rowObj = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {raw: true});
          tmpResult = rowObj;          
          const limitCnt = 100;

          this.totalCnt = Number(this.totalItems) + rowObj.length;

          this.insertRowCnt = rowObj.length;          
          if (this.totalCnt > limitCnt) {
            this.row.title = '청약고객관리';
            this.row.msg1 = '100건이상은 등록되지 않습니다.';
            this.$refs.commmonModal.alertModalOpen(this.row);
            return false;
          }
          for (const [idx, r] of rowObj.entries()) {
            if (idx > limitCnt - 1) {
              break;
            }
            let {ID, 이름, 휴대폰번호, 이메일, ID잠금} = r;
            ID = '' + (vm.isNull(ID) ? '' : ID);
            이름 = '' + (vm.isNull(이름) ? '' : 이름);
            휴대폰번호 = '' + (vm.isNull(휴대폰번호) ? '' : 휴대폰번호);
            이메일 = '' + (vm.isNull(이메일) ? '' : 이메일);
            ID잠금 = '' + (vm.isNull(ID잠금) ? '' : ID잠금);
            
            // 휴대폰번호=''+휴대폰번호;
            if (!vm.isMobile(휴대폰번호)) {
              if (vm.isMobile2(휴대폰번호)) {
                휴대폰번호 = '0' + 휴대폰번호;
              }
            }

            let {retVal, msg} = vm.validXlxs({ID, 이름, 휴대폰번호, 이메일, ID잠금});            
            if (retVal) {
              const pVal = [
                {name: '이름', val: 이름, len: 20},
                {name: 'ID잠금', val: ID잠금, len: 4},
              ];

              const rVal = vm.isTitle(pVal);

              if (rVal.retVal) {
                vm.nData.push({userId: ID, userNm: 이름, mdn: 휴대폰번호, email: 이메일, stat: ID잠금, msg});
              } else {
                vm.oData.push({ID, 이름, 휴대폰번호, 이메일, ID잠금, 오류내용: rVal.msg});
              }
            } else {
              vm.oData.push({ID, 이름, 휴대폰번호, 이메일, ID잠금, 오류내용: msg});
            }
          }
        });
      };
      reader.readAsBinaryString(file);
    },
    
    // sheet에서 header만 읽어 오기
    get_header_row(sheet) {
      var headers = [];
      var range = XLSX.utils.decode_range(sheet['!ref']);
      var C, R = range.s.r; /* start in the first row */
      /* walk every column in the range */
      for(C = range.s.c; C <= range.e.c; ++C) {
          var cell = sheet[XLSX.utils.encode_cell({c:C, r:R})] /* find the cell in the first row */
          var hdr = "UNKNOWN " + C; // <-- replace with your desired default 
          if(cell && cell.t) hdr = XLSX.utils.format_cell(cell);
          headers.push(hdr);
      }
      return headers;
    },


    validXlxs({이름, 휴대폰번호, 이메일}) {
      if (this.isNull(이름)) {
        return {retVal: false, msg: '이름 누락'};
      }
      if (this.isNull(휴대폰번호)) {
        return {retVal: false, msg: '휴대폰번호 누락'};
      }
      if (!this.isMobile(휴대폰번호)) {
        if (!this.isMobile2(휴대폰번호)) {
          return {retVal: false, msg: '휴대폰번호 형식 오류'};
        }
      }
      if (!this.emailCheck(이메일)) {
        return {retVal: false, msg: '이메일 형식 오류'};
      }
      return {retVal: true, msg: '정상'};
    },
    isTitle(pVal) {
      for (const o of pVal) {
        if (this.bytes(o.val) > o.len) {
          return {retVal: false, msg: `${o.name} 컬럼: 문자열 길이 오류(${o.len}자)`};
        }
        const strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
        const regExp_g = new RegExp(strRegExp, 'g');
        if (!regExp_g.test(o.val)) {
          return {retVal: false, msg: `${o.name} 컬럼: 특수 문자 오류`};
        }
      }
      return {retVal: true, msg: '정상'};
    },
    delFile(event) {
      const file = event.target.files[0];      
      this.$refs.file.value = null;
      let element = document.getElementById('uploadFile');
      while (element.firstChild) {
        element.removeChild(element.firstChild);
      }
      // uploadFile
    },
    async saveExcel() {

      this.row = {}
      //
      this.row.adminId = this.adminId;
      this.row.list = this.nData;

      // 대량 ID 등록시 파일 여부 체크
      let element = document.getElementById('uploadFile');      
      if(element.firstChild == null){
        this.row.title = '청약고객 관리';
        this.row.msg1 = '업로드 파일이 없습니다.';
        this.row.msg2 = '파일을 업로드 해주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
        return false;
      }

      try {
        const response = await custMgtApi.insertMassUser(this.row);
        const result = response.data;
        if (result != null && result.retCode == '0000') {
          this.successCnt = result.data.successCnt;
          this.failCnt = Number(this.oData.length) + Number(result.data.failCnt);

          if (result.data.failCnt > 0) {
            this.row.totalCnt = this.insertRowCnt
            this.row.successCnt = this.successCnt
            this.row.failCnt = this.failCnt
            this.oData = [];
            this.nData = [];           
            this.$refs.file.value = null; 
            this.$parent.$refs.validationConfirmPopModal.failFileuploadOpen(this.row);
          } else {
            this.oData = [];
            this.nData = [];           
            this.$refs.file.value = null;
            this.$parent.$refs.validationConfirmPopModal.successFileuploadOpen();
          }
        }
      } catch (error) {
        // 팝업으로 교체 예정
        var title = '청약고객 관리\n';
        var msg1 = '실패 하였습니다.';
      }    
    },
    failFileuploadOk(result) {
      if (result) {
        this.excelPopClose();
        this.$parent.memberDetail(this.adminId);
      }
    },

    checkFocus() {
      this.$refs.file.value = null;
      let element = document.getElementById('uploadFile');
      while (element.firstChild) {
        element.removeChild(element.firstChild);
      }
    }
  },
};
</script>