<template>
	<ion-page>
		<sgc-page :useRefresh="true" @sgcRefresh="onLoad()">
			<sgc-loading :loadStatus="loadStatus" load-type="view">
				<div v-if="params.appConf.appType === 'as'">
					<ion-list class="item-form">
						<sgc-item-input
							placeholder="DEFT.LBL_SITE_NM"
							type="select"
							code-key="SITECD"
							v-model="params.siteCd"
							@sgcChange="changeSiteCd()"
							ref="siteCd"
						></sgc-item-input>
					</ion-list>
					<ion-card class="ion-no-margin ion-no-padding">
						<ion-card-header>
							<ion-card-title>{{ $t('HOME.TIT_DEFT_STATUS') }}</ion-card-title>
						</ion-card-header>
						<ion-card-content class="deft-status">
							<div class="status-chart donut-chart">
								<div id="doneRate" class="portion-block">
									<div class="circle" :style="{ transform: 'rotate(' + params.rotate + 'deg)' }"></div>
								</div>
								<p class="center">
									<span>{{ dataView.chartRate }}%</span>
								</p>
							</div>
							<dl class="status-info">
								<dt>{{ $t('HOME.LBL_DEFT_REQ') }}</dt>
								<dd>{{ $t('HOME.MSG_DEFT_CNT', [dataView.statusA]) }}</dd>
								<dt>{{ $t('HOME.LBL_DEFT_WDONE') }}</dt>
								<dd>{{ $t('HOME.MSG_DEFT_CNT', [dataView.statusD]) }}</dd>
								<dt>{{ $t('HOME.LBL_DEFT_ING') }}</dt>
								<dd>{{ $t('HOME.MSG_DEFT_CNT', [dataView.statusB]) }}</dd>
								<dt>{{ $t('HOME.LBL_DEFT_EDONE') }}</dt>
								<dd>{{ $t('HOME.MSG_DEFT_CNT', [dataView.statusZ]) }}</dd>
								<dt>{{ $t('HOME.LBL_DEFT_REING') }}</dt>
								<dd>{{ $t('HOME.MSG_DEFT_CNT', [dataView.statusC]) }}</dd>
								<dd style="color: red">{{ $t('HOME.MSG_DEFT_STATUS', dataView) }}</dd>
							</dl>
						</ion-card-content>
					</ion-card>
					<ion-grid class="ion-no-margin ion-no-padding">
						<ion-row v-if="params.authMenu.includes('defting')">
							<ion-col>
								<ion-button expand="block" routerLink="/as/defting">
									{{ $t('HOME.BTN_DEFT_ING') }}
								</ion-button>
							</ion-col>
						</ion-row>
						<ion-row v-if="params.authMenu.includes('deftdone')">
							<ion-col>
								<ion-button expand="block" routerLink="/as/deftdone">
									{{ $t('HOME.BTN_DEFT_DONE') }}
								</ion-button>
							</ion-col>
						</ion-row>
					</ion-grid>
				</div>
				<div v-if="params.appConf.appType === 'portal'">
					<ion-card v-if="params.authMenu.includes('deftdone') || params.authMenu.includes('deftmang')" class="ion-no-margin ion-no-padding">
						<ion-card-header>
							<ion-card-title>{{ $t('HOME.TIT_DEFT_STATUS') }}</ion-card-title>
						</ion-card-header>
						<ion-card-content class="deft-status ion-no-margin ion-no-padding">
							<div class="status-chart donut-chart">
								<div id="doneRate" class="portion-block">
									<div class="circle" :style="{ transform: 'rotate(' + params.rotate + 'deg)' }"></div>
								</div>
								<p class="center">
									<span>{{ dataView.chartRate }}%</span>
								</p>
							</div>
							<dl class="status-info">
								<dt>{{ $t('HOME.LBL_DEFT_REQ') }}</dt>
								<dd>{{ $t('HOME.MSG_DEFT_CNT', [dataView.statusA]) }}</dd>
								<dt>{{ $t('HOME.LBL_DEFT_WDONE') }}</dt>
								<dd>{{ $t('HOME.MSG_DEFT_CNT', [dataView.statusD]) }}</dd>
								<dt>{{ $t('HOME.LBL_DEFT_ING') }}</dt>
								<dd>{{ $t('HOME.MSG_DEFT_CNT', [dataView.statusB]) }}</dd>
								<dt>{{ $t('HOME.LBL_DEFT_EDONE') }}</dt>
								<dd>{{ $t('HOME.MSG_DEFT_CNT', [dataView.statusZ]) }}</dd>
								<dt>{{ $t('HOME.LBL_DEFT_REING') }}</dt>
								<dd>{{ $t('HOME.MSG_DEFT_CNT', [dataView.statusC]) }}</dd>
								<dd style="color: red">{{ $t('HOME.MSG_DEFT_STATUS', dataView) }}</dd>
							</dl>
						</ion-card-content>
					</ion-card>
					<ion-card v-else class="ion-padding ion-text-center">
						<img src="../../assets/mobile-main-01.svg" />
					</ion-card>
					<ion-grid class="ion-no-margin ion-no-padding">
						<ion-row v-if="params.authMenu.includes('deftmang')">
							<ion-col>
								<ion-button expand="block" routerLink="/po/deftmang">
									<ion-icon slot="start" :icon="Icon.buildOutline"></ion-icon>{{ $t('HOME.BTN_DEFT_MANG') }}
								</ion-button>
							</ion-col>
						</ion-row>
						<ion-row v-if="params.authMenu.includes('deftque')">
							<ion-col>
								<ion-button expand="block" routerLink="/po/deftque">
									<ion-icon slot="start" :icon="Icon.documentTextOutline"></ion-icon>{{ $t('HOME.BTN_DEFT_QUE') }}
								</ion-button>
							</ion-col>
						</ion-row>
						<ion-row>
							<ion-col v-if="params.authMenu.includes('roomrev')">
								<ion-button expand="block" routerLink="/po/roomrev">
									<ion-icon slot="start" :icon="Icon.peopleOutline"></ion-icon>{{ $t('HOME.BTN_ROOM_REV') }}
								</ion-button>
							</ion-col>
							<ion-col v-if="params.authMenu.includes('roomapp')">
								<ion-button expand="block" routerLink="/po/roomapp">
									<ion-icon slot="start" :icon="Icon.idCardOutline"></ion-icon>{{ $t('HOME.BTN_ROOM_APP') }}
								</ion-button>
							</ion-col>
						</ion-row>
						<ion-row v-if="params.authMenu.includes('address')">
							<ion-col>
								<ion-button expand="block" routerLink="/address">
									<ion-icon slot="start" :icon="Icon.listOutline"></ion-icon>{{ $t('HOME.BTN_SITE_ADDRESS') }}
								</ion-button>
							</ion-col>
						</ion-row>
					</ion-grid>
				</div>
			</sgc-loading>
		</sgc-page>
	</ion-page>
</template>

<script lang="ts">
import { AppConfVo, ViewDataVo, TcsDeftStatusVo } from '../../services/common.interface';
import { IonIcon, IonCard, IonCardContent, IonCardHeader, IonCardTitle } from '@ionic/vue';
import { commonService, defineComponent, IonPageModules, Icon } from '../../services/index';

/**
 * 공통 - 홈
 *
 * 협력 업체, 임직원 권한에 따라서 화면 구성이 달라짐
 */
export default defineComponent({
	name: 'HomePage',
	components: {
		...IonPageModules,
		IonIcon,
		IonCard,
		IonCardHeader,
		IonCardTitle,
		IonCardContent,
	},
	setup() {
		return {
			Icon,
		};
	},
	mounted() {
		this.params._loginSubscribe = commonService
			.getSharedService()
			.subscribe('login')
			.subscribe(() => {
				this.changeLogin();
			});
		this.changeLogin();
	},
	unmounted() {
		this.params._loginSubscribe.unsubscribe();
	},
	created() {
		this.onLoad();
	},
	data(): ViewDataVo<
		TcsDeftStatusVo,
		{
			appConf: AppConfVo;
			siteCd: string;
			rotate: number;
			authMenu: string[];
			_loginSubscribe: any;
		}
	> {
		const appConf = commonService.getAppConf();
		return {
			title: 'TIT_HOME',
			loadStatus: 'loading',
			dataView: null,
			params: {
				rotate: 0,
				siteCd: appConf.loginInfo.connSiteCd,
				appConf: appConf,
				authMenu: appConf.authMenu,
				_loginSubscribe: null,
			},
		};
	},
	methods: {
		changeSiteCd() {
			commonService.changeLoginData(this.params.siteCd);
		},
		changeLogin() {
			const appConf = commonService.getAppConf();
			this.params.authMenu = appConf.authMenu || [];
		},
		onLoad() {
			commonService.checkLoadStatusView(
				this,
				commonService.getView('api/selectTcsDeftStatus').then((result) => {
					this.dataView = result || {};
					this.params.rotate = 0;
					setTimeout(() => {
						this.params.rotate = (this.dataView.chartRate / 100) * 360;
					}, 500);
				})
			);
		},
	},
});
</script>
<style scoped lang="scss">
ion-item.as-site-select {
	margin: 1rem;
	border-radius: 1rem;
	ion-label,
	ion-select {
		margin: 0 1rem;
	}
}
ion-card {
	background-color: white;
	box-shadow: none;
	border-radius: 1rem;
	margin: 1rem 0 1rem 0;
	ion-card-title {
		color: var(--ion-color-primary);
		font-weight: 500;
		font-size: 1.2rem;
	}
	ion-card-content.deft-status {
		position: relative;
		padding-left: 10rem;
		div.status-chart {
			display: inline-block;
			position: absolute;
			left: 2rem;
			top: 2rem;
		}
		dl.status-info {
			margin: 0 0 1rem 0;
			display: block;
			dt,
			dd {
				display: inline-block;
				margin: 0;
				padding: 0.1em;
			}
			dt {
				min-width: 5em;
				position: relative;
				&::after {
					content: ':';
					position: absolute;
					right: 0;
				}
			}
			dd {
				min-width: calc(100% - 7em);
				text-align: right;
			}
		}
	}

	.donut-chart {
		width: 5rem;
		height: 5rem;
		margin: 0;
		border-radius: 100%;
		background-color: var(--sgc-color-primary-80);
		border: 1px solid var(--sgc-color-primary-90);
		p.center {
			background: var(--ion-color-light);
			border: 1px solid var(--sgc-color-primary-90);
			position: absolute;
			text-align: center;
			font-size: 28px;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 3rem;
			height: 3rem;
			margin: auto;
			border-radius: 50%;
			line-height: 35px;
			padding: 15% 0 0;
			span {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-size: 13px;
			}
		}
		.portion-block {
			border-radius: 50%;
			clip: rect(0px, 5rem, 5rem, 2.5rem);
			height: 100%;
			position: absolute;
			width: 100%;
			.circle {
				border-radius: 50%;
				clip: rect(0px, 2.5rem, 5rem, 0px);
				height: 100%;
				position: absolute;
				width: 100%;
				font-family: monospace;
				font-size: 1.5rem;
				transition: transform 1s;
			}
		}
	}

	#doneRate {
		transform: rotate(0deg);
		.circle {
			background: var(--ion-color-primary-tint);
		}
	}
}
ion-grid {
	ion-button {
		height: 6rem;
		font-size: 1rem;
		--background-activated: var(--ion-color-tertiary);
		&::part(native) {
			border-radius: 1rem;
			background: #9285cc;
			color: var(--sgc-color-tertiary-95);
		}
	}
}
</style>
