<template>
	<ion-page>
		<sgc-page :title="title">
			<form novalidate @submit.prevent="onSearch">
				<ion-list class="item-form">
					<sgc-item-input
						label="DEFT.LBL_SITE_NM"
						type="select"
						:required="true"
						:code-key="codeKey.siteCd"
						v-model="searchModel.siteCd"
						@sgcChange="formChange('siteCd')"
						ref="siteCd"
					></sgc-item-input>
					<sgc-item-input
						label="DEFT.LBL_DONG"
						type="select"
						:addAll="true"
						:code-key="codeKey.dong"
						v-model="searchModel.dong"
						@sgcChange="formChange('dong')"
						ref="dong"
					></sgc-item-input>
					<sgc-item-input
						label="DEFT.LBL_HSNO"
						type="select"
						:addAll="true"
						:code-key="codeKey.hsno"
						v-model="searchModel.hsno"
						@sgcChange="formChange('hsno')"
						ref="hsno"
					></sgc-item-input>
					<sgc-item-input label="DEFT.LBL_APLNT_NM" type="text" v-model="searchModel.aplntNm" ref="aplntNm"></sgc-item-input>
					<sgc-item-input label="DEFT.LBL_RCPT_DT" type="datetime-range" v-model="searchModel.offrDtFrom" v-model:to="searchModel.offrDtTo" ref="offrDt"></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-item v-for="(item, i) in dataList" :key="i" :routerLink="'/as/deftdone/' + item.deftNo">
						<ion-label>
							<h3>
								<ion-badge class="emg-gb" :class="item.emgGbCd"> {{ item.emgGbNm }} </ion-badge>
								{{ utils.getDonghsno(item.dong, item.hsno) }}
							</h3>
							<p>{{ utils.getJobTypeNm(item.deftLjobtypNm, item.deftMjobtypNm, item.deftJobtypNm) }}</p>
							<p>{{ item.deftCn }}</p>
							<p>{{ item.rcptDt }} {{ utils.getDatePass(item.rcptDt) }}</p>
						</ion-label>
						<div slot="end" class="deft-status">
							<ion-badge class="deft-prcg-stus" :class="item.deftPrcgStusCd">{{ item.deftPrcgStusNm }}</ion-badge>
						</div>
					</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, TcsDeftVo } from '../../services/common.interface';

/**
 * 협력업체 - 하자완료조회
 *
 * 완료된 하자 정보의 목록을 조회함
 */
export default defineComponent({
	name: 'AsDeftDonePage',
	components: {
		...IonPageModules,
		...IonFormModules,
	},
	mounted() {
		if (commonService.isNotNull(this.searchModel.siteCd)) {
			this.formChange('siteCd');
			this.onSearch();
		}
	},
	setup() {
		return {
			utils,
		};
	},
	data(): ListDataVo<
		TcsDeftVo,
		{
			cmpnCd: string;
			siteCd: string;
			dong: string;
			hsno: string;
			deftNo: string;
			aplntNm: string;
			deftPrcgStusCd: string;
			offrDtFrom: string;
			offrDtTo: string;
			emgGbCd: string;
			crryTelNo: string;
		}
	> {
		return {
			title: 'TIT_DEPTDONE',
			loadStatus: 'ready',
			searchModel: {
				cmpnCd: '',
				siteCd: commonService.getAppConf()?.loginInfo?.connSiteCd,
				dong: '',
				hsno: '',
				deftNo: '',
				aplntNm: '',
				deftPrcgStusCd: '',
				offrDtFrom: '',
				offrDtTo: null,
				emgGbCd: '',
				crryTelNo: '',
			},
			dataList: [],
			codeKey: {
				siteCd: 'SITECD',
				dong: '',
				hsno: '',
			},
		};
	},
	methods: {
		/**
		 * 폼값 변경 이벤트
		 *
		 * @param type
		 */
		formChange(type: string) {
			switch (type) {
				case 'siteCd':
					this.searchModel.dong = '';
					this.searchModel.hsno = '';
					if (commonService.isNull(this.searchModel.siteCd)) {
						commonService.setFormDisabled(true, this.$refs, 'dong');
						commonService.setFormDisabled(true, this.$refs, 'hsno');
					} else {
						commonService.setFormDisabled(false, this.$refs, 'dong');
						commonService.setFormDisabled(true, this.$refs, 'hsno');
						this.codeKey.dong = 'DONG_' + this.searchModel.siteCd;
					}
					break;
				case 'dong':
					this.searchModel.hsno = '';
					if (commonService.isNull(this.searchModel.dong)) {
						commonService.setFormDisabled(true, this.$refs, 'hsno');
					} else {
						commonService.setFormDisabled(false, this.$refs, 'hsno');
						this.codeKey.hsno = 'DONG_' + this.searchModel.siteCd + '_' + this.searchModel.dong;
					}
					break;
			}
		},
		/**
		 * 검색 하기
		 */
		onSearch() {
			if (commonService.isNull(this.searchModel.siteCd)) {
				return commonService.openFormInvalid('현장', this.$refs, 'siteCd');
			} else {
				commonService.checkLoadStatusList(
					this,
					commonService
						.getList(
							'api/selectTcsDeftList',
							commonService.getSubmitData(
								this.searchModel,
								{
									offrDtFrom: 'date',
									offrDtTo: 'date',
								},
								{ showType: 'DONE' }
							)
						)
						.then((list) => {
							this.dataList = list;
						})
				);
			}
		},
	},
});
</script>
<style scoped lang="scss"></style>
