<template>
	<div class="custom-vc-calender">
		<div class="custom-vc-calender-title text-center" v-if="headerVisible">
			<span>{{ selectedYear }}년 {{ selectedMonth }}월</span>
		</div>
		<vc-calendar locale="ko-KR" 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,
		},
		showTitle: {
			type: Boolean,
			default: false,
		},
	},
	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
			}

			this.$refs['planPop'].blocId = this.pageData.blocMstrList[
				this.pageData.blocId
			].blocId;
			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>

::-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: #FF4D4F !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: #597EF7 !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: #9254DE !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: #73D13D !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: #FFA940 !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: #F759AB !important;
		color: #fff;
		border-radius: 0.125rem;
		font-size: 0.75rem;
		line-height: 1.25;
		text-align: left;
		margin-bottom: 0.25rem;
	}

	.grey {
		color: #fff;
		border-radius: 0.125rem;
		font-size: 0.75rem;
		line-height: 1.25;
		text-align: left;
		margin-bottom: 0.25rem;
	}
}
</style>
