<template>
  <!-- <div class="wrap bg-wrap"> -->
  <div>
    <div class="dimmed modal-insertNotice" @click="ModalClose()"></div>
    <div class="popup-wrap modal-insertNotice">
      <!-- 공지사항 신규 등록 -->
      <div class="popup modal-insertNotice popup_form" style="width: 70vw">
        <div class="pop-head">
          <h3 class="pop-tit">공지사항 신규 등록</h3>
        </div>
        <form autocomplete="off">
          <table>
            <colgroup>
              <col width="10%" />
              <col width="40%" />
              <col width="10%" />
              <col width="10%" />
              <col width="10%" />
              <col width="10%" />
            </colgroup>
            <tbody>
              <tr>
                <th style="width: 10%">분류코드</th>
                <td>
                  <div class="select_box">
                    <select name="" id="right" v-model="ctgCd" style="min-width: 500px" ref="_ctgCd">
                      <option v-for="(option, i) in ctgCdOption" :value="option.code" v-bind:key="i">
                        {{ option.codeNm }}
                      </option>
                    </select>
                  </div>
                </td>
                <th style="width: 10%">긴급여부</th>
                <td>
                  <div class="select_box">
                    <select name="" id="right" v-model="emgYn" style="min-width: 150px">
                      <option value="Y">긴급</option>
                      <option value="N">일반</option>
                    </select>
                  </div>
                </td>
                <th style="width: 10%">사용여부</th>
                <td>
                  <div class="select_box">
                    <select name="" id="right" v-model="useYn" style="min-width: 150px">
                      <option value="Y">사용</option>
                      <option value="N">사용 안함</option>
                    </select>
                  </div>
                </td>
              </tr>
              <tr>
                <th style="width: 10%">제목</th>
                <td colspan="5">
                  <input type="text" placeholder="제목을 입력하세요" v-model="title" ref="_title" />
                </td>
              </tr>
              <tr>
                <th style="width: 10%">내용</th>
                <td class="sender" colspan="5">
                  <vue-editor
                    id="editor"
                    useCustomImageHandler
                    @imageAdded="handleImageAdded"
                    v-model="ntSbst"
                    ref="_ntSbst"
                  >
                  </vue-editor>
                </td>
              </tr>
              <tr>
                <th style="width: 10%">첨부파일</th>
                <td class="sender" colspan="5">
                  <p class="file" style="width: 100%; margin-bottom: 15px">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
                  <div class="btn plus">
                    파일 추가
                    <input
                      type="file"
                      accept=".jpg,.png,.pdf,.tiff"
                      multiple="multiple"
                      ref="imageUploader"
                      @change="onFileChange"
                      class="form-control-file"
                      id="my-file"
                    />
                  </div>
                  <div class="img_list_wrap" v-if="updateFileList.length > 0" style="margin-top: 15px">
                    <div
                      class="img_list"
                      v-for="(item, index) in updateFileList"
                      :key="index"
                      style="margin-bottom: 5px"
                    >
                      <!-- <a href="javascript:void(0);" @click="download(item.filePath, item.fileNm, item.name)">{{ item.name }}</a> -->
                      <p class="file_name">{{ item.name }}</p>
                      <button type="button" class="btn_del" @click="popupHandleRemove(index)">X</button>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </form>
        <div class="popup-btn2">
          <button class="btn-pcolor" @click="regisConfirm()">등록</button>
          <button class="btn-default" @click="ModalClose()">취소</button>
        </div>
      </div>
      <!-- <common-modal ref="commonModal"></common-modal> -->
      <validation-confirm-popup ref="ValidationConfirmPopup"></validation-confirm-popup>
    </div>
  </div>
</template>
<script>
import { VueEditor } from 'vue2-editor';
import api from '@/service/api';
import homeMgtApi from '../service/homeMgtApi';
import ValidationConfirmPopup from './ValidationConfirmPopup.vue';
import { utils_mixin, chkPattern2 } from '../service/mixins';

export default {
  name: 'NoticePop',
  mixins: [utils_mixin, chkPattern2],
  data() {
    return {
      props: {},
      row: {},
      rsnType: [],
      tpType: [],
      // 공지사항
      title: '',
      ntSbst: '', //
      emgYn: 'N',
      useYn: 'Y',
      ctgCd: 'null',
      updateFileList: [], // 업로드한 이미지 파일
      ctgCdOption: [
        { code: 'null', codeNm: '분류코드를 선택하세요' },
        { code: '01', codeNm: '서비스' },
        { code: '02', codeNm: '개발/작업' },
        { code: '03', codeNm: '정책/약관' },
        { code: '04', codeNm: '오류/장애' },
        { code: '05', codeNm: '이벤트' },
      ],
      // 공지사항
      LINE_FEED: 10, // '\n',
      maxByte: 2000,

      // params: {
      //     'blckSndrno' : ''
      //     ,'ctgCd' : '01'
      //     ,'blckRsnCd' : '02'
      //     ,'meno' : ''
      // }
    };
  },
  create() {
    //this.setCodeDate();
    this.formReset();
  },
  mounted() {
    //this.ctgCd = '01'
  },
  components: {
    VueEditor,
    ValidationConfirmPopup,
  },
  methods: {
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      var fd = new FormData();
      fd.append('files', file);

      homeMgtApi
        .getImageUrl(fd)
        .then((response) => {
          const url =
            '/api/v1/bo/homeMgt/preview/' +
            encodeURIComponent(response.data.data.replaceAll('\\', '/').replaceAll('/', '|')); // Get url from response
          Editor.insertEmbed(cursorLocation, 'image', url);
          resetUploader();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //모달 띄우기
    ModalOpen() {
      var dimmed = document.getElementsByClassName('modal-insertNotice');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
      this.setCodeDate();
    },
    // 모달 끄기
    ModalClose() {
      this.formReset();

      var dimmed = document.getElementsByClassName('modal-insertNotice');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
    },
    // 저장 후 부모창 호출
    toComplete() {
      this.$parent.$refs.table.reloadData();
      this.ModalClose();
    },

    setCodeDate() {
      // 발송타입
      api.commCode({ grpCd: 'SNDBLCK_TP_CD' }).then((response) => {
        this.tpType = response.data.data.list;
      });
      api.commCode({ grpCd: 'SNDBLCK_RSN_CD' }).then((response) => {
        this.rsnType = response.data.data.list;
      });
    },

    doValidate() {
      if (this.isNull(this.ctgCd) || this.ctgCd === 'null') {
        this.row.title = '공지사항 등록';
        this.row.msg1 = '분류코드를 선택해 주세요.';
        this.row.focusTaget = '_ctgCd';
        this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
        return false;
      }

      if (this.isNull(this.title)) {
        this.row.title = '공지사항 등록';
        this.row.msg1 = '제목을 입력해 주세요.';
        this.row.focusTaget = '_title';
        this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
        return false;
      }
      if (this.isNull(this.ntSbst)) {
        this.row.title = '공지사항 등록';
        this.row.msg1 = '내용을 입력해 주세요.';
        this.row.focusTaget = '_ntSbst';
        this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
        return false;
      }
      /*       const hp = this.blckSndrno;
      if (!this.isNull(hp) && !this.isSendnum(hp)) {
        this.row.title = '공지사항';
        this.row.msg1 = '발신번호 형식이 잘못되었습니다. 확인 해주세요.';
        this.$parent.alertInsert(this.row);
        this.$refs._blckSndrno.focus();
        return false;
      } */
      this.row.ctgCd = this.ctgCd;
      return true;
    },
    formReset() {
      Object.assign(this.$data, this.$options.data());
    },
    regisConfirm() {
      if (this.doValidate()) {
        this.$refs.ValidationConfirmPopup.confirmInsertOpen();
      }
    },
    // 바이트길이 구하기
    getByteLength: function (decimal) {
      return decimal >> 7 || this.LINE_FEED === decimal ? 2 : 1;
    },

    getByte: function (str) {
      return str
        .split('')
        .map((s) => s.charCodeAt(0))
        .reduce((prev, unicodeDecimalValue) => prev + this.getByteLength(unicodeDecimalValue), 0);
    },
    getLimitedByteText: function (inputText, maxByte) {
      const characters = inputText.split('');
      let validText = '';
      let totalByte = 0;

      for (let i = 0; i < characters.length; i += 1) {
        const character = characters[i];
        const decimal = character.charCodeAt(0);
        const byte = this.getByteLength(decimal); // 글자 한 개가 몇 바이트 길이인지 구해주기
        // 현재까지의 바이트 길이와 더해 최대 바이트 길이를 넘지 않으면
        if (totalByte + byte <= maxByte) {
          totalByte += byte; // 바이트 길이 값을 더해 현재까지의 총 바이트 길이 값을 구함
          validText += character; // 글자를 더해 현재까지의 총 문자열 값을 구함
        } else {
          // 최대 바이트 길이를 넘으면
          break; // for 루프 종료
        }
      }
      return validText;
    },

    memoLimitByte() {
      this.meno = this.getLimitedByteText(this.meno, this.maxByte);
    }, //END 바이트길이 구하기

    insertNotice() {
      const fd = new FormData();
      for (let i = 0; i < this.updateFileList.length; i++) {
        fd.append('files', this.updateFileList[i]);
      }

      const params = {
        title: this.title,
        ntSbst: this.ntSbst,
        emgYn: this.emgYn,
        useYn: this.useYn,
        ctgCd: this.ctgCd,
        regr: this.$store.getters['login/userNm'],
        regId: this.$store.getters['login/userId'],
        chgId: this.$store.getters['login/userId'],
      };

      fd.append('key', new Blob([JSON.stringify(params)], { type: 'application/json' }));

      /* for (var pair of fd.entries()) {
        console.log(pair[0] + ' : ' + pair[1]);
      } */

      homeMgtApi.insertNotice(fd).then((response) => {
        if (response.data.retCode == '0000') {
          this.row.title = '공지사항 등록';
          this.row.msg1 = '등록이 완료되었습니다.';
          this.row.type = 'complete';
          //this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
          this.toComplete();
        } else {
          this.row.title = '공지사항 등록 실패';
          this.row.msg1 = response.retMsg;
          this.row.type = '';
          this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
        }
      });
    },

    checkFocus() {
      if (this.row.focusTaget === '_title') {
        this.$refs._title.focus();
      } else if (this.row.focusTaget === '_ntSbst') {
        //this.$refs._ntSbst.focus();
      } else if (this.row.focusTaget === '_ctgCd') {
        this.$refs._ctgCd.focus();
      }
    },

    /////////////////////////////////// 파일 첨부 ////////////////////////////////////////
    onFileChange(event) {
      const files = event.target.files || event.dataTransfer.files;
      if (!files.length) return;
      /* if (files.length > 3) {
        confirm.fnAlert(
          // "이미지 첨부 기준 안내",
          '',
          '<li>최대 3장 첨부할 수 있습니다.</li>',
          'info'
        );
        this.imageAddTitle = '이미지는 최대 3장까지 첨부할 수 있습니다.';
        //confirm.fnAlert("알림", "첨부파일은 최대 3개까지 가능합니다.", "alert");
        return;
      } else if (this.updateFileList.length + files.length > 3) {
        confirm.fnAlert(
          // "이미지 첨부 기준 안내",
          '',
          '<li>최대 3장 첨부할 수 있습니다.</li>',
          'info'
        );
        this.imageAddTitle = '이미지는 최대 3장까지 첨부할 수 있습니다.';
        // confirm.fnAlert("알림", "첨부파일은 최대 3개까지 가능합니다.", "alert");
        return;
      } */
      this.addFiles(files);
    },
    async addFiles(files) {
      for (let i = 0; i < files.length; i++) {
        const src = await this.readFiles(files[i]);
        files[i].src = src;
        files[i].status = 'update';
        files[i].index = this.updateFileList.length;
        this.updateFileList.push(files[i]);

        /* if (!(files[i].name.indexOf('jpg') > -1 || files[i].name.indexOf('jpeg') > -1)) {
          confirm.fnAlert('', '<li>jpg파일 형식만 첨부할 수 있습니다.</li>', 'info');
          this.imageAddTitle = 'jpg파일 형식만 첨부할 수 있습니다.';
          continue;
        } else if (files[i].size > 300000) {
          confirm.fnAlert(
            // "이미지 첨부 기준 안내",
            '',
            '<li>전체 크기 합계가 300KB 이하여야 합니다.</li>',
            'info'
          );
          this.imageAddTitle = '전체 크기 합계가 300KB 이하여야 합니다.';
          //confirm.fnAlert("이미지 사이즈 초과", "300KB이하 이미지만 등록 가능합니다.", "alert");
          continue;
        } else if (files[i].size + this.totalFileSize > 300000) {
          confirm.fnAlert(
            // "이미지 첨부 기준 안내",
            '',
            '<li>전체 크기 합계가 300KB 이하여야 합니다.</li>',
            'info'
          );
          this.imageAddTitle = '전체 크기 합계가 300KB 이하여야 합니다.';
          //confirm.fnAlert("이미지 사이즈 초과", "전체 합계 300KB이하 이미지만 등록 가능합니다.", "alert");
          continue;
        } else if (this.getImageSize(src) === false) {
          confirm.fnAlert(
            // "이미지 첨부 기준 안내",
            '',
            '<li>1,500(가로)x1,440(세로)px 이하 크기만 첨부할 수 있습니다.</li>',
            'info'
          );
          this.imageAddTitle = '1,500(가로)x1,440(세로)px 이하 크기만 첨부할 수 있습니다.';
          //confirm.fnAlert("이미지 크기 초과", "1500 * 1440 이하 이미지만 등록 가능합니다.", "alert");
          continue;
        } else {
          files[i].status = 'update';
          files[i].index = this.updateFileList.length;
          this.updateFileList.push(files[i]);
          confirm.fnAlert('', '이미지가 정상적으로 추가 되었습니다.', 'alert');
          this.imageAddTitle = '';
        } */
      }
      this.$refs.imageUploader.value = ''; // 이미지 중복 가능하도록 input 초기화
    },
    // FileReader를 통해 파일을 읽어 thumbnail 영역의 src 값으로 셋팅
    async readFiles(files) {
      return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = async (e) => {
          resolve(e.target.result);
        };
        reader.readAsDataURL(files);
      });
    },
    getImageSize(src) {
      const img = new Image();
      let _width = 0;
      let _height = 0;
      img.src = src;

      img.onload = function () {
        _width = img.width;
        _height = img.height;
        if (_width >= 1500 || _height >= 1440) {
          return false;
        } else {
          return true;
        }
      };
    },
    popupHandleRemove(index) {
      this.updateFileList.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.popup-btn-wrap {
  width: 500px;
  margin: auto;
  padding: 100px 0;
}

.popup-btn-wrap button {
  width: 100%;
  margin-bottom: 10px;
  height: 50px;
  border-radius: 5px;
  box-shadow: none;
  border: 1px solid #000;
}

.popup-btn-wrap button:hover {
  background: #000;
  color: #fff;
}

.btn.plus {
  font-family: SpoqaHanSansNeo;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  background-color: #35354f;
  border-radius: 4px;
  text-align: center;
  min-width: 89px;
  height: 36px;
  padding: 10px 20px;
  letter-spacing: -0.025em;
  border: none;
  position: relative;
  line-height: 1;
  display: inline-block;
  box-sizing: border-box;
  transition: 0.3s;
}
.btn input {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 1;
}
.file_name {
  display: inline-flex;
}
.btn_del {
  background: #e4e4e4;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: none;
  font-size: 10px;
  margin: 0 0 0 5px;
}
</style>
