<template>
	<ion-page>
		<sgc-page :title="title" :useRefresh="true" @sgcRefresh="onSearch">
			<form novalidate @submit.prevent="onSearch">
				<ion-list class="item-form">
					<sgc-item-input
						type="datetime-range"
						label="ROOM.LBL_YYYYMMDD"
						:required="true"
						v-model="searchModel.reYyyymmddF"
						v-model:to="searchModel.reYyyymmddT"
						@sgcChange="onSearch()"
						ref="startEndYyyymmdd"
					></sgc-item-input>
					<sgc-item-input
						type="select"
						label="ROOM.LBL_ROOM"
						:required="true"
						:add-all="true"
						:code-key="codeKey.meetingroomId"
						v-model="searchModel.meetingroomId"
						@sgcChange="onSearch()"
						ref="meetingroomId"
					></sgc-item-input>
					<sgc-item-input
						type="radio"
						label="ROOM.LBL_STATUS"
						:code-key="codeKey.status"
						v-model="searchModel.status"
						@sgcChange="onSearch()"
						ref="meetingroomId"
					></sgc-item-input>
					<ion-button type="submit" color="primary" size="small" expand="block">{{ $t('BTN_SEARCH') }}</ion-button>
				</ion-list>
			</form>
			<sgc-loading :loadStatus="loadStatus" loadType="list">
				<ion-list class="item-list">
					<ion-list-header>
						<ion-label>{{ $t('ROOM.LBL_ROOMREV') }}</ion-label>
					</ion-list-header>
					<ion-item v-for="(item, i) in dataList" :key="i" :detail="true">
						<ion-label @click="viewRemMeetingCon(item)">
							<h3>
								<ion-badge>{{ item.statusNm }}</ion-badge>
								{{ item.reName }}
							</h3>
							<h4>{{ item.locationNm }} -{{ item.bunho }}</h4>
							<p>{{ item.pymd }}<br />{{ item.phm }}</p>
							<p>
								{{ item.snm }}
								<span v-if="item.attendNum">({{ item.attendNum }} 명)</span>
							</p>
						</ion-label>
						<ion-text slot="end">
							<br />
							<ion-button fill="solid" @click="setCancelClose(item, 'APP')" :disabled="item?.status !== '20'">{{ $t('ROOM.BTN_REV_APP') }}</ion-button>
						</ion-text>
					</ion-item>
				</ion-list>
			</sgc-loading>
		</sgc-page>
	</ion-page>
</template>

<script lang="ts">
import { commonService, defineComponent, IonFormModules, IonPageModules, utils } from '../../services/index';

import { ListDataVo, RoomRemInfoVo } from '../../services/common.interface';

import { PoRoomRevRegModal, PoRoomRevViewModal } from './modals/index';

/**
 * 임직원 - 회의실 예약  승인
 *
 * 회의실 예약을 승인하는 페이지
 */
export default defineComponent({
	name: 'PoRoomAppPage',
	components: {
		...IonPageModules,
		...IonFormModules,
	},
	mounted() {
		const today: Date = utils.getDateObject();
		today.setDate(1);
		this.searchModel.reYyyymmddF = utils.getDate(today, 'yyyyMMdd');
		today.setMonth(today.getMonth() + 1);
		this.searchModel.reYyyymmddT = utils.getDateAddDay(today, -1, 'yyyyMMdd');
		this.onSearch();
	},
	setup() {
		return {
			utils,
		};
	},
	data(): ListDataVo<
		RoomRemInfoVo,
		{
			meetingroomId: string;
			reYyyymmddF: string;
			reYyyymmddT: string;
			status: string;
		}
	> {
		return {
			title: 'TIT_ROOMREV',
			loadStatus: 'ready',
			searchModel: {
				meetingroomId: '',
				reYyyymmddF: '',
				reYyyymmddT: '',
				status: '20',
			},
			dataList: [],
			codeKey: {
				status: 'RE002_APP',
				meetingroomId: 'ROOMCD',
			},
		};
	},
	methods: {
		/** 회의실 예약  정보 보이기 */
		viewRemMeetingCon(item: RoomRemInfoVo) {
			if (item !== null) {
				commonService.openAlert(item.meetingCon || item.meetingName || item.recon, null, {
					header: 'ROOM.LBL_MEETING_CON',
					backdropDismiss: true,
				});
			}
		},
		/**
		 * 회의실 예약 하기
		 *
		 * @param type
		 */
		setRoomRevReg(type: string) {
			commonService.openModal(PoRoomRevRegModal, { remInfo: {}, showType: type }).then(() => {
				this.onSearch();
			});
		},
		/**
		 * 회의실 예약 승인하기
		 *
		 * @param item
		 * @param type
		 */
		setCancelClose(item: RoomRemInfoVo, type: string) {
			switch (type) {
				case 'APP':
					switch (item.status) {
						case '20':
							commonService
								.openModal(PoRoomRevViewModal, {
									remInfo: { reservationId: item.reservationId },
									showType: 'APP',
								})
								.then(() => {
									this.onSearch();
								});
							break;
					}
					break;
			}
		},
		/** 검색하기 */
		onSearch() {
			const remParams = commonService.getSubmitData(this.searchModel, {
				reYyyymmddF: 'date',
				reYyyymmddT: 'date',
				status: 'codeall',
				meetingroomId: 'codeall',
			});
			commonService.checkLoadStatusList(
				this,
				commonService.getList('api/room/selectZehrRomResrvtnStatusList', remParams).then((list) => {
					this.dataList = list || [];
				})
			);
		},
	},
});
</script>
<style scoped lang="scss"></style>
