<template>
	<v-row class="search-box">
		<v-col v-if="label" :cols="labelCols">
			<label for="" class="search-box-label">
				<v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
					>mdi-record-circle</v-icon
				>
				{{ label }}
			</label>
		</v-col>
		<v-col :cols="label ? textCols : ''">
			<div class="datepicker-container">
				<v-select
					ref="fromSelect"
					v-model="fromValue"
					:items="this.timeList"
					item-text="valueNm"
					item-value="value"
					outlined
					:hide-details="true"
					append-icon="mdi-chevron-down"
					class="v-select__custom"
				></v-select>
				<div class="mx-3" :style="{ lineHeight: 0 }">~</div>
				<v-select
					ref="toSelect"
					v-model="toValue"
					:items="this.timeList"
					item-text="valueNm"
					item-value="value"
					solo
					outlined
					:hide-details="true"
					append-icon="mdi-chevron-down"
					class="v-select__custom"
				></v-select>
			</div>
		</v-col>
	</v-row>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		autoLoad: {
			type: Boolean,
			require: false,
			default: false,
		},
		label: {
			type: String,
			require: false,
			default: '수신 가능 시각',
		},
		textCols: {
			type: Number,
			require: false,
			default: 7,
		},
		labelCols: {
			type: Number,
			require: false,
			default: 4,
		},
		required: {
			type: Boolean,
			require: false,
			default: false,
		},
	},
	data() {
		return {
			timeList: [],
		};
	},
	computed: {
		...mapState({
			searchParam: state => state.pageData,
		}),
		toValue: {
			get() {
				return this.searchParam[this.parentPrgmId].recvToTm;
			},
			set(value) {
				if (value < this.searchParam[this.parentPrgmId].recvFrTm) {
					this.$refs['toSelect'].selectItem(
						this.searchParam[this.parentPrgmId].recvToTm,
					);
				} else {
					return this.setPageData({ recvToTm: value });
				}
			},
		},
		fromValue: {
			get() {
				return this.searchParam[this.parentPrgmId].recvFrTm;
			},
			set(value) {
				if (value > this.searchParam[this.parentPrgmId].recvToTm) {
					this.$refs['fromSelect'].selectItem(
						this.searchParam[this.parentPrgmId].recvFrTm,
					);
				} else {
					return this.setPageData({ recvFrTm: value });
				}
			},
		},
	},
	watch: {
		async reLoadFlag() {
			await this.initData();
		},
	},
	async created() {
		if (this.autoLoad && this.reLoadFlag) {
			await this.initData();
		}
	},
	created() {
		this.setTimeList();
	},
	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
		...mapActions({
			postApi: 'modules/list/postApi',
			postUpdateApi: 'modules/list/postUpdateApi',
			postApiReturn: 'modules/list/postApiReturn',
			setTree: 'modules/list/setTree',
			chkOpenTabList: 'chkOpenTabList',
		}),
		setTimeList() {
			for (var i = 0; i < 24; i++) {
				this.timeList.push({
					valueNm: String(i) + '시',
					value: i.toString().padStart(2, '0'),
				});
			}
		},

		async initData() {},
	},
};
</script>
