<template>
  <div class="layout-main">
    <router-view />
    <employee-schedule-dialog
      :visible="scheduleVisible"
      :open-mode="scheduleDialogMode"
      @update:visible="scheduleVisible = $event"
    />
  </div>
</template>

<script>
import EmployeeScheduleDialog from '@/components/EmployeeScheduleDialog.vue'

export default {
  name: 'Layout',
  components: { EmployeeScheduleDialog },
  computed: {
    scheduleVisible: {
      get() {
        return this.$store.state.scheduleDialogVisible
      },
      set(val) {
        this.$store.commit('SET_SCHEDULE_DIALOG', val)
      }
    },
    scheduleDialogMode() {
      return this.$store.state.scheduleDialogMode
    }
  }
}
</script>

<style lang="scss" scoped>
.layout-main {
  height: 100vh;
  overflow: hidden;
}
</style>
