<template>
  <!-- <div class="wrap bg-wrap"> -->
  <div>
    <div class="dimmed modal58" @click="ModalClose();"></div>
    <div class="popup-wrap modal58">
      <!-- 메시지 차단 신규 등록 -->
      <div class="popup modal58 popup_form">
        <div class="pop-head">
          <h3 class="pop-tit">메시지 차단 상세</h3>
        </div>
        <form autocomplete="off">
          <table>
            <tbody>
            <tr>
              <th>차단문구</th>
              <td class="input_add">
                <input v-model="word" ref="_word" maxlength="10" @input="msgLimitByte()">
                <button type="button" class="button white add" @click="doAdd"></button>
              </td>
            </tr>
            <tr>
              <td colspan="2" class="registration" value="">
                <ul>
                  <li v-for="(item, i) in msgBlckwordList" v-bind:key="item.word">
                    <span> {{ item.word }}<a href="#" @click="doDel(item, i)"><img src="@/assets/images/icon-del.png"/></a> </span>
                    <!--<button type="button" @click="doDel(item, i)"></button> -->
                  </li>
                </ul>
              </td>
            </tr>
            <tr>
              <th>조건</th>
              <td>
                <input type="radio" name="state02" value="01" id="popup_radio5" v-model="blckContCd">
                <label for="popup_radio5">AND</label>
                <input type="radio" name="state02" value="02" id="popup_radio6" v-model="blckContCd">
                <label for="popup_radio6">OR</label>
              </td>
            </tr>
            <tr>
              <th>차단사유</th>
              <td>
                <div>
                  <select name="" id="" v-model.trim="blckRsnCd" ref="blckRsnCd">
                    <option v-for="(option, i) in rsnType"
                            v-bind:value="option.code"
                            v-bind:key="i"
                            :selected="blckRsnCd === option.code">
                      {{ option.codeNm }}
                    </option>
                  </select>
                </div>
              </td>
            </tr>
            <tr>
              <th>메모</th>
              <td class="sender"><textarea class="memo_text" v-model.trim="memo" ref="memo" maxlength="2000"
                                           @input="memoLimitByte()"></textarea></td>
            </tr>
            <tr>
              <th>차단여부</th>
              <td>
                <input type="radio" name="state01" value="N" id="popup_radio7" v-model="blckYn">
                <label for="popup_radio7">해제</label>
                <input type="radio" name="state01" value="Y" id="popup_radio8" v-model="blckYn">
                <label for="popup_radio8">차단</label>
              </td>
            </tr>
            </tbody>
          </table>
        </form>
        <div class="popup-btn2 pop-btn3">
          <button class="btn-pcolor" @click="UpdateConfirm()">수정</button>
          <button class="btn-default" @click="IntrcpDetailModalClose();">취소</button>
          <button class="btn-p2color" @click="DeleteConfirm()">삭제</button>
        </div>
      </div>
      <validation-confirm-popup ref="ValidationConfirmPopup"></validation-confirm-popup>
    </div>
  </div>
</template>

<script>
import api from '@/service/api';
import riskMgtApi from '../service/riskMgtApi';
import ValidationConfirmPopup from './ValidationConfirmPopup.vue';
import {utils_mixin, chkPattern2} from '../service/mixins';

export default {
  mixins: [utils_mixin, chkPattern2],
  data() {
    return {

      row: {},
      msgBlckwordList: [],
      rsnType: [],
      tpType: [],
      word: '', // 차단문구
      blckSndrno: '',
      sndblckTpCd: '',
      blckRsnCd: '', // 차단사유
      blckYn: '',
      blckContCd: '', //차단 조건
      chgDt: '',
      regId: '',
      regDt: '',
      memo: '', // 메모
      seqNo: '',
      props: {},
      maxByte: 2000,
    }
  },
  created() {
    this.formReset();
  },
  components: {
    ValidationConfirmPopup
  },
  methods: {
    ModalOpen() {
      this.formReset();
      var dimmed = document.getElementsByClassName('dimmed');
      dimmed[0].style.display = 'block';
      var wrap = document.getElementsByClassName('popup-wrap');
      wrap[0].style.display = 'block';
      var obj = document.getElementsByClassName('modal58');
      obj[0].style.display = 'block';
      this.setCodeDate();
    },
    // 모달 끄기
    ModalClose() {
      //this.formReset();
      var dimmed = document.getElementsByClassName('dimmed');
      dimmed[0].style.display = 'none';
      var wrap = document.getElementsByClassName('popup-wrap');
      wrap[0].style.display = 'none';
      var popup = document.getElementsByClassName('modal58');
      popup[0].style.display = 'none';

    },
    async IntrcpMsgDetailModalOpen(props) {
      this.setCodeDate();
      this.row.seqNo = props.seqNo;
      try {
        const response = await riskMgtApi.msgIntrcpDetail(this.row);
        const result = response.data;

        if (result != null && result.retCode == "0000") {
          this.blckContCd = result.data.blckContCd;
          this.blckRsnCd = result.data.blckRsnCd;
          this.memo = result.data.memo;
          this.blckYn = result.data.blckYn;
          this.msgBlckwordList = result.data.list;
        }
      } catch (err) {
      }

      var dimmed = document.getElementsByClassName('modal58');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }

    },

    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() {
      this.row.blckRsnCd = this.blckRsnCd;
      this.row.blckContCd = this.blckContCd;
      this.row.memo = this.memo;
      this.row.blckYn = this.blckYn;
      this.row.chgId = this.regId;
      this.row.chgDt = this.chgDt
      this.row.list = this.msgBlckwordList
      return true;

    },

    toComplete() {
      this.$parent.$refs.table.reloadData();
      this.IntrcpDetailModalClose();
    },
    //신규등록 팝업에서 문구 추가 버튼
    doAdd: function () {
      if (this.isNull(this.word)) {
        this.row.title = '메세지 차단';
        this.row.msg1 = '문구를 입력해주세요.';
        this.$parent.msgAlertModalOpen(this.row);
        this.$refs._word.focus();
        return false;
      }
      if (this.msgBlckwordList.length < 10) {
        this.msgBlckwordList.push({
          //seqNo: '',
          word: this.word
        });
        this.word = '';
      }
    },
    //신규등록 팝업에서 문구 삭제 버튼
    doDel(item, i) {
      localStorage.removeItem(item);
      this.msgBlckwordList.splice(i, 1);
    },
    formReset() {
      var type = this.insertType;
      Object.assign(this.$data, this.$options.data());
      this.insertType = type;
    },

    //삭제버튼
    async MsgIntrcpDeleteModal() {
      this.setCodeDate();
      // if(window.confirm('삭제 하시겠습니까?')){
      try {
        const response = await riskMgtApi.deleteMsgIntrcp(this.row);
        const result = response.data;
        if (result != null && result.retCode == "0000") {
          this.row.title = '메세지 차단';
          this.row.msg1 = '삭제 하였습니다.';
          this.$parent.msgAlertModalOpen(this.row);
        }
        this.toComplete();
      } catch (err) {
        this.row.title = '메세지 차단';
        this.row.msg1 = '실패 하였습니다.';
        this.$parent.msgAlertModalOpen(this.row);
      }
      // }
    },

    //수정버튼
    async MsgIntrcpUpdateModal() {
      // if(this.doValidate() && window.confirm('수정 하시겠습니까?')){
      try {
        this.doValidate();
        const response = await riskMgtApi.updateMsgIntrcp(this.row);
        const result = response.data;
        if (result != null && result.retCode == "0000") {
          this.row.title = '메세지 차단';
          this.row.msg1 = '수정 하였습니다.';
          this.$parent.msgAlertModalOpen(this.row);
        }
        this.toComplete();
      } catch (err) {
        this.row.title = '메세지 차단';
        this.row.msg1 = '실패 하였습니다.';
        this.$parent.msgAlertModalOpen(this.row);
      }
      // }
    },

    IntrcpDetailModalClose() {
      //this.formReset();
      var dimmed = document.getElementsByClassName('modal58');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
    },

    ModalClose() {
      //this.formReset();
      var dimmed = document.getElementsByClassName('dimmed');
      dimmed[0].style.display = 'none';
      var wrap = document.getElementsByClassName('popup-wrap');
      wrap[0].style.display = 'none';
      var popup = document.getElementsByClassName('modal58');
      popup[0].style.display = 'none';

    },
    UpdateConfirm() {
      if (this.doValidate()) {
        this.$refs.ValidationConfirmPopup.msgConfirmUpdateOpen();
      }
    },
    DeleteConfirm() {
      if (this.doValidate()) {
        this.$refs.ValidationConfirmPopup.msgConfirmDeleteOpen();
      }
    },
    // 바이트길이 구하기
    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.memo = this.getLimitedByteText(this.memo, this.maxByte);
    },
    msgLimitByte(){
      this.word = this.getLimitedByteText(this.word, 10);
    }

  },

}
</script>