<template>  

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

		<!-- 발신번호 차단 수정 -->
			<div class="popup modal53 popup_form w700">
				<div class="pop-head">
					<h3 class="pop-tit">충전금 상세</h3>
				</div>
				<form autocomplete="off">
					<table style="width: 100%">
						<tbody>
							<tr>
								<th>유저 ID</th>
								<td>
									<input type="text" placeholder="아이디 입력" v-model.trim="userId" disabled/>
								</td>
								
							</tr>
							<tr>
								<th>충전월</th>
								<td>
									<div class="input_box cal" style="width:60%">
										<div class="term">
											<span class="custom_input icon_date">
											<vuejs-datepicker
												:language="ko"
												:format="customFormatter"
												:disabled-dates="disabledSDate"
												:minimumView="sDateDiv"
												:maximumView="sDateDiv"
												v-model.trim="startDate"
												disabled
												@selected="selectedStartDate(0)"
												@closed="closeDate('start')"
												:picker-options="startDateOptions"
											></vuejs-datepicker>
											</span>
										~
										<span class="custom_input icon_date">
											<vuejs-datepicker
												:language="ko"
												:format="customFormatter"
												:disabled-dates="disabledEDate"
												:minimumView="sDateDiv"
												:maximumView="sDateDiv"
												v-model.trim="endDate"
												disabled
												@selected="selectedEndDate(0)"
												@closed="closeDate('end')"
												:picker-options="endDateOptions"
											></vuejs-datepicker>
											</span>
										</div>
									</div>
								</td>
							</tr>
							<tr v-show="bizrAuthYn !== 'Y'">
								<th>충전금액</th>
								<td>
								<div class="input_add">
								<input
									type="radio"
									name="nmineeDivCd"
									value="E"
									id="popup_radio5"
									v-model="nmineeDivCd"
									@change="changeNmineDiv($event)"
								/>
								<label for="popup_radio5">소멸금액(다음달 소멸되는 충전금액입니다)</label>
								<input  
									type="number" 
									placeholder="소멸 충전 금액 입력" 
									disabled
									v-model.trim="chrgAmtE" 
								/>
								<input
									type="radio"
									name="nmineeDivCd"
									value="C"
									id="popup_radio6"
									v-model="nmineeDivCd"
									@change="changeNmineDiv($event)"
								/>
								<label for="popup_radio6">이월금액(다음달 정액 요금에 이월되는 충전금액입니다)</label>
								<input 
									class="search-box" 
									type="number"  
									placeholder="이월 충전 금액 입력" 
									disabled 
									v-model.trim="chrgAmtC" 
								/>
								</div>
								</td>
							</tr>
						</tbody>
        			</table>
				</form>
				<div class="popup-btn2 pop-btn3">
					<!-- <button class="btn-pcolor" @click="ChrgUpdate()">수정</button> -->
					
					<button class="btn-p2color" @click="ChrgDelete()">삭제</button>
					<button class="btn-default" @click="ChrgDetailClose()">취소</button>
				</div>
			</div>
			<validation-confirm-pop ref="ValidationConfirmPop"/>

		</div>
	</div>
	
</template>

<script>
import custMgtApi from '../service/custMgtApi';
import moment from 'moment';
import ValidationConfirmPop from './ValidationConfirmPop.vue';

export default {
	data(){
        return{
		  ko: vdp_translation_ko.js,
		  row: {},

		  periodDay: 7, 
		  sDateDiv: 'month',
		  startDate: new Date(),
		  endDate: new Date(),
		  startDateOptions: {disabledDate: this.disabledStDate},
		  endDateOptions: {disabledDate: this.disabledEdDate},
		  startDt: '',
		  endDt: '',
		  startYear: '',
		  startMonth: '',
		  endYear: '',
		  endMonth: '',

		  bizrAuthYn: '',
		  nmineeDivCd: '',
		  chrgAmtE: '',
		  chrgAmtC: '',

		  userId: '',
		  custNm: '',
		  bRegNo: '',
		  bizrAuthYn : '',
		  custSeq : '',
		  chrgSeq : '',
		  useYn: '',
		  chrgDiv:'',
        }
    },
	components: {
		vuejsDatepicker,
		ValidationConfirmPop,
	},
	created(){
		this.setPeriodDay(0);
	},
	methods :{
		// 모달 띄우기
		async ChrgDetailModalOpen(props){
			this.row.chrgSeq = props.chrgSeq;
			try {
				const response = await custMgtApi.chrgDetail(this.row);
				const result = response.data;
				if (result != null && result.retCode == "0000") {
					this.userId = result.data.userId;
					this.custNm = result.data.custNm;
					let sym =result.data.strtYm.slice(0,4)+"-"+result.data.strtYm.slice(4,6)
					this.startDate = sym;
					let eym =result.data.endYm.slice(0,4)+"-"+result.data.endYm.slice(4,6)
					this.endDate = eym;
					this.chrgSeq = result.data.chrgSeq;
					this.useYn = result.data.useYn;
					if (result.data.chrgDiv == 'E') {
						this.chrgAmtE = result.data.chrgAmt;
						this.nmineeDivCd= "E";
						this.chrgAmtC ='';
					}else {
						this.chrgAmtC = result.data.chrgAmt;
						this.nmineeDivCd= "C";
						this.chrgAmtE ='';
      				}
				}
			} catch (error) {
			}
			var dimmed = document.getElementsByClassName('modal53');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'block';
			}
		},

	   ChrgDetailClose(){
			var dimmed = document.getElementsByClassName('modal53');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'none';
			}
		},
		//삭제버튼
		async ChrgDeleteModal(){
			
			try {
				var parammap = {chrgSeq : this.chrgSeq}
				var list = [];
				list.push(parammap); 
				var param = {list : list}
				// "list":[{"chrgSeq":"66"}]
				const response = await custMgtApi.deleteChrg(param);
				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 ChrgUpdateModal(){
			try {
				const response = await custMgtApi.updateChrg(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) {
				}
			
    	},

		doValidate(){
			this.row.useYn=this.useYn
			this.row.userId =this.userId;
			this.row.custNm = this.custNm;
			this.row.strtYm = this.startDate;
			this.row.endYm = this.endDate;
			this.row.chrgSeq = this.chrgSeq;
			this.row.chrgAmt = this.chrgAmtE;

			return true;
		},
		ChrgUpdate(){
			if (this.doValidate()) {
				this.$refs.ValidationConfirmPop.chrgconfirmUpdateOpen();
			}
		},
		ChrgDelete(){
			if(this.doValidate()){
				this.$refs.ValidationConfirmPop.chrgconfirmDeleteOpen();
			}
		},

		toComplete(){
			this.$parent.$refs.table.reloadData();
			this.ChrgDetailClose();
		},

		// 모달 끄기
		ModalClose(){
			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';
		},

		//달력 셋팅
		setPeriodDay(day) {
			this.periodDay = day;
			this.endDate = new Date();     
			this.initSetStartDate();
			this.initSetEndDate();
			this.closeDate('start');
			this.closeDate('end');
		},

		selectedStartDate(day) {
			if (day != undefined && day != null) {
				this.periodDay = day;
			}
			if (this.startDate > this.endDate) {
				this.startDate = this.endDate;
			}      
		},
		selectedEndDate(day) {
			if (day != undefined && day != null) {
				this.periodDay = day;
			}
		},
		closeDate(type) {
			if (type != undefined && type != null) {
				let initStartDate = new Date();
				let initEndDate = new Date();
				initStartDate.setMonth(Number(moment(initStartDate).format('MM')) -1)
				initEndDate.setMonth(Number(moment(initEndDate).format('MM')) +100)

				if (type == 'start') {
					this.disabledSDate = {to: initStartDate, from: new Date()};
				if (this.startDate !== initStartDate) {
					this.disabledEDate = {to: this.startDate, from: initEndDate};
					}
				} else if (type == 'end') {
					this.disabledEDate = {to: this.startDate, from: initEndDate};
					if (this.endDate !== initEndDate) {
						this.disabledSDate = {from: this.endDate};
						this.disabledSDate = {to: initStartDate, from: this.endDate};
					}
				}
			}
		},

		customFormatter: function (date) {
			if (this.sDateDiv == 'month') {
				return moment(date).format('YYYY-MM');
			} else if (this.sDateDiv == 'year') {
				return moment(date).format('YYYY');
			} else {
				return moment(date).format('YYYY-MM-DD');
			}
		},
		gridParamSet() {
			this.grid.params = {
				startMonth: moment(this.startDate).format('YYYYMM'),
				endMonth: moment(this.endDate).format('YYYYMM'),
			}
		},
		initSetStartDate() {
			let initStartDate = new Date();
			initStartDate.setMonth(Number(moment(initStartDate).format('MM')) -1);
			this.startDate = initStartDate;
		},
		initSetEndDate() {
			let initEndDate = new Date();
			initEndDate.setMonth(Number(moment(initEndDate).format('MM')) +1);
			this.endDate = initEndDate;
		},
	}
}
</script>
