<template>
  <div class="l-flex--col c-month-calendar">
    <div class="l-flex__none l-flex c-month-calendar__header has-border">
      <div class="l-flex__auto u-readonly">周日</div>
      <div class="l-flex__auto u-readonly">周一</div>
      <div class="l-flex__auto u-readonly">周二</div>
      <div class="l-flex__auto u-readonly">周三</div>
      <div class="l-flex__auto u-readonly">周四</div>
      <div class="l-flex__auto u-readonly">周五</div>
      <div class="l-flex__auto u-readonly">周六</div>
    </div>
    <div class="c-month-calendar__content has-border">
      <div
        v-for="(week, weekIndex) in weeks"
        :key="weekIndex"
        class="l-flex c-month-calendar__row"
      >
        <div
          v-for="(day, dayIndex) in week"
          :key="dayIndex"
          class="c-month-calendar__col day c-day-card"
          :class="day.status"
          @click="switchTo(day)"
          @dblclick="onAdd(day)"
        >
          <span class="c-day-card__day">{{ day.value }}</span>
          <div
            v-if="day.events.length"
            class="l-flex--row"
          >
            <event-item
              class="c-day-card__program"
              :event="day.events[0]"
              :editable="editable"
              @edit="$listeners.edit"
              @remove="$listeners.remove"
            />
          </div>
          <pop-list
            v-if="day.events.length > 1"
            class="l-flex__auto"
            :events="day.events"
            :editable="editable"
            @edit="$listeners.edit"
            @remove="$listeners.remove"
          >
            <div class="c-day-card__count u-ellipsis u-pointer">
              +{{ day.events.length - 1 }}
            </div>
          </pop-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { EventFreq } from '@/constant'
import { toDateStr } from '@/utils/event'
import EventItem from './EventItem'
import PopList from './PopList'

export default {
  name: 'ScheduleCalendarMonth',
  components: {
    EventItem,
    PopList
  },
  props: {
    editable: {
      type: [Boolean, String],
      default: false
    },
    weeks: {
      type: Array,
      default: null
    }
  },
  methods: {
    onAdd (day) {
      if (day.status === 'enabled') {
        this.$emit('add', {
          freq: EventFreq.ONCE,
          start: `${toDateStr(day.date)} 00:00:00`,
          until: `${toDateStr(day.date, 1)} 00:00:00`
        })
      }
    },
    switchTo (day) {
      if (day.status === 'disabled') {
        this.$emit('switch', day.date)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.c-month-calendar {
  color: $black;
  font-size: 16px;

  &__header {
    padding: 10px 0;
    font-weight: bold;
    text-align: center;
  }

  &__content {
    min-height: 0;
    border-top: none;
    overflow-y: auto;
  }

  &__row + &__row {
    border-top: 1px solid $info;
  }

  &__col {
    flex: 1 1 0;
    display: flex;
    min-width: 0;
    height: 108px;
    user-select: none;

    &.disabled {
      color: $gray;
    }

    &.invalid {
      background-color: lighten($gray--light, 4%);
      cursor: not-allowed;
    }

    &.day.enabled {
      cursor: pointer;

      &:hover {
        transition: background-color 0.4s;
        background-color: #f2f8fe;
      }
    }

    & + & {
      border-left: 1px solid $info;
    }
  }
}

.c-day-card {
  display: inline-flex;
  flex-direction: column;
  padding: 10px 10px 0;
  font-size: 14px;
  line-height: 1;
  text-align: left;

  &__day {
    align-self: flex-end;
    font-size: 16px;
  }

  &__program {
    max-width: 100%;
    margin-top: 8px;
  }

  &__count {
    align-self: flex-start;
    display: inline-block;
    padding: 6px 10px;
    margin-top: 10px;
    color: #fff;
    font-weight: bold;
    border-radius: $radius--mini;
    background-color: #fb8885;
  }
}
</style>
