<template>
  <view class="calendar">
    <XinCalendar
      ref="calendar"
      :showHeader="true"
      v-model="date"
      :dots="dots || []"
			:festival="false"
			:lunar="false"
      :appointments="appointmentData"
      @changeDate="changeSearchDate"
      @monthChange="calendarMonthChange($event)"
      @change="calendarChange($event)"
    />
  </view>
</template>

<script>
import XinCalendar from '@/components/xin-calendar/xin-calendar.vue'
import moment from 'moment'
// import { getCacheWithExpiry } from "../../util/common"

export default {
  name: "calendar",
  props: {
    departid: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dots: [],
      date: '',
      appointmentData: {},
      searchDate:{},
      activeDay: moment().format('YYYY-MM-DD'),
    }
  },
	components: { XinCalendar },
  watch: {
    // async departid (n, o) {
    //   await this.getMonthAppointments()
    //   this.$refs.calendar.changeHosipital()
    // }
  },
  async created() {
    // var cachaDate = this.$func.getStorageByToday(this.storeKeyDepartInfo)
    // if(cachaDate) {
    //   cachaDate = JSON.parse(cachaDate)
    //   if(cachaDate && cachaDate.chooseDate) {
    //     this.date = cachaDate.chooseDate
    //   }
    // }
    // if(!this.date) this.date = this.formatDate(new Date())
    // await this.getMonthAppointments()
  },
  methods: {
    // 日历月份改变事件
    async calendarMonthChange(e) {
      await this.getMonthAppointments()
    },
    // 日期选择改变事件
    calendarChange(e) {
      this.$emit('getDate', e)
    },
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    changeSearchDate(date){
      this.searchDate = {...date}
      this.getMonthAppointments()
    },
    // 获取月度区间预约数据
    async getMonthAppointments() {
      this.$http.req('/api/get_date_profits', {
          ...this.searchDate
        }, 'POST').then(data => {
            if (data == -1) return
            this.appointmentData = data;
        }).catch(res => {
        });
    }
  }
}
</script>
<style lang="scss" scoped>
.calendar{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: #F8F6F9;
    padding: 44rpx 18rpx;
}
</style>
