<template>
	<ion-page>
		<sgc-page :title="title">
			<ion-grid class="ion-no-margin ion-no-padding">
				<ion-row>
					<ion-col>
						<ion-button
							expand="full"
							:color="params.selectedTab === 'LIST' ? 'danger' : 'primary'"
							:class="{ selected: params.selectedTab === 'LIST' }"
							@click="changeTab('LIST')"
							>LIST</ion-button
						>
					</ion-col>
					<ion-col>
						<ion-button
							expand="full"
							:color="params.selectedTab === 'VIEW' ? 'danger' : 'primary'"
							:class="{ selected: params.selectedTab === 'VIEW' }"
							@click="changeTab('VIEW')"
							>VIEW</ion-button
						>
					</ion-col>
					<ion-col>
						<ion-button
							expand="full"
							:color="params.selectedTab === 'FORM' ? 'danger' : 'primary'"
							:class="{ selected: params.selectedTab === 'FORM' }"
							@click="changeTab('FORM')"
							>FORM</ion-button
						>
					</ion-col>
				</ion-row>
			</ion-grid>
			<ion-title class="page-title with-title-deco">
				<p class="ion-text-wrap">TITLE {{ params.selectedTab }}</p>
				<ion-note class="title-deco" v-if="params.selectedTab === 'VIEW'">
					<ion-badge class="emg-gb A">긴급</ion-badge>
					<ion-badge class="emg-gb B">상(중요)</ion-badge>
					<ion-badge class="emg-gb C">중(보통)</ion-badge>
					<ion-badge class="emg-gb D">하(일반)</ion-badge>
					<ion-badge class="emg-gb E">기타</ion-badge>
				</ion-note>
				<ion-note class="title-deco" v-if="params.selectedTab === 'LIST'">
					<ion-badge class="deft-prcg-stus A">신청</ion-badge>
					<ion-badge class="deft-prcg-stus B">접수</ion-badge>
					<ion-badge class="deft-prcg-stus C">재하자</ion-badge>
					<ion-badge class="deft-prcg-stus D">작업완료</ion-badge>
					<ion-badge class="deft-prcg-stus Z">최종완료</ion-badge>
					<ion-badge class="deft-prcg-stus X">반려</ion-badge>
				</ion-note>
			</ion-title>
			<ion-list v-if="params.selectedTab === 'LIST'" class="item-list">
				<ion-item-divider>
					<ion-label>List Title</ion-label>
				</ion-item-divider>
				<ion-item v-for="(item, i) in dataList" :key="i">
					<ion-label>
						<h3>{{ item.title }}</h3>
						<p>{{ item.contents }}</p>
						<p>{{ item.regdate }}</p>
					</ion-label>
				</ion-item>
			</ion-list>

			<ion-list v-if="params.selectedTab === 'VIEW'" class="item-view">
				<sgc-item-view label="SAMPLE.LBL_RADIO" :text="dataView.radio"></sgc-item-view>
				<sgc-item-view label="SAMPLE.LBL_CHECKBOX" :text="dataView.checkbox?.join(', ')"></sgc-item-view>
				<sgc-item-view label="SAMPLE.LBL_SELECT" :text="dataView.select"></sgc-item-view>
				<sgc-item-view label="SAMPLE.LBL_DATETIME" type="datetime" :text="dataView.datetime"></sgc-item-view>
				<sgc-item-view label="SAMPLE.LBL_DATETIME_RANGE" :text="utils.showDateRange(dataView.datetimeFrom, dataView.datetimeTo)"></sgc-item-view>
				<sgc-item-view label="SAMPLE.LBL_HOUR_RANGE" :text="utils.showTime(dataView.hourFrom, dataView.hourTo)"></sgc-item-view>
				<sgc-item-view label="SAMPLE.LBL_CONTENT" type="textarea" :text="dataView.contents"></sgc-item-view>
				<sgc-item-view label="SAMPLE.LBL_TITLE" :text="dataView.title"></sgc-item-view>
			</ion-list>
			<ion-list v-if="params.selectedTab === 'FORM'" class="item-form">
				<sgc-item-input ref="radio" label="SAMPLE.LBL_RADIO" type="radio" :required="true" :code-key="codeKey.key1" v-model="dataView.radio"></sgc-item-input>
				<sgc-item-input ref="checkbox" label="SAMPLE.LBL_CHECKBOX" type="checkbox" :required="true" :code-key="codeKey.key2" v-model="dataView.checkbox"></sgc-item-input>
				<sgc-item-input
					ref="select"
					label="SAMPLE.LBL_SELECT"
					type="select"
					:required="true"
					:code-key="codeKey.key3"
					v-model="dataView.select"
					:add-all="true"
				></sgc-item-input>
				<sgc-item-input ref="datetime" label="SAMPLE.LBL_DATETIME" type="datetime" :required="true" v-model="dataView.datetime"></sgc-item-input>
				<sgc-item-input
					ref="datetimeRange"
					label="SAMPLE.LBL_DATETIME_RANGE"
					type="datetime-range"
					:required="true"
					v-model="dataView.datetimeFrom"
					v-model:to="dataView.datetimeTo"
				></sgc-item-input>
				<sgc-item-input
					ref="hourRange"
					label="SAMPLE.LBL_HOUR_RANGE"
					type="hour-range"
					:required="true"
					v-model="dataView.hourFrom"
					v-model:to="dataView.hourTo"
				></sgc-item-input>
				<sgc-item-input ref="contents" label="SAMPLE.LBL_CONTENT" :required="true" type="textarea" v-model="dataView.contents"></sgc-item-input>
				<sgc-item-input ref="title" label="SAMPLE.LBL_TITLE" :required="true" v-model="dataView.title"></sgc-item-input>
				<ion-button color="primary" expand="block" @click="submit">SUBMIT</ion-button>
			</ion-list>
			<div v-if="params.selectedTab === 'FORM'">
				<ion-button size="small" @click="changeKey('CS007')"><ion-label>CS007</ion-label></ion-button>
				<ion-button size="small" @click="changeKey('CS006')"><ion-label>CS006</ion-label></ion-button>
				<ion-button size="small" @click="changeValue('S01')"><ion-label>S01</ion-label></ion-button>
				<ion-button size="small" @click="changeValue('AS1')"><ion-label>AS1</ion-label></ion-button>
				<ion-button size="small" @click="stressTest(true)"><ion-label>stressTest Fail</ion-label></ion-button>
				<ion-button size="small" @click="stressTest(false)"><ion-label>stressTest Ok</ion-label></ion-button>
			</div>
			<div>
				<ion-button size="small" @click="openToast('primary')"><ion-label>Toast primary</ion-label></ion-button>
				<ion-button size="small" @click="openToast('secondary')"><ion-label>Toast secondary</ion-label></ion-button>
				<ion-button size="small" @click="openToast('tertiary')"><ion-label>Toast tertiary</ion-label></ion-button>
				<ion-button size="small" @click="openToast('success')"><ion-label>Toast success</ion-label></ion-button>
				<ion-button size="small" @click="openToast('warning')"><ion-label>Toast warning</ion-label></ion-button>
				<ion-button size="small" @click="openToast('danger')"><ion-label>Toast danger</ion-label></ion-button>
				<ion-button size="small" @click="openToast('dark')"><ion-label>Toast dark</ion-label></ion-button>
				<ion-button size="small" @click="openToast('medium')"><ion-label>Toast medium</ion-label></ion-button>
				<ion-button size="small" @click="openToast('light')"><ion-label>Toast light</ion-label></ion-button>
				<ion-button size="small" @click="openToast(null)"><ion-label>Toast default</ion-label></ion-button>
			</div>
		</sgc-page>
	</ion-page>
</template>

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

/**
 * 개발 - 디자인 가이드
 *
 * 완료된 하자 정보의 목록을 조회함
 */
export default defineComponent({
	name: 'SamplePage',
	components: {
		...IonPageModules,
	},
	setup() {
		return {
			utils,
		};
	},
	data(): ViewListDataVo<
		{
			radio: string;
			checkbox: string[];
			select: string;
			datetime: string;
			datetimeFrom: string;
			datetimeTo: string;
			hourFrom: string;
			hourTo: string;
			title: string;
			contents: string;
		},
		{
			title: string;
			contents: string;
			regdate: string;
		},
		{ selectedTab: string }
	> {
		const dataList: {
			title: string;
			contents: string;
			regdate: string;
		}[] = [];
		[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].forEach((idx) => {
			dataList.push({
				title: idx + ' 제목이 위치합니다.제목이 위치합니다.제목이 위치합니다.',
				contents: '긴 내용이 오는 위치 입니다.긴 내용이 오는 위치 입니다.긴 내용이 오는 위치 입니다.긴 내용이 오는 위치 입니다.긴 내용이 오는 위치 입니다.',
				regdate: '2021-12-30',
			});
		});
		dataList.push();
		return {
			title: 'TIT_SAMPLE',
			dataList: dataList,
			dataView: {
				radio: '',
				checkbox: [],
				select: null,
				datetime: '',
				datetimeFrom: '20221212',
				datetimeTo: '20221212',
				hourFrom: '1000',
				hourTo: '1230',
				contents: '긴 내용이 오는 위치 입니다.\n긴 내용이 오는 위치 입니다.\n긴 내용이 오는 위치 입니다.긴 내용이 오는 위치 입니다.긴 내용이 오는 위치 입니다.',
				title: 'title title',
			},
			codeKey: {
				key1: 'CS007',
				key2: 'CS008',
				key3: 'CS009',
			},
			params: {
				selectedTab: 'FORM',
			},
		};
	},
	methods: {
		/** 텝 변경 */
		changeTab(tab: string) {
			this.params.selectedTab = tab;
		},
		/** 키변경 */
		changeKey(key: string) {
			this.codeKey.key1 = key;
		},
		/** 데이타 확인 */
		submit() {
			if (commonService.isNull(this.dataView.radio)) {
				return commonService.openFormInvalid('라디오', this.$refs, 'radio');
			}
			if (commonService.isNull(this.dataView.checkbox)) {
				return commonService.openFormInvalid('체크박스', this.$refs, 'checkbox');
			}
			if (commonService.isNull(this.dataView.radio)) {
				return commonService.openFormInvalid('라디오', this.$refs, 'radio');
			}
			if (commonService.isNull(this.dataView.select)) {
				return commonService.openFormInvalid('콤보박스', this.$refs, 'select');
			}
			if (commonService.isNull(this.dataView.datetime)) {
				return commonService.openFormInvalid('날자', this.$refs, 'datetime');
			}
			if (commonService.isNull(this.dataView.datetimeFrom) || commonService.isNull(this.dataView.datetimeTo)) {
				return commonService.openFormInvalid('날자기간', this.$refs, 'datetimeRange');
			}
			if (commonService.isNull(this.dataView.hourFrom) || commonService.isNull(this.dataView.hourTo)) {
				return commonService.openFormInvalid('시간기간', this.$refs, 'hourRange');
			}
			if (commonService.isNull(this.dataView.title)) {
				return commonService.openFormInvalid('제목', this.$refs, 'title');
			}
			if (commonService.isNull(this.dataView.contents)) {
				return commonService.openFormInvalid('네용', this.$refs, 'contents');
			}
		},
		/** 토스트 열기 */
		openToast(color: IonColorType) {
			commonService.openToast('Message Message Message Message', null, 260000, 'message title', color, null, null, '/home');
		},
		/** 값 강제 변경 */
		changeValue(value: string) {
			this.dataView.radio = value;
			this.dataView.checkbox = [value];
		},
		/** 테이타 베이스 스트레스 테스트 */
		stressTest(useError: boolean) {
			commonService.openConfirm('Database Stress Test Start. This will insert over 1000 row into TMP_DEFT_CUSTSIGN').then(() => {
				commonService.getView(useError ? 'api/insertStressTestFail' : 'api/insertStressTestOk').then((result) => {
					if (result) {
						commonService.openToast(JSON.stringify(result), null, 5000, null, 'success');
					}
				});
			});
		},
	},
});
</script>
<style scoped lang="scss"></style>
