<template>
  <el-dialog
    :visible.sync="isPreviewing"
    custom-class="c-dialog--preview"
    :before-close="onCloseDialog"
    :close-on-click-modal="false"
    append-to-body
    v-on="$attrs"
    @closed="onClosed"
  >
    <schedule
      v-if="scheduleId"
      class="l-flex__auto has-padding"
      :schedule="scheduleId"
    />
    <i
      class="l-flex__none c-dialog--preview__close el-icon-close has-active u-bold u-pointer"
      @click="onCloseDialog"
    />
  </el-dialog>
</template>

<script>
export default {
  name: 'ScheduleDialog',
  inheritAttrs: false,
  data () {
    return {
      scheduleId: null,
      isPreviewing: false
    }
  },
  methods: {
    show (id) {
      this.scheduleId = id
      this.isPreviewing = true
    },
    onCloseDialog () {
      this.isPreviewing = false
    },
    onClosed () {
      this.scheduleId = null
    }
  }
}
</script>
