<template>
	<div class="l-layout">
		<v-row ref="rowParent">
			<v-col :cols="12">
				<v-card class="pa-3 widget-card">
					<div class="d-flex align-center justify-space-between">
						<v-card-title class="pa-0"
							>캘린더
							<span class="pl-2"
								>{{ selectedYear }}년 {{ selectedMonth }}월</span
							></v-card-title
						>
						<v-card-subtitle class="mt-0 pa-0">
							<v-icon
								v-show="widgetPrgmId"
								class="mr-1"
								size="25"
								@click="btnAction('widgetCallPage')"
								>mdi-note-search</v-icon
							>
							<v-icon
								v-show="widgetPopFg"
								size="25"
								@click="btnAction('popWidget')"
								>mdi-plus-box-multiple</v-icon
							>
						</v-card-subtitle>
					</div>
					<div class="d-flex align-center justify-space-between mt-2">
						<div class="weekday redDay">일</div>
						<div class="weekday">월</div>
						<div class="weekday">화</div>
						<div class="weekday">수</div>
						<div class="weekday">목</div>
						<div class="weekday">금</div>
						<div class="weekday blueDay">토</div>
					</div>
					<div class="d-flex align-center justify-space-between">
						<div class="weekdayForm redDay"><span id="day0"></span></div>
						<div class="weekdayForm"><span id="day1"></span></div>
						<div class="weekdayForm"><span id="day2"></span></div>
						<div class="weekdayForm"><span id="day3"></span></div>
						<div class="weekdayForm"><span id="day4"></span></div>
						<div class="weekdayForm"><span id="day5"></span></div>
						<div class="weekdayForm blueDay"><span id="day6"></span></div>
					</div>
					<div class="d-flex align-center justify-space-between">
						<div class="weekdayForm redDay"><span id="day7"></span></div>
						<div class="weekdayForm"><span id="day8"></span></div>
						<div class="weekdayForm"><span id="day9"></span></div>
						<div class="weekdayForm"><span id="day10"></span></div>
						<div class="weekdayForm"><span id="day11"></span></div>
						<div class="weekdayForm"><span id="day12"></span></div>
						<div class="weekdayForm blueDay"><span id="day13"></span></div>
					</div>
				</v-card>
			</v-col>
		</v-row>
	</div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'; // , mapActions
import Vue from 'vue';
import DateUtility from '~/plugins/dateUtility';
import Utility from '~/plugins/utility';
import Grid from '~/components/common/Grid';
import Chart from '~/components/common/Chart';

export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		widgetId: {
			type: String,
			require: true,
		},
		widgetPrgmId: {
			type: Boolean,
			default: true,
		},
		widgetPopFg: {
			type: Boolean,
			default: true,
		},
		widgetReflashMm: {
			type: Number,
			require: true,
		},
	},
	components: {
		DateUtility,
		Grid,
		Chart,
		Utility,
	},
	computed: {
		...mapState({
			searchParam(state) {
				return state.pageData[this.parentPrgmId];
			},
			isDarkMode: 'isDarkMode',
		}),
	},
	watch: {},
	beforeMounted() {},
	beforeCreate() {
		this.$store.commit('setWidgetPageData', {
			prgmId: this.$route.query.prgmId,
			caldWidget: { caldWidgetData },
		});
	},
	created() {
		this.search();
		this.timer = setInterval(this.search, this.widgetReflashMm);
	},
	beforeDestroy() {
		window.clearTimeout(this.timer);
	},
	mounted() {},
	data() {
		return {
			pop: null,
			selectedYear: this.convertStringToDateFormat(new Date()).substr(0, 4),
			selectedMonth: this.convertStringToDateFormat(new Date()).substr(5, 2),
		};
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
			setWidgetChartOption: 'setWidgetChartOption',
			openDashboardWidget: 'openDashboardWidget',
		}),
		...mapActions({
			postApi: 'modules/list/postApi',
			postApiReturn: 'modules/list/postApiReturn',
		}),
		convertStringToDateFormat(val) {
			var result = '';

			result = Utility.setFormatDate(val, 'YYYY-MM-DD');

			return result;
		},
		btnAction(action) {
			switch (action) {
				case 'popWidget':
					this.openDashboardWidget({
						prgmId: this.$route.query.prgmId,
						widgetId: this.widgetId,
					});
					break;
				case 'widgetCallPage':
					this.$parent.$parent.$parent.openWidgetPrgm(this.widgetId);
					break;
			}
		},
		async search() {
			const res = await this.postApiReturn({
				apiKey: 'selectWeekWorkCald',
				resKey: 'workcaldData',
				sendParam: {},
			});

			const res2 = await this.postApiReturn({
				apiKey: 'selectWeekWorkCaldDetl',
				resKey: 'workcaldData',
				sendParam: {},
			});
			for (var i = 0; i < res.length; i++) {
				var hldyNm = res[i].hldyNm == null ? '' : res[i].hldyNm;
				eval(
					"document.getElementById('day" +
						i +
						"').innerHTML = res[" +
						i +
						"].day + ' ' +hldyNm",
				);
				if (res[i].hldyFg == '1') {
					eval(
						"document.getElementById('day" + i + "').className += ' redDay'",
					);
				}
				for (var j = 0; j < res2.length; j++) {
					if (res[i].day == res2[j].day && res2[j].planTitle != null) {
						var tmpHtml =
							"<p class ='" +
							res2[j].planColor +
							"Plan'>" +
							res2[j].planTitle +
							'</p>';
						if (i == 0) {
							document.getElementById('day0').innerHTML += tmpHtml;
						} else if (i == 1) {
							document.getElementById('day1').innerHTML += tmpHtml;
						} else if (i == 2) {
							document.getElementById('day2').innerHTML += tmpHtml;
						} else if (i == 3) {
							document.getElementById('day3').innerHTML += tmpHtml;
						} else if (i == 4) {
							document.getElementById('day4').innerHTML += tmpHtml;
						} else if (i == 5) {
							document.getElementById('day5').innerHTML += tmpHtml;
						} else if (i == 6) {
							document.getElementById('day6').innerHTML += tmpHtml;
						} else if (i == 7) {
							document.getElementById('day7').innerHTML += tmpHtml;
						} else if (i == 8) {
							document.getElementById('day8').innerHTML += tmpHtml;
						} else if (i == 9) {
							document.getElementById('day9').innerHTML += tmpHtml;
						} else if (i == 10) {
							document.getElementById('day10').innerHTML += tmpHtml;
						} else if (i == 11) {
							document.getElementById('day11').innerHTML += tmpHtml;
						} else if (i == 12) {
							document.getElementById('day12').innerHTML += tmpHtml;
						} else if (i == 13) {
							document.getElementById('day13').innerHTML += tmpHtml;
						}
					}
				}
			}
		},
	},
};
const caldWidgetData = {};
</script>

<style lang="scss" scoped >
.v-avatar {
	border-radius: 21px;
	font-size: 1.75rem;
}
.v-virtual-scroll-wrapper {
	overflow-y: auto;
	max-height: 210px;
}
.weekday {
	background-color: #383f5d;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	width: 15%;
	padding: 0;
	font-size: 0.9rem;
}
.weekdayForm {
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	height: 7.6vh;
	min-height: 80px;
	box-sizing: border-box;
	width: 15%;
	overflow-y: auto;
	font-size: 14px;
	// padding-left: 3px;
	// padding-right: 6px;
	padding: 3px 4px;
}
.redDay {
	color: #fb5a83;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.blueDay {
	color: #2d8cf6;
}

.redPlan {
	//background-color: rgba(229,62,62,var(--bg-opacity));
	background-color: #e53e3e !important;
	color: #fff;
	border-radius: 0.125rem;
	font-size: 0.75rem;
	line-height: 1.25;
	text-align: left;
	margin-bottom: 0.25rem;
}
.bluePlan {
	//background-color: rgba(66,153,225,var(--bg-opacity));
	background-color: #4299e1 !important;
	color: #fff;
	border-radius: 0.125rem;
	font-size: 0.75rem;
	line-height: 1.25;
	text-align: left;
	margin-bottom: 0.25rem;
}
.puplePlan {
	//background-color: rgba(102,126,234,var(--bg-opacity));
	background-color: #667eea !important;
	color: #fff;
	border-radius: 0.125rem;
	font-size: 0.75rem;
	line-height: 1.25;
	text-align: left;
	margin-bottom: 0.25rem;
}
.greenPlan {
	//background-color: rgba(56,178,172,var(--bg-opacity));
	background-color: #38b2ac !important;
	color: #fff;
	border-radius: 0.125rem;
	font-size: 0.75rem;
	line-height: 1.25;
	text-align: left;
	margin-bottom: 0.25rem;
}
.orangePlan {
	//background-color: rgba(237,137,54,var(--bg-opacity));
	background-color: #ed8936 !important;
	color: #fff;
	border-radius: 0.125rem;
	font-size: 0.75rem;
	line-height: 1.25;
	text-align: left;
	margin-bottom: 0.25rem;
}
.pinkPlan {
	//background-color: rgba(237,100,166,var(--bg-opacity));
	background-color: #ed64a6 !important;
	color: #fff;
	border-radius: 0.125rem;
	font-size: 0.75rem;
	line-height: 1.25;
	text-align: left;
	margin-bottom: 0.25rem;
}
.greyPlan {
	background-color: #6d6d6d;
	color: #fff;
	border-radius: 0.125rem;
	font-size: 0.75rem;
	line-height: 1.25;
	text-align: left;
	margin-bottom: 0.25rem;
}
</style>
