<template>
  <div id="app">
    <WCalendar
      class="calendar"
      :Month="monthValue"
      :is-multiple-choice="false"
      :pointMap="pointMap"
      
      @chooseDays="chooseDays"
    >
      <template v-slot:left>
        <el-date-picker
          v-model="monthValue"
          type="month"
          format="yyyy-MM"
          value-format="yyyy-MM"
          placeholder="选择月份"
        >
        </el-date-picker>
      </template>
    </WCalendar>
  </div>
</template>
<script>
import Vue from "vue";
import WCalendar from "wqcalendar";
import "wqcalendar/dist/wqcalendar.css";
Vue.use(WCalendar);
export default {
  data() {
    /**
     * 获取当天时间
     * @returns {string}
     */
    function getCurDay(num = 0) {
      var datetime = new Date();
      var year = datetime.getFullYear();
      var month =
        datetime.getMonth() + 1 < 10
          ? "0" + (datetime.getMonth() + 1)
          : datetime.getMonth() + 1;
      let day = datetime.getDate();
      if (day + num > 0) {
        day =
          day + num < 10
            ? "0" + (datetime.getDate() + num)
            : datetime.getDate() + num;
      } else {
        day =
          day - num < 10
            ? "0" + (datetime.getDate() - num)
            : datetime.getDate() - num;
      }
      return `${year}-${month}-${day}`;
    }
    return {
      monthValue: "",
      pointMap: { [new Date(getCurDay()).getTime()]: true },
      restrictDate: { 4: [getCurDay(), getCurDay(+10)] },
    };
  },
  methods: {
    chooseDays(list) {
      console.log(list);
    },
  },
};
</script>
