<template>
	<v-row class="search-box">
		<v-col v-if="label" :cols="labelCols">
			<label for="" class="search-box-label">
				<v-icon>mdi-checkbox-blank-circle</v-icon>
				{{ label }}
			</label>
		</v-col>
		<v-col :cols="label ? textCols : ''">
			<template v-if="mode == 'date'">
				<v-calendar
					v-model="dateModel"
					:mode="mode"
					@input="datepickerChangeEvt($event)"
				></v-calendar>
			</template>
			<template v-else-if="mode == 'dateRange'">
				<v-date-picker
					v-model="range"
					is-range
					@input="datepickerChangeEvt($event)"
				>
					<template v-slot="{ inputValue, inputEvents }">
						<v-row>
							<v-col class="pa-0">
								<v-text-field
									readonly
									:value="inputValue.start"
									v-on="inputEvents.start"
									append-icon="mdi-calendar"
									class="v-input__custom"
								></v-text-field>
							</v-col>
							<v-col cols="1" class="pa-0"></v-col>
							<v-col class="pa-0">
								<v-text-field
									readonly
									:value="inputValue.end"
									v-on="inputEvents.end"
									append-icon="mdi-calendar"
									class="v-input__custom"
								></v-text-field>
							</v-col>
						</v-row>
					</template>
				</v-date-picker>
			</template>
			<template v-else-if="mode == 'dateTimeRange'">
				<v-date-picker
					v-model="range"
					mode="dateTime"
					is-range
					is24hr
					@input="datepickerChangeEvt($event)"
				>
					<template v-slot="{ inputValue, inputEvents }">
						<v-text-field
							readonly
							:value="`${inputValue.start} ~ ${inputValue.end}`"
							v-on="inputEvents.start"
							append-icon="mdi-calendar"
							class="v-input__custom"
						></v-text-field>
					</template>
				</v-date-picker>
			</template>
		</v-col>
	</v-row>
</template>
<script>
export default {
	props: {
		model: {
			require: true,
		},
		label: {
			type: String,
			default: '',
			require: false,
		},
		placeholder: {
			type: String,
			default: '',
			require: false,
		},
		mode: {
			type: String,
			default: 'date',
			require: false,
		},
		labelCols: {
			type: Number,
			require: false,
			default: 4,
		},
		textCols: {
			type: Number,
			require: false,
			default: 7,
		},
	},
	components: {
		// VCalendar,
	},
	computed: {
		dateRangeText() {
			if (this.fromDateVal.length > 0) {
				return this.fromDateVal.join(' ~ ');
			} else {
				return '';
			}
		},
	},
	data() {
		return {
			fromDateVal: [],
			fromDateMenu: false,
			dateModel: null,
			range: {
				start: new Date(2020, 9, 12),
				end: new Date(2020, 9, 16),
			},
		};
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			this.dateModel = this.model;
		},
		datepickerChangeEvt(e) {
			this.$emit('update:model', e);
		},
	},
};
</script>
<style scoped lang="scss">
::v-deep {
	.v-text-field__details {
		display: none;
	}
	.v-input__slot {
		margin-bottom: 0;
	}
}
</style>
