<template>
	<Calendar 
	class="calendar"
	backgroundText
	:name="title"
	:selectMode="selectMode"
	:mode="mode"
	:lunar="lunar"
	:selectDates="selectDates"
	:monthRange="monthRange"
	:remarks="remarks"
	:tileContent="tileContent"
	:holidays="holidays"
	:completion="completion"
	:useSwiper="useSwiper"
	:arrowLeft="arrowLeft"
	:arrowRight="arrowRight"
	:monFirst="monFirst"
	:language="language"
	:format="format"
	:weeks="weeks"
	:begin="begin"
	:end="end"
	:disabled="disabled"

	@onSelect="$emit('onSelect')"
	@onMonthChange="$emit('onMonthChange')"
	@next="$emit('next')"
	@prev="$emit('prev')"
	@setToday="$emit('setToday')"

	@abort="$emit('abort')"
	@onload="$emit('load')"
	@onclick="$emit('click')"
	@ondblclick="$emit('dblclick')"
	@onfocus="$emit('focus')"
	@onblur="$emit('blur')"
	@onkeyup="$emit('keyup')"
	@onkeydown="$emit('keydown')"
	@onkeypress="$emit('keypress')"
	@onmousedown="$emit('mousedown')"
	@onmousemove="$emit('mousemove')"
	@onmouseover="$emit('mouseover')"
	@onmouseout="$emit('mouseout')"
	@onmouseup="$emit('mouseup')"
   />
</template>

<script setup>
import Calendar from 'mpvue-calendar';
import lunar from 'mpvue-calendar/dist/lunar';

// name	type	default	description
// selectMode	String	'select'	For the selection mode of calendar component, can be used by 'select', 'multi','range', 'multiRange' mode
// mode	String	'month'	Configure calendar display mode, the modes has 'month', 'week','monthRange'
// selectDate	String / String[] / {start: String; end: String} / {start: String; end: String} []		In different selection modes, there are use different types. String type for select mode, String[] type for multi mode, {start: String; end: String} type for range mode, and {start: String; end: String} [] type for multiRange mode.
// monthRange	String[]		If you use monthRange mode, you need to set the content of the month to be displayed. for example [2021-1, 2021-2, 2021-6, 2021-9]
// remarks	Object		Create remark for a day, key is date string, and value is remark content. for example { '2021-1-13': 'some things' }
// tileContent	Object		Create tile content for a day, key is date string, and value is object, object have className and content. for example { '2021-1-5': { className: 'tip-class', content: 'some tip' } }
// holidays	Object		Custom holiday information, for example {'2021-1-1': 'New Year'}
// completion	Boolean	false	Complete the calendar table with 6 lines
// useSwipe	Boolean	true	The mobile terminal supports gesture sliding to switch calendar
// arrowLeft	String		Left arrow image url of toolbar
// arrowRight	String		Right arrow image url of toolbar
// monFirst	Boolean	false	The first day of the week begins on Monday
// backgroundText	Boolean	false	Displays the background text of the current month calendar
// language	String		use 'en' or 'cn' language
// format	(year, month) => [String, String]		Format the date display at the header. you need return a array, the contents of the array are year and month
// weeks	String[]		Weekly display content of custom header, for example ['S', 'M', 'T', 'W', 'T', 'F', 'S']
// begin	String		Set the available date of the start, and the date before it will be disabled, for example '2021-1-5'
// end	String		Set the available date of the end, and the date after it will be disabled, for example '2021-2-5'
// disabled	String[]		Disable certain dates, for example['2021-1-9', '2021-2-5']

const props = defineProps({
      title: {
		type: String,
		default: '',
      },
      selectMode: {
          type: String,
          default: 'select',
      },
      mode: {
          type: String,
          default: 'month',
      },
      selectDate: {
          type: [String, Array, Object],
          default: '',
      },
      monthRange: {
          type: Array,
          default: () => [],
      },
      remarks: {
          type: Object,
          default: () => {},
      },
      tileContent: {
          type: Object,
          default: () => {},
      },
      holidays: {
		  type: Object,
		  default: () => {},
		},
		completion: {
			type: Boolean,
			default: false,
		},
		useSwiper: {
			type: Boolean,
			default: true,
		},
		arrowLeft: {
			type: String,
			default: '',
		},
		arrowRight: {
			type: String,
			default: '',
		},
		monFirst: {
			type: Boolean,
			default: false,
		},
		language: {
			type: String,
			default: 'cn',
      },
      format: {
          type: Function,
          default: (year, month) => [year, month],
		},
		weeks: {
			type: Array,
			default: () => [],
		},
		begin: {
			type: String,
			default: '',
		},
		end: {
			type: String,
			default: '',
      },
      disabled: {
          type: Array,
          default: () => [],
      },
  })
  
  const emit = defineEmits([ 'abort','load','click','dblclick','focus','blur','keyup','keydown','keypress','mousedown','mousemove','mouseover','mouseout','mouseup','next','prev','setToday','onSelect','onMonthChange'])

</script>

<style scoped>
.calendar {
	width: 50%;
}
</style>
