<template>
	<ion-page>
		<sgc-page :useRefresh="true" :title="title" @sgcRefresh="onSearch()">
			<form novalidate @submit.prevent="onSearch">
				<ion-list class="item-form">
					<sgc-item-input type="search" v-model="searchModel.query" ref="siteNm" placeholder="SITE.LBL_SITE_NM">
						<ion-button :disabled="dataList.length === 0" type="button" color="primary" size="small" expand="block" @click="showMap()" class="map-btn">
							{{ $t('SITE.BTN_MAP') }}
						</ion-button>
					</sgc-item-input>
				</ion-list>
			</form>
			<sgc-loading :loadStatus="loadStatus" loadType="list">
				<ion-list class="item-list">
					<ion-item v-for="(item, i) in dataList" :key="i" @click="showSiteInfo(item)">
						<ion-label>
							<h3>{{ item.siteNm }} - {{ item.constCorp }} [ {{ item.constPrdFromDt }} ~ {{ item.constPrdToDt }} ]</h3>
							<p>{{ item.fieldAddress }}</p>
							<p>{{ item.contactNumber }}</p>
						</ion-label>
					</ion-item>
				</ion-list>
			</sgc-loading>
		</sgc-page>
	</ion-page>
</template>

<script lang="ts">
import { ListDataVo, ZehrSiteAddressVo } from '../../services/common.interface';
import { defineComponent, commonService, Icon, IonPageModules } from '../../services/index';
import { SiteAddressMapModal } from './modals/index';

/**
 * 임직원 - 현장 주소록
 *
 * 현장 주소록을 보여줌 - 상세한 정보는 지도 모달 창에서 모여줌
 */
export default defineComponent({
	name: 'SiteAddressPage',
	components: {
		...IonPageModules,
	},
	setup() {
		return {
			Icon,
		};
	},
	created() {
		this.onLoad();
	},
	data(): ListDataVo<ZehrSiteAddressVo, { query: string }> {
		return {
			title: 'TIT_ADDRESS',
			loadStatus: 'ready',
			searchModel: {
				query: '',
			},
			dataList: [],
			codeKey: {},
		};
	},
	methods: {
		/** 지도 보이기 */
		showMap(siteInfo?: ZehrSiteAddressVo) {
			commonService.openModal(SiteAddressMapModal, { siteList: siteInfo ? [siteInfo] : this.dataList });
		},
		/** 하단 토스트로 현장 정보 보이기 */
		showSiteInfo(item: ZehrSiteAddressVo) {
			commonService.openToast('SITE.MSG_SITE_TOAST', item, 5000, item.siteNm, 'success', Icon.map, [
				{
					text: this.$t('SITE.BTN_SHOWMAP'),
					handler: () => {
						this.showMap(item);
					},
				},
			]);
		},
		/** 검색 하기 */
		onSearch() {
			commonService.checkLoadStatusList(
				this,
				commonService.getList('api/siteAddressList', commonService.getSubmitData(this.searchModel, {}, { useYn: 'Y' })).then((list) => {
					this.dataList = list;
				})
			);
		},
		/** 로드시 자동 실행 */
		onLoad() {
			this.onSearch();
		},
	},
});
</script>
<style scoped lang="scss">
ion-button {
	&.map-btn {
		width: 5em;
		height: calc(100% - 7px);
	}
}
</style>
