<template>
  <t-modal :visibled.sync="visibled" :title="title" :mask-closable="false" width="600px" class="shift-dialog">
    <t-form ref="form" :model="form" :label-span="3" :rules="ruleValidate" label-position="right">
      <t-form-item label="班次名称：" prop="title" required>
        <t-input v-model="form.title" style="width:300px"></t-input>
      </t-form-item>

      <t-table :resizable="false" :data="form.shifts" class="shift-dialog__table">
        <t-table-column v-slot="{ row, $index }" label="班组名称">
          <t-form-item :prop="`shifts.${$index}.label`" :rules="{ required: true, message: '', trigger: 'blur' }">
            <t-input v-model="row.label"></t-input>
          </t-form-item>
        </t-table-column>

        <t-table-column v-slot="{ row, $index }" label="考勤时段">
          <t-form-item :prop="`shifts.${$index}.endTime`" :rules="{ required: true, message: '', trigger: 'blur' }">
            <time-range-picker v-model="row" format="HH:mm" style="width: 100%" />
          </t-form-item>
        </t-table-column>

        <t-table-column v-slot="{ row, $index }" label="操作" width="80px">
          <a class="link" @click="handleDelete($index)">删除</a>
        </t-table-column>

        <div slot="empty">暂无数据</div>
        <div slot="append" class="shift-dialog__table-append">
          <a class="link" @click="handleAdd">+ 增加</a>
        </div>
      </t-table>
    </t-form>

    <div slot="footer">
      <t-button @click="visibled=false">取消</t-button>
      <t-button :loading="loadingSubmit" color="primary" @click="handleSubmit">保存</t-button>
    </div>
  </t-modal>
</template>

<script>
import TimeRangePicker from '@/components/TimeRangePicker'
import sysapi from '@/api/system'

const shiftTempl = {
  label: '',
  startTime: '',
  endTime: ''
}

export default {
  name: 'ShiftDialog',
  components: { TimeRangePicker },
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      visibled: false,
      form: {},
      loadingSubmit: false,
      ruleValidate: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ]

      }
    }
  },
  computed: {
    title () {
      return this.data.scheduleId == null ? '新增班次' : '编辑班次'
    }
  },
  watch: {
    data (val) {
      this.form = JSON.parse(JSON.stringify(val))
      // this.$refs['form'] && this.$refs['form'].resetFields()
      this.visibled = true
    }
  },
  methods: {
    handleDelete (index) {
      this.form.shifts.splice(index, 1)
    },
    handleAdd () {
      this.form.shifts.push(Object.assign({}, shiftTempl))
    },
    handleSubmit () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.shifts.length === 0) {
            this.$Message.warning('请至少保留一条班组信息')
            return
          }
          this.submitSchedule()
        }
      })
    },
    submitSchedule () {
      this.loadingSubmit = true
      sysapi.submitSchedule(this.form).then(resp => {
        if (resp.data.ScheduleId == null) {
          this.form.ScheduleId = resp.data.ScheduleId
        }
        this.$emit('submit', this.form)
        this.visibled = false
        this.$Message.success('提交成功')
      }, err => {
        console.log(err)
        this.$Message.danger('提交失败')
      }).finally(() => {
        this.loadingSubmit = false
      })
    }
  }
}
</script>

<style lang="scss">
.shift-dialog__table {
  border: 1px solid #e8e8e8;
  border-radius: 2px;
  td,
  th {
    height: 40px;
    font-weight: normal;
  }

  thead > tr > th {
    background-color: #fafafa;
    color: rgba(0, 0, 0, 0.65);
  }

  .form-group {
    margin: 0;
    .form-group__content {
      padding: 0;
    }
  }

  .table__empty-block {
    min-height: auto;
    border-bottom: 1px solid #e8e8e8;
  }

  &-append {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>