<template>
  <div class="comp-full-calendar">
    <!-- header pick month -->
    <fc-header
      :current-date="currentDate"
      :title-format="titleFormat"
      :first-day="firstDay"
      :month-names="monthNames"
      :show-type-mode="showTypeMode"
      @change="emitChangeMonth"
    >
      <div slot="header-left">
        <slot name="fc-header-left"> </slot>
      </div>

      <div slot="header-right">
        <slot name="fc-header-right"> </slot>
      </div>
    </fc-header>
    <!-- body display date day and events -->
    <mom-table
      v-if="showTypeMode === 'S'"
      :table-data="tableData"
      :table-total="tableTotal"
      :table-page="tablePage"
      @changeTable="changeTable"
      @preview="handlePreview"
    ></mom-table>
    <month-body
      v-else-if="showTypeMode === 'M'"
      :current-date="currentDate"
      :events="events"
      :loading="loading"
      :month-names="monthNames"
      :week-names="weekNames"
      :first-day="firstDay"
      @eventclick="emitEventClick"
      @dayclick="emitDayClick"
      @moreclick="emitMoreClick"
      @morescroll="emitMoreScroll"
    ></month-body>
    <fc-body
      v-else
      :current-date="currentDate"
      :events="events"
      :loading="loading"
      :month-names="monthNames"
      :week-names="weekNames"
      :first-day="firstDay"
      :show-type-mode="showTypeMode"
      @eventclick="emitEventClick"
      @dayclick="emitDayClick"
      @moreclick="emitMoreClick"
      @morescroll="emitMoreScroll"
    >
      <div slot="body-card">
        <slot name="fc-body-card"> </slot>
      </div>
    </fc-body>
  </div>
</template>
<script type="text/babel">
/* eslint-disable */
import header from "./components/header.vue";
import body from "./components/body.vue";
import MonthBody from "./components/monthBody";
import MomTable from "./components/momTable.vue";
import langSets from "./dataMap/langSets";

export default {
  components: {
    "fc-body": body,
    "fc-header": header,
    MonthBody,
    MomTable,
  },
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    events: {
      // events will be displayed on calendar
      type: Array,
      default: () => {
        return [];
      },
    },
    lang: {
      type: String,
      default: "en",
    },
    firstDay: {
      type: Number | String,
      validator(val) {
        let res = parseInt(val);
        return res >= 0 && res <= 6;
      },
      default: 0,
    },
    titleFormat: {
      type: String,
      default() {
        return langSets[this.lang].titleFormat;
      },
    },
    monthNames: {
      type: Array,
      default() {
        return langSets[this.lang].monthNames;
      },
    },
    weekNames: {
      type: Array,
      default() {
        let arr = langSets[this.lang].weekNames;
        return arr.slice(this.firstDay).concat(arr.slice(0, this.firstDay));
      },
    },
    showTypeMode: {
      type: String,
      default: "D", // 显示模式
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    tableTotal: {
      type: Number,
      default: 0,
    },
    tablePage: {
      type: Number,
      default: 1,
    }
  },
  data() {
    return {
      currentDate: new Date(),
    };
  },
  methods: {
    emitChangeMonth(start, end, currentStart, current) {
      this.currentDate = current;
      this.$emit("changeMonth", start, end, currentStart);
    },
    emitEventClick(event, jsEvent, pos) {
      this.$emit("eventClick", event, jsEvent, pos);
    },
    emitDayClick(day, jsEvent) {
      this.$emit("dayClick", day, jsEvent);
    },
    emitMoreClick(day, events, jsEvent) {
      this.$emit("moreClick", day, events, jsEvent);
    },
    emitMoreScroll(selectDay, page) {
      this.$emit("moreScroll", selectDay, page);
    },
    // 点击表格行内的预览
    handlePreview(row) {
      this.$emit("preview", row);
    },
    changeTable(page) {
      this.$emit("changeTable", page);
    }
  },
};
/* ensable */
</script>
<style lang="scss">
.comp-full-calendar {
  // font-family: "elvetica neue", tahoma, "hiragino sans gb";
  padding: 0;
  background: #fff;
  // max-width: 960px;
  margin: 0 auto;
  ul,
  p {
    margin: 0;
    padding: 0;
    font-size: 14px;
  }
}
</style>