<template>
	<div>
		<!-- <v-btn :ripple="false" @click="dialog = !dialog">경고창</v-btn> -->
		<v-dialog
			v-model="dialog"
			width="480"
			overlay-color="#000"
			overlay-opacity="0.8"
		>
			<v-card>
				<v-toolbar
					:color="isDarkMode ? '#2d3355' : '#3f4d7d'"
					class="py-4 pr-3 pl-5"
					height="auto"
				>
					<v-toolbar-title>{{ label }}</v-toolbar-title>
					<v-btn
						icon
						tile
						small
						:ripple="false"
						@click="dialog = !dialog"
						:style="{ backgroundColor: isDarkMode ? '#2d3355' : '#3f4d7d' }"
					>
						<v-icon>mdi-close</v-icon>
					</v-btn>
				</v-toolbar>
				<v-card-text class="text-center py-10">
					{{ computedMessage }}
				</v-card-text>
				<v-card-actions class="justify-center">
					<v-btn :ripple="false" @click="clickOk()">확인</v-btn>
					<v-btn v-if="confirm" :ripple="false" @click="clickCancle()"
						>취소</v-btn
					>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
	props: {
		message: {
			type: String,
			default:
				'시스템 에러가 발생하였습니다.<br /> 동일문제가 계속 발생할 경우 전산담당자에게 문의하세요.<br /> 불편을 드려 죄송합니다.<br /><br /> [에러내용] java.lang.OutOfMemoryError: GC overhead limit exceeded',
		},
		parentPrgmId: {
			type: String,
			require: true,
		},
		item: {
			type: Object,
			require: true,
		},
		label: {
			type: String,
			require: true,
		},
		message: {
			type: String,
			require: true,
		},
		confirm: {
			type: Object,
			require: false,
		},
	},
	data() {
		return {
			dialog: false,
		};
	},
	computed: {
		...mapState({
			searchParam(state) {
				return state.pageData[this.parentPrgmId];
			},
			isDarkMode: 'isDarkMode',
		}),
		chkDialog() {
			return this.dialog;
		},
		computedMessage() {
			if (this.item != undefined && this.item != null) {
				return this.item.message;
			} else {
				return this.message;
			}
		},
	},
	watch: {
		async chkDialog(val) {
			if (val) {
				//console.log('this.item : ', this.item);
			}
		},
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
		}),
		clickOk() {
			if (this.parentPrgmId) {
				// this.$emit('yesNo',true);
				this.setPageData({ AlertPopData: true });
			}
			this.dialog = !this.dialog;
		},
		clickCancle() {
			this.setPageData({ AlertPopData: false });
			this.dialog = !this.dialog;
		},
	},
};
</script>

<style scoped lang="scss">
::v-deep {
	.v-toolbar__content {
		justify-content: space-between;
		padding: 0;

		.v-btn {
			margin-right: 0 !important;
		}
	}

	.v-card__actions {
		padding-bottom: 30px !important;
	}
}
</style>
