<template>  

	<div>
<!--	s: 팝업	-->
		<div class="dimmed modal53"></div>
		<div class="popup-wrap modal53">

		<!-- 발신번호 차단 수정 -->
			<div class="popup modal53 popup_form">
				<div class="pop-head">
					<h3 class="pop-tit">발신번호 차단 수정</h3>
				</div>
				<form autocomplete="off">
					<table>
						<tbody>
							<tr>
								<th>발신번호</th>
								<td><input type="text" v-model.trim="blckSndrno" disabled></td>
							</tr>
							<tr>
								<th>발송타입</th>
								<td>
									<div>
										<select name="" id="" v-model.trim="sndblckTpCd" ref="sndblckTpCd">
											<option v-for="(option, i) in tpType" v-bind:value="option.code" v-bind:key="i">
                                                {{ option.codeNm }}
                                            </option> 
										</select>
									</div>
								</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">
                                                {{ option.codeNm }}
                                            </option> 
										</select>
									</div>
								</td>
							</tr>
							<tr>
								<th>메모</th>
								<td><input type="text" value="고객사요청" v-model.trim="meno" ref="meno" @input="memoLimitByte()"></td>
							</tr>
							<tr>
								<th>차단여부</th>
								<td>
									<input type="radio" name="state" value="N" id="popup_radio1" v-model="blckYn">
									<label for="popup_radio1">해제</label>
									<input type="radio" name="state" value="Y" id="popup_radio2" v-model="blckYn">
									<label for="popup_radio2">차단</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 api from '@/service/api';
import ValidationConfirmPopup from './ValidationConfirmPopup.vue';
export default {
	data(){
        return{
		  row: {},
		  rsnType: [],
          tpType: [],
		  blckSndrno:'',
		  sndblckTpCd:'',
		  blckYn:'',
		  chgDt:'',
		  blckRsnCd:'',
		  regId: '',
          meno: '',
		  LINE_FEED : 10, // '\n',
		  maxByte: 2000,
        }
    },
	components: {
   		ValidationConfirmPopup
	},
	created(){
		this.setCodeDate();
		// this.formReset();
	},
	methods :{
		// 모달 띄우기
		async IntrcpDetailModalOpen(props){
			this.setCodeDate();
			this.row.blckSndrno = props.blcksndrno;
			try {
				const response = await riskMgtApi.intrcpDetail(this.row);
				const result = response.data;
				if (result != null && result.retCode == "0000") {
					this.blckSndrno = result.data.blcksndrno;
					this.sndblckTpCd = result.data.sndblckTpCd;
					this.blckYn = result.data.blckYn;
					this.blckRsnCd = result.data.blckRsnCd;
					this.chgDt = result.data.chgDt;
					this.regId = result.data.regId;
					this.meno = result.data.meno;
				}
			} catch(err) {
			}
			var dimmed = document.getElementsByClassName('modal53');
			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;
        });
       },

	   IntrcpDetailModalClose(){
			//this.formReset();
			var dimmed = document.getElementsByClassName('modal53');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'none';
			}
		},
		//삭제버튼
		async IntrcpDeleteModal(){
			this.setCodeDate();
			try {
				const response = await riskMgtApi.deleteIntrcp(this.row);
				const result = response.data;
				if (result != null && result.retCode == "0000") {
				this.row.title = '발신번호 차단';
         	 	this.row.msg1 = '삭제하였습니다.';
           		this.$parent.alertInsert(this.row);
				this.toComplete();
				}
			} catch(err) {
				}
    	},
		//수정버튼
		async IntrcpUpdateModal(){
			try {
				const response = await riskMgtApi.updateIntrcp(this.row);
				const result = response.data;
				if (result != null && result.retCode == "0000") {
				this.row.title = '발신번호 차단';
         	 	this.row.msg1 = '수정 하였습니다.';
           		this.$parent.alertInsert(this.row);
				this.toComplete();
				}
			} catch(err) {
				}
			// }
    	},
		// 모달 끄기
		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('modal53');
			popup[0].style.display = 'none';
			
		},
		
		toComplete(){
			this.$parent.$refs.table.reloadData();
			this.IntrcpDetailModalClose();
        },

		doValidate(){
			this.row.blckSndrno=this.blckSndrno;
            this.row.sndblckTpCd = this.sndblckTpCd;
			this.row.blckYn = this.blckYn;
			this.row.chgDt = this.chgDt;
            this.row.blckRsnCd = this.blckRsnCd;
			this.row.chgId = this.chgId;
			this.row.meno=this.meno;
			return true;
		},
		UpdateConfirm(){
			if(this.doValidate()){
				this.$refs.ValidationConfirmPopup.confirmUpdateOpen();
			}
		},		
		DeleteConfirm(){
			if(this.doValidate()){
				this.$refs.ValidationConfirmPopup.confirmDeleteOpen();
			}
		},		
		
		// 바이트길이 구하기
		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 바이트길이 구하기
		

		

		
	}
}
</script>

<style>
		.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;}
	</style>