<template>
	<div>
		<ion-select
			v-model="valueFrom"
			:interface="interface"
			:interfaceOptions="interfaceOptions"
			:placeholder="$t(placeholder ? placeholder : 'LBL_SELECT')"
			:okText="$t('BTN_OK')"
			:cancelText="$t('BTN_CANCEL')"
			@ionChange="setValue()"
		>
			<ion-select-option v-if="!removeAll" value="">{{ $t('LBL_SELECTALL') }}</ion-select-option>
			<ion-select-option v-for="(item, i) in codeInfo.codes" :value="item.value" :key="i">{{ item.label }}</ion-select-option>
		</ion-select>
		<span>~</span>
		<ion-select
			v-model="valueTo"
			:interface="interface"
			:interfaceOptions="interfaceOptions"
			:placeholder="$t(placeholder ? placeholder : 'LBL_SELECT')"
			:okText="$t('BTN_OK')"
			:cancelText="$t('BTN_CANCEL')"
			@ionChange="setValue()"
		>
			<ion-select-option v-if="!removeAll" value="">{{ $t('LBL_SELECTALL') }}</ion-select-option>
			<ion-select-option v-for="(item, i) in codeInfo.codes" :value="item.value" :key="i">{{ item.label }}</ion-select-option>
		</ion-select>
	</div>
</template>

<script lang="ts">
import { CodeVo } from '../../services/common.interface';
import { defineComponent } from 'vue';
import codeService from './../../services/code.service';
import commonService from './../../services/common.service';

import { IonSelect, IonSelectOption } from '@ionic/vue';

export default defineComponent({
	name: 'SgcHourRange',
	props: ['from', 'to', 'codeKey', 'placeholder', 'removeAll', 'interfaceOptions'],
	emits: ['update:from', 'update:to', 'sgcChange', 'sgcBlur'],
	components: {
		IonSelect,
		IonSelectOption,
	},
	mounted() {
		this.onLoad();
	},
	watch: {
		from() {
			this.updateValue();
		},
		to() {
			this.updateValue();
		},
		codeKey() {
			this.onLoad();
		},
	},
	data(): {
		valueFrom: string;
		valueTo: string;
		disabled: boolean;
		interface: 'alert' | 'popover' | 'action-sheet';
		codeInfo: { codes: CodeVo[]; key: string };
	} {
		return {
			valueFrom: null,
			valueTo: null,
			disabled: false,
			interface: 'popover',
			codeInfo: {
				codes: [],
				key: 'CS029', // RE001
			},
		};
	},
	methods: {
		/** 포커스 두기 (사용안함) */
		setFocus() {
			// todo
		},
		/** 비활성화 */
		setDisabled(disabled: boolean) {
			this.disabled = disabled;
		},
		/** 값 변경 */
		updateValue() {
			this.valueFrom = this.from;
			this.valueTo = this.to;
		},
		/** 값 설정 */
		setValue() {
			const valueFrom = this.valueFrom;
			const valueTo = this.valueTo;
			if (valueFrom !== null && valueFrom !== '' && valueTo !== null && valueTo !== '' && valueFrom > valueTo) {
				commonService.openToast('MSG_ERROR_HOURRANGE', null, null, null, 'warning');
				return;
			}
			this.$emit('update:from', this.valueFrom);
			this.$emit('update:to', this.valueTo);
			this.$emit('sgcChange', [this.valueFrom, this.valueTo]);
		},
		/** 로드시 실행 */
		onLoad() {
			if (this.codeKey !== undefined && this.codeKey !== '') {
				this.codeInfo.key = this.codeKey;
			}
			codeService.synkCode(this.codeInfo, { codes: this.codeInfo.key }).then(() => {
				this.updateValue();
			});
		},
	},
});
</script>
<style scoped lang="scss">
div {
	width: 100%;
	display: flex;
	ion-select {
		display: inline-flex;
		min-width: 5em;
		position: relative;
	}
	> span {
		font-size: 0.7em;
		box-orient: vertical;
		display: inline-flex;
		align-self: center;
		margin: 0 0.3em;
	}
}
</style>
