<template>
	<ion-input v-model="formNm" @click="setFocus" :readonly="true">
		<ion-button shape="round" color="medium" size="small" class="ion-no-padding">
			<ion-icon slot="icon-only" :icon="Icon.search"></ion-icon>
		</ion-button>
	</ion-input>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import { IonButton, IonIcon, IonInput } from '@ionic/vue';
import { SmComCovendVo } from '../../services/common.interface';
import commonService from '../../services/common.service';
import Icon from './../../services/icon';
import SearchCovendModal from './modals/SearchCovendModal.vue';

/**
 * 공통 - 아이디 검색
 *
 * 공사 현장의 관련 협력 업체
 */
export default defineComponent({
	name: 'SgcSearchId',
	props: ['value', 'label', 'searchType', 'placeholder', 'params'],
	emits: ['update:value', 'update:label', 'sgcChange', 'sgcBlur'],
	components: {
		IonInput,
		IonButton,
		IonIcon,
	},
	setup() {
		return { Icon };
	},
	mounted() {
		this.onLoad();
	},
	watch: {
		value() {
			this.onLoad();
		},
		label() {
			this.onLoad();
		},
	},
	data(): {
		formCd: string;
		disabled: boolean;
		formNm: string;
	} {
		return {
			formCd: null,
			disabled: false,
			formNm: null,
		};
	},
	methods: {
		/** 포커스 두기 */
		setFocus() {
			switch (this.searchType) {
				case 'COVEND':
					commonService.openModal(SearchCovendModal, { site: this.params }).then((result) => {
						const { data, role } = result;
						if (role === 'selected') {
							const vo: SmComCovendVo = data;
							this.formCd = vo.covendId;
							this.formNm = vo.corpKor;
							this.setValue();
						}
					});
					break;
			}
		},
		/** 비활성화 */
		setDisabled(disabled: boolean) {
			this.disabled = disabled;
		},
		/** 값 설정하기 */
		setValue() {
			this.$emit('update:value', this.formCd);
			this.$emit('update:label', this.formNm);
			this.$emit('sgcChange', { value: this.formCd, label: this.formNm });
		},
		/** 로드시 실행 */
		onLoad() {
			this.formCd = this.value;
			this.formNm = this.label;
		},
	},
});
</script>
<style scoped lang="scss">
ion-input {
	ion-button {
		position: absolute;
		right: 0;
		width: 2em;
		height: 2em;

		ion-icon {
			font-size: 1.3em;
		}
	}
}
</style>
