/**
* 参考 https://github.com/Wanderxx/vue-fullcalendar
*/
<template>
  <div class="comp-full-calendar">
    <!-- header pick month -->
    <tc-header :current-date="currentDate"
      :title-format="titleFormat"
      :first-day="firstDay"
      :month-names="monthNames"
      @change="emitChangeMonth">

      <div slot="header-left">
        <slot name="tc-header-left">
        </slot>
      </div>

      <div slot="header-right">
        <slot name="tc-header-right">
        </slot>
      </div>
    </tc-header>
    <!-- body display date day and events -->
    <tc-body :current-date="currentDate" :events="events" :month-names="monthNames"
      :week-names="weekNames" :first-day="firstDay"
      @eventclick="emitEventClick" @dayclick="emitDayClick"
      @moreclick="emitMoreClick">
      <div slot="body-card">
        <slot name="tc-body-card">
        </slot>
      </div>
    </tc-body>
  </div>
</template>
<script type="text/babel">
  export default {
    props: {
      events: { // events will be displayed on calendar
        type: Array,
        default: []
      },
      firstDay: {
        type: Number | String,
        validator (val) {
          let res = parseInt(val);
          return res >= 0 && res <= 6;
        },
        default: 0
      },
      titleFormat: {
        type: String,
        default () {
          return 'MMMM yyyy';
        }
      },
      monthNames: {
        type: Array,
        default () {
          return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        }
      },
      weekNames: {
        type: Array,
        default () {
          let arr = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
          return arr.slice(this.firstDay).concat(arr.slice(0, this.firstDay));
        }
      }
    },
    data () {
      return {
        currentDate: new Date()
      };
    },
    methods: {
      emitChangeMonth (start, end, currentStart, current) {
        this.currentDate = current;
        this.$emit('change-month', start, end, currentStart);
      },
      emitEventClick (event, jsEvent, pos) {
        this.$emit('event-click', event, jsEvent, pos);
      },
      emitDayClick (day, jsEvent) {
        this.$emit('day-click', day, jsEvent);
      },
      emitMoreClick (day, events, jsEvent) {
        this.$emit('more-click', day, event, jsEvent);
      }
    },
    components: {
      'tc-body': require('./body'),
      'tc-header': require('./header')
    }
  };

</script>
<style>
  .comp-full-calendar {
    padding: 20px;
    background: #fff;
    max-width: 960px;
    margin: 0 auto;
  }
  .comp-full-calendar ul, .comp-full-calendar p {
    margin: 0;
    padding: 0;
    font-size: 14px;
  }
</style>