<template>
    <div class="container">
        <div class="calendar-control mb-3 d-flex align-items-center justify-content-between">
            <div class='group__box'>
                <label class="label mb-0 mr-3">客群</label>
				<div class="control">
					<div class="select">
					    <select v-model="group" class="selector">
							<option selected>服裝配件</option>
							<option>美妝</option>
							<option>旅遊</option>
						</select>
					</div>
				</div>
            </div>
           <!--  <div class='group__box'>
                <label class="label mb-0 mr-2">範圍</label>
				<div class="control">
					<div class="select">
					    <select v-model="dateRange" class="selector">
							<option>月</option>
							<option>雙週</option>
							<option>單週</option>
						</select>
					</div>
				</div>
            </div> -->
            <div class="btn-group group__btn" role="group" aria-label="date-buttons">
                <button type="button" class="btn__date" @click.prevent="periodChange('week', 1)" :class="{'active': displayPeriodUom === 'week' && displayPeriodCount === 1 }">單週</button>
                <button type="button" class="btn__date" @click.prevent="periodChange('week', 2)" :class="{'active': displayPeriodUom === 'week' && displayPeriodCount === 2 }">雙週</button>
                <button type="button" class="btn__date" @click.prevent="periodChange('month', 1)" :class="{'active': displayPeriodUom === 'month'}">月</button>
            </div>
        </div>
        <div class="calendar-parent">
			<calendar-view
				:items="items"
				:show-date="showDate"
				:time-format-options="{ hour: 'numeric', minute: '2-digit' }"
				:enable-drag-drop="true"
				:disable-past="disablePast"
				:disable-future="disableFuture"
				:show-times="showTimes"
				:display-period-uom="displayPeriodUom"
				:display-period-count="displayPeriodCount"
				:starting-day-of-week="startingDayOfWeek"
				:class="themeClasses"
				:period-changed-callback="periodChanged"
				:current-period-label="useTodayIcons ? 'icons' : ''"
				:displayWeekNumbers="displayWeekNumbers"
				:enable-date-selection="true"
				:selection-start="selectionStart"
				:selection-end="selectionEnd"
                :itemContentHeight='itemContentHeight'
				@date-selection-start="setSelection"
				@date-selection="setSelection"
				@date-selection-finish="finishSelection"
				@drop-on-date="onDrop"
				@click-date="onClickDay"
				@click-item="onClickItem"
			>
				<calendar-view-header
					slot="header"
					slot-scope="{ headerProps }"
					:header-props="headerProps"
					@input="setShowDate"
				/>
			</calendar-view>
		</div>
    </div>
</template>

<script>
import $ from 'jquery';
/* import "../../node_modules/vue-simple-calendar/dist/style.css"
import "../../node_modules/vue-simple-calendar/static/css/default.css"
import "../../node_modules/vue-simple-calendar/static/css/holidays-us.css" */
import { CalendarView, CalendarViewHeader, CalendarMathMixin } from "vue-simple-calendar"
require("vue-simple-calendar/static/css/default.css")
// require("vue-simple-calendar/static/css/holidays-us.css")

export default {
    components: {
        CalendarView,
        CalendarViewHeader
    },
	mixins: [CalendarMathMixin],
	data() {
		return {
			/* Show the current month, and give it some fake items to show */
			showDate: this.thisMonth(10),
			message: "",
			startingDayOfWeek: 0,
			disablePast: false,
			disableFuture: false,
			displayPeriodUom: "week",
			displayPeriodCount: 1,
			displayWeekNumbers: false,
			showTimes: true,
			selectionStart: null,
			selectionEnd: null,
			newItemTitle: "",
			newItemStartDate: "",
			newItemEndDate: "",
			useDefaultTheme: true,
			useHolidayTheme: true,
            useTodayIcons: false,
            itemContentHeight: '2rem',
            group: '服裝配件',
            dateRange: '單週',
			items: [
				{
					id: "e0",
					startDate: "2018-01-05",
				},
				{
					id: "e1",
					startDate: this.thisMonth(15, 18, 30),
				},
				{
					id: "e2",
					startDate: this.thisMonth(15),
					title: "Single-day item with a long title",
                },
                /*
				{
					id: "e3",
					startDate: this.thisMonth(7, 9, 25),
					endDate: this.thisMonth(10, 16, 30),
					title: "Multi-day item with a long title and times",
				},
				{
					id: "e4",
					startDate: this.thisMonth(20),
					title: "My Birthday!",
					classes: "birthday",
					url: "https://en.wikipedia.org/wiki/Birthday",
				},
				{
					id: "e5",
					startDate: this.thisMonth(5),
					endDate: this.thisMonth(12),
					title: "Multi-day item",
					classes: "purple",
				},
				{
					id: "foo",
					startDate: this.thisMonth(29),
					title: "Same day 1",
				},
				{
					id: "e6",
					startDate: this.thisMonth(29),
					title: "Same day 2",
					classes: "orange",
				},
				{
					id: "e7",
					startDate: this.thisMonth(29),
					title: "Same day 3",
				},
				{
					id: "e8",
					startDate: this.thisMonth(29),
					title: "Same day 4",
					classes: "orange",
				}, */
				{
					id: "e9",
					startDate: this.thisMonth(29),
					title: "Same day 5",
				},
				{
					id: "e10",
					startDate: this.thisMonth(29),
					title: "Same day 6",
					classes: "orange",
				},
				{
					id: "e11",
					startDate: this.thisMonth(29),
					title: "Same day 7",
				},
			],
		}
	},
	computed: {
		userLocale() {
			return this.getDefaultBrowserLocale
		},
		dayNames() {
			return this.getFormattedWeekdayNames(this.userLocale, "long", 0)
		},
		themeClasses() {
			return {
				"theme-default": this.useDefaultTheme,
				"holiday-us-traditional": this.useHolidayTheme,
				"holiday-us-official": this.useHolidayTheme,
			}
        },
	},
	mounted() {
        document.querySelector('.calendar-parent').addEventListener('mousemove', this.mouse);
		this.newItemStartDate = this.isoYearMonthDay(this.today())
        this.newItemEndDate = this.isoYearMonthDay(this.today())
    },
    destroyed() {
        document.querySelector('.calendar-parent').removeEventListener('mousemove', this.mouse);
    },
	methods: {
        mouse() {
            $('.cv-item').mouseenter(function(){
                $(this).nextAll().css({'transform': 'translateY(2rem)'});
                console.log('test');
            });
            $('.cv-item').mouseleave(function(){
                $(this).nextAll().css({'transform': 'translateY(0rem)'});
            });
        },
        periodChange(period, num) {
            this.displayPeriodUom = period;
            this.displayPeriodCount = num;
        },
		periodChanged() {
			// range, eventSource) {
			// Demo does nothing with this information, just including the method to demonstrate how
			// you can listen for changes to the displayed range and react to them (by loading items, etc.)
			//console.log(eventSource)
			//console.log(range)
		},
		thisMonth(d, h, m) {
			const t = new Date()
			return new Date(t.getFullYear(), t.getMonth(), d, h || 0, m || 0)
		},
		onClickDay(d) {
			this.selectionStart = null
			this.selectionEnd = null
			this.message = `You clicked: ${d.toLocaleDateString()}`
		},
		onClickItem(e) {
            this.message = `You clicked: ${e.title}`
            e.classes.push('clicked');
		},
		setShowDate(d) {
			this.message = `Changing calendar view to ${d.toLocaleDateString()}`
			this.showDate = d
		},
		setSelection(dateRange) {
			this.selectionEnd = dateRange[1]
			this.selectionStart = dateRange[0]
		},
		finishSelection(dateRange) {
			this.setSelection(dateRange)
			this.message = `You selected: ${this.selectionStart.toLocaleDateString()} -${this.selectionEnd.toLocaleDateString()}`
		},
		onDrop(item, date) {
			this.message = `You dropped ${item.id} on ${date.toLocaleDateString()}`
			// Determine the delta between the old start date and the date chosen,
			// and apply that delta to both the start and end date to move the item.
			const eLength = this.dayDiff(item.startDate, date)
			item.originalItem.startDate = this.addDays(item.startDate, eLength)
			item.originalItem.endDate = this.addDays(item.endDate, eLength)
		},
		clickTestAddItem() {
			this.items.push({
				startDate: this.newItemStartDate,
				endDate: this.newItemEndDate,
				title: this.newItemTitle,
				id: "e" + Math.random().toString(36).substr(2, 10),
			})
			this.message = "You added a calendar item!"
		},
    },
    created() {
    }
}
</script>