<template>
  <vue-cal
    ref="cal"
    :locale="$attrs.locale || 'zh-cn'"
    :dblclick-to-navigate="$attrs.dblclickToNavigate || false"
    v-bind="$attrs"
    :transitions="!isIE"
    v-on="$listeners"
  >
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </vue-cal>
</template>

<script>
// 直接包装 vue-cal
import VueCal from 'vue-cal'
import 'vue-cal/dist/vuecal.css'
import 'vue-cal/dist/i18n/zh-cn.js'

// 包裹VueCal所有公开API
function getMethods() {
  const ret = {}
  const methods = ['switchView', 'previous', 'next', 'createEvent', 'updateSelectedDate']
  methods.forEach((method) => {
    ret[method] = function(...args) {
      return this.$refs.cal[method](...args)
    }
  })
  return ret
}

/**
 * <p>vue-cal的包装，适配了当前主题</p>
 * <p>具体用法请参考：https://antoniandre.github.io/vue-cal/</p>
 * @displayName SdCalendar 日历
 */
export default {
  name: 'SdCalendar',
  components: { 'vue-cal': VueCal },
  inheritAttrs: false,
  data() {
    return {
      // IE下启用动画存在布局问题
      isIE: navigator.userAgent.includes('Trident/'),
    }
  },
  methods: getMethods(),
}
</script>

<style lang="scss">
/* stylelint-disable  */
@use '@/common/design' as *;
.vuecal {
  width: 100%;
}
.vuecal__menu,
.vuecal__cell-events-count {
  color: $text-color-inverse;
  background-color: $primary-color;
}
.vuecal__title-bar {
  background-color: $primary-1;
}
.vuecal__cell--today,
.vuecal__cell--current {
  background-color: rgba(240, 240, 255, 0.4);
}
.vuecal:not(.vuecal--day-view) .vuecal__cell--selected,
.vuecal:not(.vuecal--day-view) .vuecal__cell:hover {
  background-color: rgba($primary-2, 0.3);
}

.vuecal:not(.vuecal--day-view) .vuecal__cell--selected {
  color: $primary-color;
}

.vuecal__cell--selected::before {
  border-color: rgba($primary-7, 0.5);
}

/* Cells and buttons get highlighted when an event is dragged over it. */
.vuecal__cell--highlighted:not(.vuecal__cell--has-splits),
.vuecal__cell-split--highlighted {
  background-color: rgba($primary-3, 0.5);
}
.vuecal__arrow.vuecal__arrow--highlighted,
.vuecal__view-btn.vuecal__view-btn--highlighted {
  background-color: rgba($primary-4, 0.5);
}

.vuecal__event {
  background-color: lighten($primary-2, 0.1);
  border: 1px solid $primary-3;
}

.vuecal__event:not(.vuecal__event--multiple-days) {
  width: 96%;
  margin-left: 2%;
}

.vuecal__event--multiple-days.event-start {
  margin-left: 2%;
  width: 98%;
  border-right: none;
}
.vuecal__event--multiple-days.event-end {
  border-left: none;
  width: 98%;
}

.vuecal__event--multiple-days.event-middle {
  border-left: none;
  border-right: none;
}

.vuecal--events-on-month-view.vuecal--month-view .vuecal__cell-content {
  justify-content: flex-start;
  height: 100%;
  align-items: flex-end;
}

.vuecal--events-on-month-view.vuecal--month-view .vuecal__cell-date {
  padding: 3px 4px;
}
</style>

<docs>
```vue
<template>
  <sd-calendar
    :time-from="8 * 60"
    :time-to="19 * 60"
    :time-step="60"
    hide-weekends
    events-on-month-view="short"
    :events="events"
    :disable-views="['years', 'year']"
  />
</template>

<script>
import moment from 'moment'

export default {
  data() {
    const today = moment().format('YYYY-MM-DD')
    const tomorrow = moment()
      .add(1, 'days')
      .format('YYYY-MM-DD')
    return {
      events: [
        {
          start: today + ' 09:30',
          end: today + ' 12:00',
          title: '部门例会',
        },
        {
          start: today + ' 14:00',
          end: today + ' 17:30',
          title: '面试',
        },
        {
          start: tomorrow + ' 11:00',
          end: tomorrow + ' 15:30',
          title: '公司司庆',
        },
      ],
    };
  },
}
</script>
```
</docs>
