<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">
									<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="state" value="01" id="popup_radio3" v-model="blckContCd" >
									<label for="popup_radio3">AND</label>
									<input type="radio" name="state" value="02" id="popup_radio4" v-model="blckContCd">
									<label for="popup_radio4">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"></textarea></td>
							</tr>
							<tr>
								<th>차단여부</th>
								<td>
									<input type="radio" name="state01" value="AND" id="popup_radio7">
									<label for="popup_radio7">해제</label>
									<input type="radio" name="state01" value="OR" id="popup_radio8">
									<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';
export default {
    data(){
        return{
        
		  row: {},
          msgBlckwordList: [],
		  rsnType: [],
          tpType: [],
          word: '', // 차단문구
		  blckSndrno:'',
		  sndblckTpCd:'',
          blckRsnCd: '', // 차단사유
		  blckYn:'',
          blckContCd:'', //차단 조건
		  chgDt:'',
		  regId: '',
          regDt: '',
          memo: '', // 메모
          seqNo: '',
		  props: {},
        }
    },
    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();
            // console.log(props);
			this.row.seqNo = props.seqNo;
			try {
				const response = await riskMgtApi.msgIntrcpDetail(this.row);
				const result = response.data;
				console.log(result);
				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;
					// this.row.chgDt = result.data.chgDt;
					// this.row.regId = result.data.regId;
                    // this.row.list = result.data.msgBlckwordList
				}
			} catch(err) {
				alert("실패 하였습니다.");
			}
			console.log('-----------')
			console.log(this.row)
			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.msgBlckwordList.length < 10){
                this.msgBlckwordList.push({
                    //seqNo: '',
                    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 {
				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();
			}
		},

        

    },

}
</script>