<template>
	<v-row class="search-box" align="center" no-gutters>
		<v-col :cols="4">
			<label for="" class="search-box-label">
				<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
				{{ label }}
			</label>
		</v-col>

		<v-dialog
			ref="popModal"
			v-model="dialog"
			width="600"
			overlay-color="#000"
			overlay-opacity="0.8"
			scrollable
		>
			<v-card style="height: 100%">
				<v-card-title class="pa-5 d-flex align-center justify-space-between">
					<span class="custom-title-4">{{ label }}</span>
					<v-btn icon tile :ripple="false" @click="btnAction('close')">
						<v-icon>mdi-close</v-icon>
					</v-btn>
				</v-card-title>
				<!-- <v-card-actions> -->
				<div class="pa-5">
					<v-row class="search-box" align="center" no-gutters>
						<v-col :cols="3">
							<label class="search-box-label">
								<v-icon x-small color="primary" class="mr-1"
									>mdi-record-circle</v-icon
								>
								실행 일자
							</label>
						</v-col>
						<v-col :cols="9">
							<div class="calcDtpicker-container">
								<v-text-field
									id="calcDtpicker"
									ref="calcDtpicker"
									v-model="calcDt"
									:class="'v-input__custom'"
									:hide-details="true"
									readonly
									outlined
								>
									<template #append>
										<v-icon size="20">$icoCalendar</v-icon>
									</template>
									<template #append-outer>
										<div
											ref="calcDtpicker-container"
											id="calcDtpicker-container"
										></div>
									</template>
								</v-text-field>
							</div>
						</v-col>
					</v-row>
				</div>
				<!-- </v-card-actions> -->
				<span class="pa-4">고급옵션</span>
				<div class="px-5 pb-4">
					<v-row class="search-box py-2" align="center" no-gutters>
						<v-col :cols="3">
							<label class="search-box-label">
								<v-icon x-small color="#fb8200" class="mr-1"
									>mdi-record-circle</v-icon
								>
								CBL days
							</label>
						</v-col>
						<v-col :cols="9">
							<v-text-field
								v-model="cblClacDays"
								class="v-input__custom"
								outlined
								:hide-details="true"
							></v-text-field>
						</v-col>
					</v-row>
					<v-row class="search-box py-2" align="center" no-gutters>
						<v-col :cols="3">
							<label class="search-box-label">
								<v-icon x-small color="#fb8200" class="mr-1"
									>mdi-record-circle</v-icon
								>
								MIN/MAX days
							</label>
						</v-col>
						<v-col :cols="9">
							<v-text-field
								v-model="minMaxDays"
								class="v-input__custom"
								outlined
								:hide-details="true"
							></v-text-field>
						</v-col>
					</v-row>
					<v-row class="search-box py-2" align="center" no-gutters>
						<v-col :cols="3">
							<label class="search-box-label">
								<v-icon x-small color="primary" class="mr-1"
									>mdi-record-circle</v-icon
								>
								제외 일자
							</label>
						</v-col>
						<v-col :cols="7">
							<div class="exclDtpicker-container">
								<v-text-field
									id="exclDtpicker"
									ref="exclDtpicker"
									v-model="exclDt"
									:class="'v-input__custom'"
									:hide-details="true"
									readonly
									outlined
								>
									<template #append>
										<v-icon size="20">$icoCalendar</v-icon>
									</template>
									<template #append-outer>
										<div
											ref="exclDtpicker-container"
											id="exclDtpicker-container"
										></div>
									</template>
								</v-text-field>
							</div>
						</v-col>
						<v-col :cols="2">
							<v-btn :ripple="false" @click="btnAction('add')">추가</v-btn>
						</v-col>
					</v-row>
					<div
						id="exclDtListValDiv"
						class="px-5 mb-1 h100"
						style="overflow-y: auto; max-height:72px"
					></div>
				</div>
				<v-divider></v-divider>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="primary" dark :ripple="false" @click="btnAction('save')"
						>확인</v-btn
					>
					<v-btn
						color="primary"
						dark
						:ripple="false"
						@click="btnAction('close')"
						>닫기</v-btn
					>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</v-row>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import InputText from '~/components/common/form/InputText';
import Label from '~/components/common/form/Label';
import TuiDatepicker from 'tui-date-picker';
import Buttons from '~/components/common/button/Buttons';
import Utility from '~/plugins/utility';

export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		label: {
			type: String,
			require: true,
		},
	},
	components: {
		InputText,
		Label,
		TuiDatepicker,
		Buttons,
		Utility,
	},
	data() {
		return {
			dialog: false,
			snarComId: null,
			snarId: null,
			simulId: null,
			calcDt: this.convertStringToDateFormat(new Date()),
			exclDt: this.convertStringToDateFormat(new Date()),
			calcDtDatepickerInstance: null,
			exclDtDatepickerInstance: null,
			cblClacDays: null,
			minMaxDays: null,
			exclDtListData: null,
			exclDtListVal: [],
		};
	},
	computed: {
		...mapState({
			searchParam(state) {
				return state.pageData[this.parentPrgmId];
			},
			isDarkMode: 'isDarkMode',
		}),
		chkDialog() {
			return this.dialog;
		},
	},
	watch: {
		async chkDialog(val) {
			if (val) {
				this.openDialog();
			} else {
			}
		},
	},
	created() {
		window.exclDtDel = this.exclDtDel;
	},
	mounted() {
		//this.tuiCalendarInit();
	},

	methods: {
		...mapMutations({
			setPageData: 'setPageData',
		}),
		...mapActions({
			postUpdateApi: 'modules/list/postUpdateApi',
		}),
		tuiCalendarInit() {
			const calcDtContainer = document.getElementById('calcDtpicker-container');
			const calcDtTarget = document.getElementById('calcDtpicker');

			const exclDtContainer = document.getElementById('exclDtpicker-container');
			const exclDtTarget = document.getElementById('exclDtpicker');

			this.calcDtDatepickerInstance = new TuiDatepicker(calcDtContainer, {
				date: new Date(),
				language: 'ko',
				type: 'date',
				input: {
					element: calcDtTarget,
					format: 'yyyy-MM-dd',
				},
				timePicker: false,
				calendar: {
					showToday: false,
				},
			});

			this.exclDtDatepickerInstance = new TuiDatepicker(exclDtContainer, {
				date: new Date(),
				language: 'ko',
				type: 'date',
				input: {
					element: exclDtTarget,
					format: 'yyyy-MM-dd',
				},
				timePicker: false,
				calendar: {
					showToday: false,
				},
			});

			// datepicker 초기값 생성
			this.calcDtDatepickerInstance.setDate(new Date());
			this.exclDtDatepickerInstance.setDate(new Date());
			// datepicker 초기값 생성 끝

			// datepicker 변경시 이벤트 추가
			this.calcDtDatepickerInstance.on('change', () => this.getCalcDt());
			this.exclDtDatepickerInstance.on('change', () => this.getExclDt());
			// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
		},
		getCalcDt() {
			const dt = this.calcDtDatepickerInstance.getDate();
			//this.calcDt = dt.toISOString().substr(0, 10);
			this.calcDt = Utility.setFormatDate(dt, 'YYYY-MM-DD');
		},
		getExclDt() {
			const dt = this.exclDtDatepickerInstance.getDate();
			this.exclDt = Utility.setFormatDate(dt, 'YYYY-MM-DD');
			//this.exclDt = dt.toISOString().substr(0, 10);
		},
		convertStringToDateFormat(val) {
			var result = '';

			result = Utility.setFormatDate(val, 'YYYY-MM-DD');

			return result;
		},
		async openDialog() {
			this.cblClacDays = null;
			this.minMaxDays = null;
			this.calcDt = Utility.setFormatDate(new Date(), 'YYYY-MM-DD');
			this.exclDt = Utility.setFormatDate(new Date(), 'YYYY-MM-DD');
			this.exclDtListVal = [];
			this.$nextTick(() => {
				this.tuiCalendarInit();
			});
		},

		async btnAction(action) {
			switch (action) {
				case 'close':
					this.dialog = !this.dialog;
					document.getElementById('exclDtListValDiv').innerHTML = '';
					break;
				case 'save':
					if (this.cblClacDays == null || this.minMaxDays == null) {
						alert('필수값을 입력해주세요.');
					} else {
						await this.insertDetail();
						this.dialog = !this.dialog;
						document.getElementById('exclDtListValDiv').innerHTML = '';
					}
					break;
				case 'add':
					var chkVal = true;
					for (var j = 0; j < this.exclDtListVal.length; j++) {
						if (this.exclDtListVal[j] == this.exclDt.substr(0, 10))
							chkVal = false;
					}
					if (!chkVal) {
						alert('같은 날짜가 있습니다.');
					} else {
						this.exclDtListVal.push(this.exclDt.substr(0, 10));
						var tmp = '';
						for (var i = 0; i < this.exclDtListVal.length; i++) {
							tmp +=
								"<div class='no-gutters align-center' style='display:inline-block; padding:5px;'>" +
								"<span id='exclDt" +
								i +
								"' class='pr-2' style='font-size:14px'>" +
								this.exclDtListVal[i] +
								'</span>' +
								"<i aria-hidden='true' class='v-icon notranslate mr-1 mdi mdi-close-circle-outline theme--dark' onclick='exclDtDel(" +
								i +
								")' style='cursor: pointer;'></i>" +
								'</div>';
						}
						document.getElementById('exclDtListValDiv').innerHTML = tmp;
						this.exclDtListData = this.exclDtListVal.toString();
					}
					break;
			}
		},
		exclDtDel(val) {
			this.exclDtListVal.splice(val, 1);
			var tmp = '';
			for (var i = 0; i < this.exclDtListVal.length; i++) {
				tmp +=
					"<div class='no-gutters align-center' style='display:inline-block; padding:5px;'>" +
					"<span id='exclDt" +
					i +
					"' class='pr-2' style='font-size:14px'>" +
					this.exclDtListVal[i] +
					'</span>' +
					"<i aria-hidden='true' class='v-icon notranslate mr-1 mdi mdi-close-circle-outline theme--dark' onclick='exclDtDel(" +
					i +
					")' style='cursor: pointer;'></i>" +
					'</div>';
			}
			document.getElementById('exclDtListValDiv').innerHTML = tmp;
			this.exclDtListData = this.exclDtListVal.toString();
		},

		async insertDetail() {
			var params = {
				comId: this.snarComId,
				simulId: this.simulId,
				snarId: this.snarId,
				calcDt: this.calcDt.substr(0, 10).replace(/-/g, ''),
				exclDt: String(this.exclDtListData).replace(/-/g, ''),
				cblClacDays: this.cblClacDays,
				minMaxDays: this.minMaxDays,
				regUserNo: null,
				regDttm: null,
				procUserNo: null,
				procDttm: null,
			};
			let statusCd = await this.postUpdateApi({
				apiKey: 'saveSnarExecPop',
				sendParam: {
					datas: {
						saveSnarExecPop: [params],
					},
					params: {},
				},
			});
			// console.log('statusCd', statusCd);
			if (statusCd.data.retnCd == 0) {
				const params2 = {
					simulationId: statusCd.data.dataset.simulId,
					scenarioId: this.snarId,
					comId: this.snarComId,
				};
				const res = await this.$axios.post(
					'http://192.168.10.17:3000/fems',
					params2,
				);
			}

			this.setPageData({
				isFind: true,
			});
		},
	},
};
</script>

<style scoped lang="scss">
.calcDtpicker-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;

	.v-input {
		.v-input__append-outer {
			margin-top: 0;
			margin-left: 0;

			#calcDtpicker-container {
				width: 100%;
				position: absolute;
				top: 36px;
				left: 0;
			}
		}
	}
}

.exclDtpicker-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;

	.v-input {
		.v-input__append-outer {
			margin-top: 0;
			margin-left: 0;

			#exclDtpicker-container {
				width: 100%;
				position: absolute;
				top: -256px;
				left: 0;
			}
		}
	}
}

.v-input__custom {
	flex: 0 0 auto;
	&.half {
		width: calc(50% - 20px);
	}
}
::v-deep {
	.tui-timepicker-row {
		display: flex;
		justify-content: space-around;
		background-color: #edf4fc;
		.tui-timepicker-column.tui-timepicker-colon {
			color: #000 !important;
		}
	}
}
@each $theme in dark, light {
	.v-application.#{$theme}-mode {
		.v-dialog {
			.v-card {
				&__title {
					color: map-deep-get($color, 'white', '0');
					@if $theme == dark {
						background-color: #2d3355;
						.v-btn {
							background-color: #2d3355;
						}
					} @else {
						background-color: #3f4d7d;
						.v-btn {
							background-color: #3f4d7d;
						}
					}
				}
			}
		}
	}
}
</style>
