<template>
  <div class="page-cell">
    <co-header fixed title="Calendar">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <!-- 自定义日历头部 -->
      <co-calendar id="calendar" ref="calendar" @changeMY="updateYM" @clickDate="testChangeClass">
        <div slot="header" class="co-calendar-header">
            <div class="coicon coicon-return" @click="reduceMonth()"></div>
            <div class="year-month">
                <div v-text="year + '年'+(month > 9 ? month : '0' + parseInt(month)) + '月'"></div>
            </div>
            <div class="coicon coicon-enter" @click="addMonth()"></div>
        </div>
      </co-calendar>
      <!-- 设置自定义年月 -->
      <co-calendar :singleSelect="true" ref="calendar1" @changeMY="updateYM1" :yearAndMonth="'2018-03'" @clickDate="selectDate"></co-calendar>
      <!-- 默认日历 -->
      <co-calendar></co-calendar>
    </div>
  </div>
</template>

<script type="es6">
  export default {
    data() {
      return {
        year: '',
        month: '',
        yearAndMonth: new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
      };
    },
    methods: {
      reduceMonth() {
        this.$refs.calendar.reduceMonth();
      },
      addMonth() {
        this.$refs.calendar.addMonth();
      },
      updateYM(year, month) {
        this.year = year;
        this.month = month;
      },
      updateYM1(year, month) {
        console.log(year, month);
      },
      selectDate(date) {
        // 选中日期与20180402之间的日期
        this.$refs.calendar1.handleClass({type: 'between', date: [date.year + '-' + date.month + '-' + date.day, '2018-04-02'], addClass: ['between'], removeClass: ['']});
      },
      testChangeClass(date) {
        this.$refs.calendar.handleClass({type: 'before', date: date.year + '-' + date.month + '-' + date.day, addClass: ['test'], removeClass: ''});
        this.$refs.calendar.handleClass({type: 'after', date: date.year + '-' + date.month + '-' + date.day, addClass: [], removeClass: ['test']});
      }
    }
  };
</script>

<style lang="less">
  /* 自定义日历头部 */
  #calendar{
    .year-month{
      line-height: 40px;
      div{
        height: 26px;
        line-height: 20px;
        padding: 0 10px;
        border-radius: 4px;
        margin: 9px 0px;
        font-size: 16px;
        color: #FF0000;
      }
    }
    /* 高亮日期 */
    li.test{
      color: #007eff;
    }
  }
  .co-calendar-month-day li.between{
    color: #007eff;
  }
</style>
