<template>
	<v-row class="search-box" align="center" no-gutters>
		<v-col v-if="label" :cols="labelCols">
			<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-col :cols="label ? textCols : ''">
			<div class="datepicker-container">
				<v-text-field
					id="startpicker"
					ref="startpicker"
					v-model="fromDtValue"
					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
					:hide-details="true"
					readonly
					outlined
				>
					<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="isRange ? 'v-input__custom half' : 'v-input__custom'"
					:hide-details="true"
					readonly
					outlined
				>
					<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,
		},
		label: {
			type: String,
			require: false,
		},
		timePicker: {
			type: Boolean,
			require: false,
			default: false,
		},
		labelCols: {
			type: Number,
			require: false,
			default: 4,
		},
		textCols: {
			type: Number,
			require: false,
			default: 8,
		},
		widgetPage: {
			type: String,
			require: false,
		},
	},
	data() {
		return {
			today: new Date(),
			startDatepickerInstance: null,
			endDatepickerInstance: null,
			startDtValue: null,
			endDtValue: null,
			cmCycleFlag: false,
		};
	},
	computed: {
		...mapState({
			searchParam(state) {
				return state.pageData[this.parentPrgmId][this.widgetPage][
					this.widgetPage + 'Data'
				];
			},
		}),
		myCmCycle() {
			return this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
				this.widgetPage + 'Data'
			].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.timePicker ? ' HH:mm:ss' : ''),
						pickerFormat: 'yyyy-MM-dd' + (this.timePicker ? ' HH:mm A' : ''),
						sendFormat: this.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.$store.state.pageData[this.parentPrgmId][this.widgetPage][
					this.widgetPage + 'Data'
				].fromDt,
				this.myOptions.viewFormat,
			);
		},
		toDtValue() {
			return Utility.setFormatDate(
				// this.$store.state.pageData[this.parentPrgmId][this.widgetPage][this.widgetPage+'Data'].toDt,
				this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
					this.widgetPage + 'Data'
				].toDt,
				this.myOptions.viewFormat,
			);
		},
		defaultRange() {
			return this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
				this.widgetPage + 'Data'
			].defaultRange
				? this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
						this.widgetPage + 'Data'
				  ].defaultRange[this.myCmCycle]
				: null;
		},
		isRange() {
			return (
				(this.defaultRange !== null && this.defaultRange > 0) ||
				this.defaultRange === 'no limite'
			);
		},
	},
	watch: {
		myCmCycle() {
			this.cmCycleFlag = false;
			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 {
				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.timePicker) {
			this.setPageData({
				fromDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 00:00:00',
				toDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 23:59:59',
			});
		}
	},
	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.timePicker,
			calendar: {
				showToday: false,
			},
		});
		// 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.timePicker,
			calendar: {
				showToday: false,
			},
		});
		// datepicker 생성 끝

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

		// datepicker 변경시 이벤트 추가
		this.startDatepickerInstance.on('change', () => this.getStartDt());
		this.endDatepickerInstance.on('change', () => this.getEndDt());
		// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
	},
	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
		getStartDt() {
			const dt = this.startDatepickerInstance.getDate();
			this.setPageData({
				fromDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
			});
		},
		getEndDt() {
			const dt = this.endDatepickerInstance.getDate();
			this.setPageData({
				toDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
			});
		},
		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.cmCycleFlag){
				this.setPageData({ isFind: true });
				// }
				// this.cmCycleFlag = true;
			} else {
				// this.setPageData({
				//   fromDt: Utility.setBeforetDate(
				//     this.$store.state.pageData[this.parentPrgmId][this.widgetPage][this.widgetPage+'Data'].fromDt,
				//     compareDt,
				//     this.myOptions.sendFormat
				//   )
				// });
				this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
					this.widgetPage + 'Data'
				].fromDt = Utility.setBeforetDate(
					this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
						this.widgetPage + 'Data'
					],
					compareDt,
					this.myOptions.sendFormat,
				);
			}
		},
		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)
			) {
				this.setPageData({ isFind: true });
			} else {
				this.setPageData({
					toDt: Utility.setAftertDate(
						this.$store.state.pageData[this.parentPrgmId][this.widgetPage][
							this.widgetPage + 'Data'
						],
						compareDt,
						this.myOptions.sendFormat,
					),
				});
			}
		},
	},
};
</script>
<style lang="scss" scoped>
::v-deep {
	.tui-timepicker-row {
		display: flex;
		justify-content: space-around;
		background-color: #edf4fc;
		.tui-timepicker-column.tui-timepicker-colon {
			color: #000 !important;
		}
	}
}
</style>
