<template>
	<div ref="wrapper" :class="{ disabled: disabled }">
		<label v-for="(item, i) in codeInfo.codes" :key="i" @click="setValue(item.value)" :class="{ checked: value.includes(item.value) }">
			<ion-icon :icon="Icon.squareOutline" class="icon-unchecked"></ion-icon>
			<ion-icon :icon="Icon.checkboxOutline" class="icon-checked"></ion-icon>
			<span>{{ item.label }}</span>
		</label>
	</div>
</template>

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

export default defineComponent({
	name: 'SgcCheckbox',
	props: ['modelValue', 'codeKey'],
	emits: ['update:modelValue', 'sgcChange', 'sgcBlur'],
	components: {
		IonIcon,
	},
	mounted() {
		this.onLoad();
	},
	setup() {
		return {
			Icon,
		};
	},
	watch: {
		modelValue() {
			this.updateValue();
		},
		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;
		},
		/** 값 변경 */
		updateValue() {
			if (typeof this.modelValue === 'string') {
				this.value = [this.modelValue];
			} else if (Array.isArray(this.modelValue)) {
				this.value = this.modelValue;
			}
		},
		/** 값 설정 */
		setValue(value: string) {
			if (this.value.includes(value)) {
				this.value.splice(this.value.indexOf(value), 1);
			} else {
				this.value.push(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.updateValue();
					break;
				case 'WEEK':
					this.codeInfo.codes = [
						{ label: this.$t('ROOM.LBL_WEEK_MU'), value: 'MU' },
						{ label: this.$t('ROOM.LBL_WEEK_TU'), value: 'TU' },
						{ label: this.$t('ROOM.LBL_WEEK_WE'), value: 'WE' },
						{ label: this.$t('ROOM.LBL_WEEK_TH'), value: 'TH' },
						{ label: this.$t('ROOM.LBL_WEEK_FR'), value: 'FR' },
					];
					this.updateValue();
					break;
				case '':
					this.codeInfo.codes = [];
					break;
				default:
					codeService.synkCode(this.codeInfo, { codes: this.codeInfo.key }).then(() => {
						this.updateValue();
					});
					break;
			}
		},
	},
});
</script>
<style scoped lang="scss">
div {
	display: block;
	margin-bottom: 0.5em;
	--border-color-checked: var(--ion-color-primary);
	--background-checked: var(--ion-color-primary);
	&.disabled {
		label {
			font-style: italic;
			pointer-events: none;
			&,
			&.checked {
				color: var(--ion-color-medium);
			}
		}
	}
	label {
		display: inline-block;
		margin-right: 1em;
		white-space: nowrap;
		min-width: 5.5em;
		cursor: pointer;
		> span {
			font-size: 0.9rem;
			display: inline-block;
			margin-left: 0.2em;
			margin-right: 0.7em;
		}
		> ion-icon {
			font-size: 0.9rem;
			vertical-align: middle;
			&.icon-checked {
				display: none;
			}
			&.icon-unchecked {
				display: inline-block;
			}
		}
		&.checked {
			color: var(--sgc-color-tertiary-50);
			> ion-icon {
				vertical-align: middle;
				&.icon-checked {
					display: inline-block;
				}
				&.icon-unchecked {
					display: none;
				}
			}
		}
	}
}
</style>
