<template>
	<view>
		<u-navbar bgColor="white" :title="$t('message')">
			<view class="u-nav-slot" slot="left"></view>
		</u-navbar>
		
		<view class="cu-bar justify-center">
			<u-icon name="arrow-left" size="28" @click="previousMonth"></u-icon>
			<text class="text-bold text-black"> {{ curDate }} </text>
			<u-icon name="arrow-right" size="28" @click="nextMonth"></u-icon>
		</view>
		<ren-calendar ref='ren' :markDays='markDays' headerBar @onDayClick='onDayClick'></ren-calendar>
		<view class="change">选中日期：{{curDate}}</view>
		
	</view>
</template>

<script>
	import RenCalendar from "../../components/ren-calendar/ren-calendar.vue"
	export default {
		components:{
			RenCalendar
		},
		data() {
			return {
				curDate:'',
				markDays:[]
			}
		},
		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.markDays.push(today);
		},
		methods: {
			onDayClick(data){
				this.curDate = data.date;
			},
			previousMonth() {
				
			},
			nextMonth() {
				
			}
		}
	}
</script>