<template>
	<div class="custom-vc-calender">
		<div class="custom-vc-calender-title text-center" v-if="headerVisible">
			<span>{{ selectedYear }}년 {{ selectedMonth }}월</span>
		</div>
		<vc-calendar
			ref="myCalendar"
			:attributes="calendarAttributes"
			class="custom-calendar"
		>
			<!-- disable-page-swipe
      is-expanded -->
			<template v-slot:day-content="{ day, attributes }">
				<div class="plusButton" style="overflow:auto">
					<!-- <p class="plusButton mr-1" >+</p> -->
					<span
						:class="['day-label', { 'is-holiday': hldyValues(day.day) }]"
						@click="addPlan(day.year, day.month, day.day)"
						>{{ day.day }}</span
					>
					<span v-for="attr in attributes" :key="attr.key" class="day-hldyNm">
						{{ attr.customData.title }}
					</span>
					<div class="">
						<p
							v-for="attr in attributes"
							:key="attr.key"
							:class="attr.customData.planColor"
							@click="updatePlan(attr.customData.planSeq)"
						>
							{{ attr.customData.planTitle }}
						</p>
					</div>
				</div>
			</template>
		</vc-calendar>
		<component
			ref="planPop"
			:is="'PlanPop'"
			v-show="false"
			:detailList="detailList"
			:label="planLabel"
			:parentPrgmId="parentPrgmId"
		/>
	</div>
</template>
<script>
import { mapState } from 'vuex';
import Utility from '~/plugins/utility';
import PlanPop from '@/components/common/modal/PlanPop';

export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		gridName: {
			type: String,
			require: true,
		},
		headerVisible: {
			type: Boolean,
			default: true,
		},
	},
	computed: {
		...mapState({
			pageData(state) {
				return state.pageData[this.parentPrgmId];
			},
		}),
		gridData() {
			return this.pageData[this.gridName].data;
		},
		planData() {
			return this.pageData.planData;
		},
		calendarDtValue() {
			const dt = this.pageData['fromDt'];
			return dt;
		},
		selectedYear() {
			return Utility.setFormatDate(this.calendarDtValue, 'YYYY');
			//return this.calendarDtValue.split("-")[0];
		},
		selectedMonth() {
			return Utility.setFormatDate(this.calendarDtValue, 'MM');
			//return this.calendarDtValue.split("-")[1];
		},
		hldyValues() {
			const filter = this.gridData.filter(
				data => data.hldyFg === '1' || data.hldyNm,
			);
			const map = filter.map(item => {
				const dt = item.dt.split(' ')[0];
				const dtArr = dt.split('-');
				const dd = dtArr[2] * 1;
				return dd;
			});

			return day => {
				return map.includes(day);
			};
		},
		calendarAttributes() {
			if (this.planData.length > 0) {
				let attrArr = [];
				this.planData.forEach((item, idx) => {
					const dt = item.dt.split(' ')[0];
					const dtArr = dt.split('-');
					const yy = dtArr[0] * 1;
					const mm = dtArr[1] * 1 - 1;
					const dd = dtArr[2] * 1;
					attrArr.push({
						key: idx,
						customData: {
							title: item.hldyNm,
							hldyFg: item.hldyFg,
							planTitle: item.planTitle,
							planSeq: item.planSeq,
							planColor:
								// item.endDt < Utility.setFormatDate(new Date(), 'YYYY-MM-DD')
								// 	? 'grey': 
									item.planColor,
						},
						dates: new Date(yy, mm, dd),
					});
				});
				return attrArr;
			} else {
				return [];
			}
		},
	},
	watch: {
		calendarDtValue(val) {
			// if (val) {
			//   this.$refs.myCalendar.move(this.calendarDtValue);
			// }
			if (val) {
				const yy = Utility.setFormatDate(this.calendarDtValue, 'YYYY');
				const mm = Utility.setFormatDate(this.calendarDtValue, 'MM') - 1;
				this.$refs.myCalendar.showPageRange(new Date(yy, mm, 1));
			}
		},
	},
	components: {
		PlanPop,
	},
	data() {
		return {
			detailList: myDetail,
			planPopDisableFlag: false,
			planLabel: '일정',
		};
	},
	methods: {
		addPlan(year, month, day) {
			this.planLabel = '일정 등록';
			this.$refs['planPop'].popUpAction = 'insert';
			// this.$refs['planPop'].strtDt = year + '-' + month + '-' + day;
			// this.$refs['planPop'].endDt = year + '-' + month + '-' + day;
			// this.$refs['planPop'].strtDt = year + '-' + String(month).padStart(2, '0')  + '-' + String(day).padStart(2, '0');
			// this.$refs['planPop'].endDt = year + '-' + String(month).padStart(2, '0')  + '-' + String(day).padStart(2, '0');
			this.$refs['planPop'].strtDt = '';
			this.$refs['planPop'].endDt = '';
			this.$refs['planPop'].addPlanData = {
				year : year,
				month : month,
				day : day
			}
			// BEGIN TEST UI 
			// this.$refs['planPop'].blocId = this.pageData.blocMstrList[
			// 	this.pageData.blocId
			// ].blocId;
			// END TEST UI 
			this.$refs['planPop'].dialog = true;
		},
		updatePlan(val) {
			this.$refs['planPop'].popUpAction = 'update';
			this.$refs['planPop'].planSeq = val;
			this.$refs['planPop'].strtDt = '';
			this.$refs['planPop'].endDt = '';
			this.$refs['planPop'].blocId = this.pageData.blocMstrList[
				this.pageData.blocId
			].blocId;
			this.$refs['planPop'].dialog = true;
		},
	},
	mounted() {},
};
const myDetail = [];
</script>

<style lang="scss" scoped>
@import '@/assets/scss/var.scss';
@import '@/assets/scss/mixin.scss';
::-webkit-scrollbar {
	width: 0px;
}
::-webkit-scrollbar-track {
	display: none;
}
.custom-vc-calender {
	&-title {
		margin-bottom: 20px;
	}
}
::v-deep {
	.custom-calendar.vc-container {
		width: 100%;
		background-color: transparent;
		border: 0;
	}
	.vc-header,
	.vc-arrows-container {
		display: none;
	}
	.vc-weeks {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 0;
		> div {
			flex: 1 0 calc(100% / 7);
		}
	}
	.vc-weekday {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 36px;
		padding: 0;
	}
	.vc-day {
		height: 10.889vh;
		min-height: auto;

		.day-label {
			font-size: 1rem;
			line-height: 1.235;
		}
		.day-hldyNm {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: block;
			max-width: 80%;
			float: right;
			font-size: 10pt;
		}

		> div {
			position: relative;
			height: 100%;
			padding: 10px;
			border-radius: 0 !important;
		}
	}
	.vc-day.is-not-in-month {
		* {
			opacity: 1 !important;
		}
	}
	.plusButton:hover > span:first-child {
		font-weight: bolder;
		cursor: pointer;
	}
	.red {
		//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;
	}
	.blue {
		//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;
	}
	.puple {
		//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;
	}
	.green {
		//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;
		width: 90%;
	}
	.orange {
		//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;
	}
	.pink {
		//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;
	}
	.grey {
		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>
