<template>
	<v-row
		class="search-box"
		align="center"
		no-gutters
		style="margin: 14px 0px 0px"
	>
		<v-col v-if="item.label" :cols="labelCols">
			<label for="" class="search-box-label">
				<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
				{{ item.label }}
			</label>
		</v-col>
		<v-col :cols="labelCols ? 11 - labelCols : ''">
			<div :class="isRange ? 'datepicker-container' : ''">
				<v-text-field
					id="startpicker"
					ref="startpicker"
					v-model="fromDtValue"
					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
					readonly
					outlined
					:hide-details="true"
				>
					<template #append>
						<v-icon size="20">$icoCalendar</v-icon>
					</template>
					<template #append-outer>
						<div ref="startpicker-container" id="startpicker-container"></div>
					</template>
				</v-text-field>
				<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div>
				<v-text-field
					v-show="isRange"
					id="endpicker"
					ref="endpicker"
					v-model="toDtValue"
					class="v-input__custom"
					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
					readonly
					outlined
					:hide-details="true"
				>
					<template #append>
						<v-icon size="20">$icoCalendar</v-icon>
					</template>
					<template #append-outer>
						<div ref="endpicker-container" id="endpicker-container"></div>
					</template>
				</v-text-field>
			</div>
		</v-col>
	</v-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import TuiDatepicker from 'tui-date-picker';
import Utility from '~/plugins/utility';
export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		item: {
			type: Object,
			require: true,
		},
	},
	data() {
		return {
			today: new Date(),
			startDatepickerInstance: null,
			endDatepickerInstance: null,
			startDtValue: null,
			endDtValue: null,
		};
	},
	computed: {
		...mapState({
			searchParam(state) {
				if (!this.item.dataPath) {
					return state.pageData[this.parentPrgmId];
				} else {
					return state.pageData[this.parentPrgmId][this.item.dataPath];
				}
			},
		}),
		labelCols() {
			let myCols = 0;
			if (this.item.label) {
				myCols = this.item.labelCols || '4';
			}
			return myCols;
		},
		myCmCycle() {
			return this.searchParam.cmCycle;
		},
		myOptions() {
			let returnObj = {};
			switch (this.myCmCycle) {
				case 'CYC_YEAR':
					returnObj = {
						type: 'year',
						viewFormat: 'YYYY',
						pickerFormat: 'YYYY',
						sendFormat: 'YYYY',
					};
					break;

				case 'CYC_MONTH':
					returnObj = {
						type: 'month',
						viewFormat: 'YYYY-MM',
						pickerFormat: 'YYYY-MM',
						sendFormat: 'YYYYMM',
					};
					break;

				case 'CYC_DAY':
					returnObj = {
						type: 'date',
						viewFormat: 'YYYY-MM-DD',
						pickerFormat: 'yyyy-MM-dd',
						sendFormat: 'YYYYMMDD',
					};
					break;

				case 'CYC_HOUR':
					returnObj = {
						type: 'date',
						viewFormat:
							'YYYY-MM-DD' + (this.item.timePicker ? ' HH:mm:ss' : ''),
						pickerFormat:
							'yyyy-MM-dd' + (this.item.timePicker ? ' HH:mm A' : ''),
						sendFormat: this.item.timePicker
							? 'YYYY-MM-DD HH:mm:ss'
							: 'YYYYMMDD',
					};
					// returnObj = { type: "day", format: "YYYY-MM-DD HH:mm:ss" };
					break;

				default:
					break;
			}
			return returnObj;
		},
		// maxDate() {
		//   return Utility.setFormatDate("today", this.myOptions.format);
		// },
		fromDtValue() {
			return Utility.setFormatDate(
				this.searchParam.fromDt,
				this.myOptions.viewFormat,
			);
		},
		toDtValue() {
			return Utility.setFormatDate(
				this.searchParam.toDt,
				this.myOptions.viewFormat,
			);
		},
		defaultRange() {
			// console.log(this.searchParam.defaultRange);
			return this.searchParam.defaultRange
				? this.searchParam.defaultRange[this.myCmCycle]
				: null;
		},
		isRange() {
			return (
				(this.defaultRange !== null && this.defaultRange > 0) ||
				this.defaultRange === 'no limite'
			);
		},
	},
	watch: {
		myCmCycle() {
			// this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
			this.startDatepickerInstance.setType(this.myOptions.type);
			this.endDatepickerInstance.setType(this.myOptions.type);
		},
		fromDtValue(newVal, oldVal) {
			if (
				this.isRange &&
				this.defaultRange !== 'no limite' &&
				newVal !== 'Invalid Date' &&
				newVal !== oldVal
			) {
				this.toDtValueChkRang(newVal);
				this.startDatepickerInstance.setDate(new Date(newVal));
			} else {
				if (this.item.autoLoad) this.setPageData({ isFind: true });
			}
		},
		toDtValue(newVal, oldVal) {
			if (
				this.isRange &&
				this.defaultRange !== 'no limite' &&
				newVal !== 'Invalid Date' &&
				newVal !== oldVal
			) {
				this.fromDtValueChkRang(newVal);
				this.endDatepickerInstance.setDate(new Date(newVal));
			}
		},
	},
	created() {
		if (!this.searchParam.fromDt) {
			let defaultDate = '';
			if (this.item.timePicker) {
				defaultDate = Utility.setFormatDate(this.today, 'YYYY-MM-DD');
				let dt = {
					fromDt: defaultDate + ' 00:00:00',
					toDt: defaultDate + ' 23:59:59',
				};
				if (this.item.dataPath) {
					this.setDataPathPageData({
						pathKey: this.item.dataPath,
						data: dt,
					});
				} else {
					this.setPageData(dt);
				}
			} else {
				defaultDate = Utility.setFormatDate(this.today, 'YYYYMMDD');
				let dt = { fromDt: defaultDate, toDt: defaultDate };
				if (this.item.dataPath) {
					this.setDataPathPageData({
						pathKey: this.item.dataPath,
						data: dt,
					});
				} else {
					this.setPageData(dt);
				}
			}
		}
	},
	mounted() {
		const startContainer = document.getElementById('startpicker-container');
		const startTarget = document.getElementById('startpicker');
		const endContainer = document.getElementById('endpicker-container');
		const endTarget = document.getElementById('endpicker');

		// datepicker 생성
		this.startDatepickerInstance = new TuiDatepicker(startContainer, {
			date: this.today,
			language: 'ko',
			type: this.myOptions.type, // "date", // type: date || month || year
			input: {
				element: startTarget,
				format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
			},
			timePicker: this.item.timePicker ? { showMeridiem: false } : false,
		});

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

		// datepicker 변경시 이벤트 추가
		this.startDatepickerInstance.on('change', () => this.getStartDt());
		// datepicker 이벤트는 mount 될때 추가 해주어야 한다.

		// if (this.isRange) {
		// datepicker 생성
		this.endDatepickerInstance = new TuiDatepicker(endContainer, {
			date: this.today,
			language: 'ko',
			type: this.myOptions.type, // "date", // type: date || month || year
			input: {
				element: endTarget,
				format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
			},
			timePicker: this.item.timePicker ? { showMeridiem: false } : false,
		});
		// datepicker 생성 끝

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

		// datepicker 변경시 이벤트 추가
		this.endDatepickerInstance.on('change', () => this.getEndDt());
		// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
		// }
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
			setDataPathPageData: 'setDataPathPageData',
		}),
		getStartDt() {
			const dt = this.startDatepickerInstance.getDate();
			let stDt = {
				fromDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
			};
			if (this.item.dataPath) {
				this.setDataPathPageData({
					pathKey: this.item.dataPath,
					data: stDt,
				});
			} else {
				this.setPageData(stDt);
			}
		},
		getEndDt() {
			const dt = this.endDatepickerInstance.getDate();
			let edDt = {
				toDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
			};
			if (this.item.dataPath) {
				this.setDataPathPageData({
					pathKey: this.item.dataPath,
					data: edDt,
				});
			} else {
				this.setPageData(edDt);
			}
		},
		fromDtValueChkRang(newDt) {
			const defaultDt = this.$dayjs(this.fromDtValue);
			const compareDt = this.$dayjs(newDt);
			const newDefault = Utility.setNewDefaultRange(
				this.myCmCycle,
				this.defaultRange,
			);
			const myRange = newDefault.range;
			const rangeKey = newDefault.key;
			const rangeGap = compareDt.diff(defaultDt, rangeKey);

			if (
				(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
				defaultDt.format(this.myOptions.sendFormat) ===
					compareDt.format(this.myOptions.sendFormat)
			) {
				if (this.item.autoLoad) this.setPageData({ isFind: true });
			} else {
				let dt = {
					fromDt: Utility.setBeforetDate(
						this.searchParam,
						compareDt,
						this.myOptions.sendFormat,
					),
				};
				if (this.item.dataPath) {
					this.setDataPathPageData({
						pathKey: this.item.dataPath,
						data: dt,
					});
				} else {
					this.setPageData(dt);
				}
			}
		},
		toDtValueChkRang(newDt) {
			const defaultDt = this.$dayjs(this.toDtValue);
			const compareDt = this.$dayjs(newDt);
			const newDefault = Utility.setNewDefaultRange(
				this.myCmCycle,
				this.defaultRange,
			);
			const myRange = newDefault.range;
			const rangeKey = newDefault.key;
			const rangeGap = defaultDt.diff(compareDt, rangeKey);

			if (
				(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
				defaultDt.format(this.myOptions.sendFormat) ===
					compareDt.format(this.myOptions.sendFormat)
			) {
				if (this.item.autoLoad) this.setPageData({ isFind: true });
			} else {
				let dt = {
					toDt: Utility.setAftertDate(
						this.searchParam,
						compareDt,
						this.myOptions.sendFormat,
					),
				};
				if (this.item.dataPath) {
					this.setDataPathPageData({
						pathKey: this.item.dataPath,
						data: dt,
					});
				} else {
					this.setPageData(dt);
				}
			}
		},
	},
};
</script>
<style lang="scss" scoped>
#startpicker-container,
#endpicker-container {
	position: relative;
	z-index: 20;
}
.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;
		}
	}
}
</style>
