<template>
	<sgc-modal :title="title" @sgcCloseModal="closeModal" :toolbars="toolbars" :useRefresh="true" @sgcRefresh="loadData()">
		<sgc-loading :loadStatus="loadStatus" loadType="list">
			<ion-title v-if="searchModel.siteNm" class="page-title">
				<p class="ion-text-wrap">{{ searchModel.siteNm }} ( {{ searchModel.siteCd }})</p>
			</ion-title>
			<ion-list v-if="dataList" class="item-list">
				<ion-item v-for="(item, i) in dataList" :key="i" @click="selectItem(item)">
					<ion-label>
						<h3>{{ item.corpKor }} [{{ item.corpTypNm }}]</h3>
						<p>{{ item.corpRegNo }}</p>
						<p>{{ item.reprNm }} {{ item.asRpstJobtypNm }}</p>
					</ion-label>
				</ion-item>
			</ion-list>
		</sgc-loading>
	</sgc-modal>
</template>

<script lang="ts">
import { IonItem, IonLabel, IonList, IonTitle, modalController } from '@ionic/vue';
import { defineComponent } from 'vue';
import { ListDataVo, SmComCovendVo } from '../../../services/common.interface';
import commonService from '../../../services/common.service';
import SgcLoading from './../SgcLoading.vue';
import SgcModal from './../SgcModal.vue';

/**
 * 공통 - 공사 현장 관련 협력업체 선택 모달
 */
export default defineComponent({
	name: 'SearchCovendModal',
	props: ['site'],
	mounted() {
		this.loadData();
	},
	components: {
		SgcModal,
		SgcLoading,
		IonTitle,
		IonItem,
		IonList,
		IonLabel,
	},
	data(): ListDataVo<SmComCovendVo, { siteCd: string; siteNm: string }> {
		return {
			title: 'TIT_FINDSITE',
			dataList: [],
			loadStatus: 'loading',
			searchModel: {
				siteCd: '1633',
				siteNm: 'error',
			},
			toolbars: [],
		};
	},
	methods: {
		/** 모달 닫기 */
		closeModal() {
			return modalController.dismiss();
		},
		/** 아이템 설정하기 */
		selectItem(item: SmComCovendVo) {
			modalController.dismiss(item, 'selected');
		},
		/** 현장 정보 목록 가져오기 */
		loadData() {
			if (commonService.isNotNull(this.site) && commonService.isNotNull(this.site.siteCd)) {
				this.searchModel = this.site;
			}
			commonService.checkLoadStatusList(
				this,
				commonService.getList('api/selectVenList', { query: this.searchModel.siteCd }).then((list) => {
					this.dataList = list;
				})
			);
		},
	},
});
</script>

<style scoped lang="scss">
ion-text {
	text-align: center;
	font-size: 1rem;
	:deep(strong) {
		color: var(--ion-color-danger);
	}
}
ion-list {
	background: transparent;
	ion-list-header {
		color: var(--ion-color-primary-tint);
		font-weight: 600;
	}
	ion-item {
	}
}
</style>
