smsb-web-develop/src/components/Schedule/index.vue

<script>
import { getSchedule } from '@/api/calendar'
import ScheduleCalendar from './ScheduleCalendar'
import ScheduleSwiper from './ScheduleSwiper'

export default {
  name: 'Schedule',
  components: {
    ScheduleCalendar,
    ScheduleSwiper
  },
  props: {
    schedule: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      options: null
    }
  },
  watch: {
    schedule: {
      handler () {
        this.getSchedule()
      },
      immediate: true
    }
  },
  methods: {
    getSchedule () {
      const options = {
        loading: true,
        error: false,
        detail: null
      }
      this.options = options
      getSchedule(this.schedule).then(
        schedule => {
          options.detail = schedule
        },
        () => {
          options.error = true
        }
      ).finally(() => {
        options.loading = false
      })
    }
  },
  render (h) {
    if (this.options.loading) {
      return h('div', {
        directives: [
          {
            name: 'loading',
            value: true
          }
        ]
      })
    }

    if (this.options.error) {
      return h('Warning', {
        props: {
          error: true
        },
        on: {
          click: this.getSchedule
        }
      })
    }

    const { detail } = this.options
    return h([null, 'ScheduleSwiper', 'ScheduleCalendar'][detail.type - 1], {
      props: {
        detail,
        ...this.$attrs
      },
      on: this.$listeners
    })
  }
}
</script>