<template>
	<sgc-modal :title="title" @sgcCloseModal="closeModal" :toolbars="toolbars" scrollMode="fix" :noPadding="true">
		<div class="map-container" ref="map"></div>
		<div class="site-info" slot="fixed" v-if="params.selectedSite" :class="{ open: params.showStatus }">
			<ion-button expand="full" size="small" color="primary" @click="setMarker(null)">
				<ion-icon :icon="Icon.reorderTwoOutline"></ion-icon>
			</ion-button>
			<ion-list class="item-view">
				<sgc-item-view v-if="params.selectedSite.siteNm" label="SITE.LBL_SITE_NM" :text="params.selectedSite.siteNm"></sgc-item-view>
				<sgc-item-view v-if="params.selectedSite.fieldAddress" label="SITE.LBL_ADDRESS" type="textarea" :text="params.selectedSite.fieldAddress"> </sgc-item-view>
				<sgc-item-view v-if="params.selectedSite.officeAddress" label="SITE.LBL_OFFICE_ADDRESS" type="textarea" :text="params.selectedSite.officeAddress"> </sgc-item-view>
				<sgc-item-view
					v-if="params.selectedSite.constPrdFromDt"
					label="SITE.LBL_CONST_PRD"
					type="text"
					:text="params.selectedSite.constPrdFromDt + '~' + params.selectedSite.constPrdToDt"
				>
				</sgc-item-view>
				<sgc-item-view v-if="params.selectedSite.constCorp" label="SITE.LBL_CONST_CORP" type="text" :text="params.selectedSite.constCorp"> </sgc-item-view>
				<sgc-item-view v-if="params.selectedSite.manager1" label="SITE.LBL_MANAGER1" type="textarea" :text="params.selectedSite.manager1"> </sgc-item-view>
				<sgc-item-view v-if="params.selectedSite.manager2" label="SITE.LBL_MANAGER2" type="textarea" :text="params.selectedSite.manager2"> </sgc-item-view>
				<sgc-item-view v-if="params.selectedSite.manager3" label="SITE.LBL_MANAGER3" type="textarea" :text="params.selectedSite.manager3"> </sgc-item-view>
				<sgc-item-view v-if="params.selectedSite.manager4" label="SITE.LBL_MANAGER4" type="textarea" :text="params.selectedSite.manager4"> </sgc-item-view>
				<sgc-item-view v-if="params.selectedSite.manager5" label="SITE.LBL_MANAGER5" type="textarea" :text="params.selectedSite.manager5"> </sgc-item-view>
				<sgc-item-view v-if="params.selectedSite.contactNumber" label="SITE.LBL_CONTACT" type="tel" :text="params.selectedSite.contactNumber"> </sgc-item-view>
				<sgc-item-view v-if="params.selectedSite.memo" label="SITE.LBL_MEMO" type="textarea" :text="params.selectedSite.memo"> </sgc-item-view>
			</ion-list>
		</div>
	</sgc-modal>
</template>

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

export default defineComponent({
	name: 'SiteAddressMapModal',
	components: {
		...IonPageModules,
		...IonFormModules,
	},
	mounted() {
		this.params.kakaoApi = (window as any).kakao;
		if (!this.params.kakaoApi || !this.params.kakaoApi?.maps) {
			const script = document.createElement('script');
			script.type = 'text/javascript';
			script.src = 'https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=' + this.params.appKey + '&libraries=clusterer,drawing,services';
			script.addEventListener('load', () => {
				this.params.kakaoApi = (window as any).kakao;
				this.params.kakaoApi.maps.load(() => {
					this.loadData();
				});
			});
			document.head.appendChild(script);
		} else {
			this.loadData();
		}
	},
	setup() {
		return {
			Icon,
		};
	},
	props: ['siteList'],
	data(): ListDataVo<
		ZehrSiteAddressVo,
		any,
		{
			appKey: string;
			map: any;
			kakaoApi: any;
			selectedSite: ZehrSiteAddressVo;
			showStatus: boolean;
			markers: any[];
		}
	> {
		return {
			title: 'TIT_MAPVIEW',
			loadStatus: 'loading',
			dataList: [],
			params: {
				appKey: '3443996df2f3d0707054c709a04cee8a',
				map: null,
				kakaoApi: null,
				selectedSite: null,
				showStatus: false,
				markers: [],
			},
			toolbars: [],
		};
	},
	methods: {
		/** 모달 닫기 */
		closeModal() {
			return modalController.dismiss();
		},
		/** 활성화 마크 설정 */
		setMarker(site: ZehrSiteAddressVo) {
			if (site !== null && this.params.selectedSite !== site) {
				if (this.params.selectedSite === null) {
					this.params.map.setLevel(11);
				}
				if (this.params.selectedSite === null) {
					window.setTimeout(() => {
						this.params.showStatus = true;
					}, 500);
				} else {
					this.params.showStatus = true;
				}
				this.params.selectedSite = site;

				this.params.map.panTo(new this.params.kakaoApi.maps.LatLng(site.latitude, site.longtude));
			} else {
				if (this.params.selectedSite !== null) {
					this.params.showStatus = !this.params.showStatus;
				} else {
					this.params.showStatus = false;
				}
			}
		},
		/**  마크 그리기 */
		drawMaker() {
			if (commonService.isNotNull(this.dataList) && this.params.map) {
				if (this.params.markers !== null && this.params.markers.length > 0) {
					this.params.markers.forEach((maker) => {
						maker.setMap(null);
					});
				}
				this.params.markers = [];
				let latitude = { min: 38, max: 34 };
				let longtude = { min: 130, max: 126 };
				this.dataList.forEach((site) => {
					if (site.latitude && site.longtude && site.latitude > 34 && site.latitude < 38 && site.longtude > 126 && site.longtude < 130) {
						let imageSrc = utils.getAssets('img/icons/marker_green.png');
						switch (site.deptGroupCd) {
							case 'J0':
								imageSrc = utils.getAssets('img/icons/marker_red.png');
								break;
							case 'N0':
								imageSrc = utils.getAssets('img/icons/marker_blue.png');
								break;
							default:
								imageSrc = utils.getAssets('img/icons/marker_green.png');
								break;
						}
						const imageSize = new this.params.kakaoApi.maps.Size(32, 32);
						const imageOption = { offset: new this.params.kakaoApi.maps.Point(16, 32) };
						const markerImage = new this.params.kakaoApi.maps.MarkerImage(imageSrc, imageSize, imageOption);
						const marker = new this.params.kakaoApi.maps.Marker({
							position: new this.params.kakaoApi.maps.LatLng(site.latitude, site.longtude),
							image: markerImage,
						});
						marker.setMap(this.params.map);
						this.params.kakaoApi.maps.event.addListener(marker, 'click', () => {
							this.setMarker(site);
						});
						this.params.markers.push(marker);
						latitude.min = Math.min(latitude.min, site.latitude);
						latitude.max = Math.max(latitude.max, site.latitude);
						longtude.min = Math.min(longtude.min, site.longtude);
						longtude.max = Math.max(longtude.max, site.longtude);
					}
				});
				if (this.dataList.length === 1) {
					window.setTimeout(() => {
						this.setMarker(this.dataList[0]);
					}, 1000);
				} else {
					this.params.map.panTo(new this.params.kakaoApi.maps.LatLng((latitude.min + latitude.max) / 2, (longtude.min + longtude.max) / 2));
				}
			}
		},
		/** 현장 정보 불러오기 */
		loadData() {
			if (this.params.kakaoApi !== null && this.params.map !== undefined) {
				window.setTimeout(() => {
					if (this.params.map === null) {
						const container = this.$refs.map;
						const options = {
							center: new this.params.kakaoApi.maps.LatLng(36.777216136269935, 127.7034943641997),
							level: 13,
						};
						this.params.map = new this.params.kakaoApi.maps.Map(container, options);
						this.params.kakaoApi.maps.event.addListener(this.params.map, 'click', () => {
							if (this.params.showStatus) {
								this.setMarker(null);
							}
						});
					}
					if (this.params.map) {
						if (commonService.isNotNull(this.siteList)) {
							this.dataList = this.siteList;
							this.drawMaker();
						} else {
							commonService.getList('api/siteAddressList', commonService.getSubmitData({}, {}, { useYn: 'Y' })).then((list) => {
								this.dataList = list;
								this.drawMaker();
							});
						}
					}
				}, 500);
			}
		},
	},
});
</script>

<style scoped lang="scss">
div.map-container {
	width: 100%;
	height: 100%;
}

div.site-info {
	position: absolute;
	display: block;
	bottom: 5px;
	left: 0;
	right: 0;
	border: 1px solid var(--border-color);
	z-index: 1;
	padding: 0;
	transform: translate(0%, 94%);
	transition: transform 0.5s ease;
	opacity: 0.9;

	ion-list.item-view {
		--ion-item-background: rgba(255, 255, 255, 0.7);
		max-height: 30vh;
		overflow-y: auto;
		--border-radius: 0;
	}

	ion-button {
		position: absolute;
		width: 100%;
		margin: -1.3rem 0 0 0;
		left: 0;
		top: 0;
		font-size: 0.5em;
	}

	&.open {
		transform: translate(0%, 0%);
	}
}
</style>
