<template>
	<div ref="wrapper">
		<label v-if="addAll" @click="setValue('')" :class="{ checked: value === '' }">
			<ion-icon :icon="Icon.radioButtonOff" class="icon-unchecked"></ion-icon>
			<ion-icon :icon="Icon.radioButtonOn" class="icon-checked"></ion-icon>
			<span>{{ $t('LBL_SELECTALL') }}</span>
		</label>
		<label v-for="(item, i) in codeInfo.codes" :key="i" @click="setValue(item.value)" :class="{ checked: value === item.value }">
			<ion-icon :icon="Icon.radioButtonOff" class="icon-unchecked"></ion-icon>
			<ion-icon :icon="Icon.radioButtonOn" class="icon-checked"></ion-icon>
			<span>{{ item.label }}</span>
		</label>
	</div>
</template>

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

/**
 * 공통  - 라디오 박스
 *
 * 라디오 박스로 입력 관리
 */
export default defineComponent({
	name: 'SgcRadio',
	props: ['modelValue', 'addAll', 'codeKey'],
	emits: ['update:modelValue', 'sgcChange', 'sgcBlur'],
	components: {
		IonIcon,
	},
	mounted() {
		this.onLoad();
	},
	setup() {
		return {
			Icon,
		};
	},
	watch: {
		modelValue() {
			this.value = this.modelValue;
		},
		codeKey() {
			this.onLoad();
		},
	},
	data(): { value: string; disabled: boolean; codeInfo: { codes: CodeVo[]; key: string } } {
		return {
			value: '',
			disabled: false,
			codeInfo: {
				codes: [],
				key: 'CS006',
			},
		};
	},
	methods: {
		/** 포커스 두기 - 사용안함 */
		setFocus() {
			// todo
		},
		/** 비활성화 */
		setDisabled(disabled: boolean) {
			this.disabled = disabled;
		},
		setValue(value: string) {
			this.value = value;
			this.$emit('update:modelValue', this.value);
			this.$emit('sgcChange', this.value);
			this.$emit('sgcBlur', this.value);
		},
		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 'SENDYN':
					this.codeInfo.codes = [
						{ label: this.$t('DEFT.LBL_SEND'), value: 'Y' },
						{ label: this.$t('DEFT.LBL_UNSEND'), value: 'N' },
					];
					this.value = this.modelValue;
					break;
				case 'WEEKMONTH':
					this.codeInfo.codes = [
						{ label: this.$t('ROOM.LBL_EVERYDAY'), value: '10' },
						{ label: this.$t('ROOM.LBL_EVERYWEEK'), value: '20' },
					];
					this.value = this.modelValue;
					break;
				case '':
					this.codeInfo.codes = [];
					break;
				default:
					codeService.synkCode(this.codeInfo, { codes: this.codeInfo.key }).then(() => {
						this.value = this.modelValue;
					});
					break;
			}
		},
	},
});
</script>
<style scoped lang="scss">
div {
	display: block;
	margin-bottom: 0.5em;
	label {
		display: inline-block;
		margin-right: 1em;
		white-space: nowrap;
		min-width: 4em;
		cursor: pointer;
		vertical-align: middle;
		> span {
			font-size: 0.9rem;
			display: inline-block;
			margin-left: 0.2em;
			margin-right: 0.7em;
			vertical-align: middle;
		}
		> ion-icon {
			font-size: 0.9rem;
			vertical-align: middle;
			&.icon-checked {
				display: none;
			}
			&.icon-unchecked {
				display: inline-block;
			}
		}
		&.checked {
			/** background-color: var(--sgc-color-tertiary-95); */
			color: var(--sgc-color-tertiary-50);
			> ion-icon {
				&.icon-checked {
					display: inline-block;
				}
				&.icon-unchecked {
					display: none;
				}
			}
		}
	}
}
</style>
