<template>
  <div>
    <t-loading v-model="loading" />
    <t-button color="primary" style="margin-bottom:30px;" @click="handleCreate">
      <t-icon icon="plus-circle-outline" size="16"></t-icon> 新增
    </t-button>
    <div class="schedule-card-block">
      <schedule-card v-for="item in schedules" :key="item.scheduleId" :data="item" @edit="handleEdit" @deleted="flushPage()" />
      <div v-if="!loading && schedules.length === 0" class="schedule-card-block__empty">点击 “新增” 按钮增加班次</div>
    </div>
    <shift-dialog :data="dialogData" @submit="flushPage()" />
  </div>
</template>

<script>
import ScheduleCard from './Card'
import ShiftDialog from './ShiftDialog'
import sysapi from '@/api/system'
export default {
  components: { ScheduleCard, ShiftDialog },
  inject: ['reload'],
  data () {
    return {
      schedules: [],
      dialogData: {},
      loading: true
    }
  },
  mounted () {
    this.getSchedules()
  },
  methods: {
    flushPage () {
      this.getSchedules()
      this.reload()
    },
    getSchedules () {
      this.loading = true
      sysapi.getSchedules().then((resp) => {
        this.schedules = resp.data || []
      }).finally(() => {
        this.loading = false
      })
    },
    handleEdit (item) {
      this.dialogData = Object.assign({}, item)
    },
    handleCreate () {
      this.dialogData = {
        title: '',
        shifts: []
      }
    }
    // handleDeleted (index) {
    //   this.schedules.splice(index, 1)
    // },
    // handleScheduleSubmit (data) {
    //   if (this.dialogData.scheduleId != null) {
    //     const target = this.schedules.find(item => item.scheduleId === this.dialogData.scheduleId)
    //     Object.assign(target, data)
    //   } else {
    //     this.schedules.unshift(data)
    //   }
    // }
  }
}
</script>

<style lang="scss">
.schedule-card-block {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  margin: -12px;
  min-height: 268px;

  &__empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>