<template>
	<v-row class="search-box">
		<v-col v-if="label" :cols="labelCols">
			<label for="" class="search-box-label">
				{{ label }}
			</label>
		</v-col>
		<v-col :cols="label ? textCols : ''">
			<v-row>
				<v-col class="pa-0">
					<vc-date-picker
						v-model="fromDtValue"
						:available-dates="myAvailableDates"
						:timezone="fromTimezone"
						mode="dateTime"
						is24hr
						is-required
					>
						<template v-slot="{ inputEvents }">
							<v-text-field
								readonly
								:value="fromDtValue"
								v-on="inputEvents"
								append-icon="mdi-calendar"
								class="v-input__custom"
							></v-text-field>
						</template>
					</vc-date-picker>
				</v-col>
				<template v-if="isRange">
					<v-col cols="1" class="pa-0"></v-col>
					<v-col class="pa-0">
						<vc-date-picker
							v-model="toDtValue"
							:available-dates="myAvailableDates"
							:timezone="toTimezone"
							mode="dateTime"
							is24hr
							is-required
						>
							<template v-slot="{ inputEvents }">
								<v-text-field
									readonly
									:value="toDtValue"
									v-on="inputEvents"
									append-icon="mdi-calendar"
									class="v-input__custom"
								></v-text-field>
							</template>
						</vc-date-picker>
					</v-col>
				</template>
			</v-row>
		</v-col>
	</v-row>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Utility from '~/plugins/utility';

export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		textCols: {
			type: Number,
			require: false,
			default: 8,
		},
		labelCols: {
			type: Number,
			require: false,
			default: 3,
		},
	},
	data() {
		return {
			label: '조회기간',
			labelPrepend: true,
			today: new Date(),
			myAvailableDates: {
				start: null,
				end: null,
			},
			fromTimezone: '',
			toTimezone: '',
		};
	},
	computed: {
		...mapState({
			searchParam: state => state.pageData,
		}),
		myCmCycle() {
			return this.searchParam[this.parentPrgmId].cmCycle;
		},
		defaultRange() {
			return this.searchParam[this.parentPrgmId].defaultRange[this.myCmCycle];
		},
		isRange() {
			return (
				(this.defaultRange !== null && this.defaultRange > 0) ||
				this.defaultRange === 'no limite'
			);
		},
		fromDtValue: {
			get() {
				return Utility.setFormatDate(
					this.searchParam[this.parentPrgmId].fromDt,
					'YYYY-MM-DD HH:mm:ss',
				);
			},
			set(value) {
				return this.setPageData({
					fromDt: Utility.setFormatDate(value, 'YYYY-MM-DD HH:mm') + ':00',
				});
			},
		},
		toDtValue: {
			get() {
				return Utility.setFormatDate(
					this.searchParam[this.parentPrgmId].toDt,
					'YYYY-MM-DD HH:mm:ss',
				);
			},
			set(value) {
				return this.setPageData({
					toDt: Utility.setFormatDate(value, 'YYYY-MM-DD HH:mm') + ':00',
				});
			},
		},
	},
	watch: {
		fromDtValue(newVal, oldVal) {
			if (
				this.isRange &&
				this.defaultRange !== 'no limite' &&
				newVal !== 'Invalid Date' &&
				newVal !== oldVal
			) {
				this.toDtValueChkRang(newVal);
			}
		},
		toDtValue(newVal, oldVal) {
			if (
				this.isRange &&
				this.defaultRange !== 'no limite' &&
				newVal !== 'Invalid Date' &&
				newVal !== oldVal
			) {
				this.fromDtValueChkRang(newVal);
			}
		},
	},
	created() {
		const today = Utility.setFormatDate('today', 'YYYY-MM-DD');
		this.myAvailableDates = {
			start: null,
			end: today,
		};
		this.setPageData({
			fromDt: today + ' 00:00:00',
			toDt: today + ' 23:59:59',
		});
	},
	// async mounted() {},
	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
		...mapActions({}),
		fromDtValueChkRang(newDt) {
			const defaultDt = this.$dayjs(this.fromDtValue);
			const compareDt = this.$dayjs(newDt);
			const rangGap = compareDt.diff(defaultDt, 'hour');
			if (this.defaultRange > rangGap && rangGap > 0) {
				// console.log("통과");
			} else {
				this.setPageData({
					fromDt: Utility.setBeforetDate(
						this.searchParam[this.parentPrgmId],
						compareDt,
						'YYYY-MM-DD',
						'HH:mm:ss',
					),
				});
			}
		},
		toDtValueChkRang(newDt) {
			const defaultDt = this.$dayjs(this.toDtValue);
			const compareDt = this.$dayjs(newDt);
			const rangGap = defaultDt.diff(compareDt, 'hour');

			if (this.defaultRange > rangGap && rangGap > 0) {
				// console.log("통과");
			} else {
				this.setPageData({
					toDt: Utility.setAftertDate(
						this.searchParam[this.parentPrgmId],
						compareDt,
						'YYYY-MM-DD',
						'HH:mm:ss',
					),
				});
			}
		},
	},
};
</script>

<style scoped lang="scss">
::v-deep {
	.v-text-field__details {
		display: none;
	}
	.v-input__slot {
		margin-bottom: 0;
	}
}
</style>
