<template>
	<ion-select
		v-model="value"
		:interface="interface"
		:interfaceOptions="interfaceOptions"
		:placeholder="$t(placeholder ? placeholder : 'LBL_SELECT')"
		:okText="$t('BTN_OK')"
		:cancelText="$t('BTN_CANCEL')"
		@ionChange="setValue()"
		ref="select"
	>
		<ion-select-option v-if="addAll" 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>
</template>

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

import { IonSelect, IonSelectOption } from '@ionic/vue';
import commonService from './../../services/common.service';

/**
 * 공통 - 셀렉터  박스
 *
 * 셀렉터 박스
 */
export default defineComponent({
	name: 'SgcSelect',
	props: ['modelValue', 'codeKey', 'placeholder', 'addAll', 'interfaceOptions'],
	emits: ['update:modelValue', 'sgcChange', 'sgcBlur'],
	components: {
		IonSelect,
		IonSelectOption,
	},
	mounted() {
		this.onLoad();
	},
	watch: {
		modelValue() {
			this.value = '' + this.modelValue;
		},
		codeKey() {
			this.onLoad();
		},
	},
	data(): {
		value: string;
		interface: 'alert' | 'popover' | 'action-sheet';
		disabled: boolean;
		codeInfo: { codes: CodeVo[]; key: string };
	} {
		return {
			value: null,
			interface: 'popover',
			disabled: false,
			codeInfo: {
				codes: [],
				key: '',
			},
		};
	},
	methods: {
		/** 포커스 두기 */
		setFocus() {
			commonService.getRef(this.$refs, 'select', 'setFocus')?.open();
		},
		/** 비활성화 하기 */
		setDisabled(disabled: boolean) {
			const refEl = commonService.getRef(this.$refs, 'select', 'setDisabled');
			if (refEl !== null && refEl !== undefined) {
				if (refEl.setDisabled) {
					refEl.setDisabled(disabled);
				} else if (refEl.disabled !== undefined) {
					refEl.disabled = disabled;
				}
			}
		},
		/** 값 설정하기 */
		setValue() {
			if (this.codeInfo.codes?.length > 0) {
				this.$emit('update:modelValue', this.value);
				this.$emit('sgcChange', this.value);
				this.$emit('sgcBlur', this.value);
			}
		},
		/** 선택된 CodeVo 가져오기 */
		getCodeVo(): CodeVo {
			let selectedCodeVo: CodeVo = { value: this.value, label: 'UnKnown' };
			if (this.codeInfo.codes !== null && this.codeInfo.codes.length) {
				this.codeInfo.codes.forEach((item) => {
					if (item.value == this.value) {
						selectedCodeVo = item;
					}
				});
			}
			return selectedCodeVo;
		},
		/** 로드시 실행 */
		onLoad() {
			if (this.codeKey !== undefined && this.codeKey !== '') {
				this.codeInfo.key = this.codeKey;
			}
			switch (this.codeInfo.key) {
				case 'YESNO':
					this.codeInfo.codes = [
						{ label: 'Yes', value: 'Y' },
						{ label: 'No', value: 'N' },
					];
					this.value = '' + this.modelValue;
					break;
				case '':
					this.codeInfo.codes = [];
					break;
				default:
					this.value = '';
					codeService.synkCode(this.codeInfo, { codes: this.codeInfo.key }).then(() => {
						this.value = '' + this.modelValue;
					});
					break;
			}
		},
	},
});
</script>
<style scoped lang="scss"></style>
