<template>
  <el-dialog :title="dialogTitle" :visible.sync="visible" width="640px" append-to-body :close-on-click-modal="false"
    @close="handleClose">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="150px" size="small">
      <el-form-item label="分组名称" prop="groupName">
        <el-input v-model.trim="form.groupName" maxlength="100" show-word-limit placeholder="例如：职能应休组" />
      </el-form-item>
      <el-form-item label="月应休天数" prop="monthlyRestDays">
        <el-input-number v-model="form.monthlyRestDays" :min="0" :precision="0" controls-position="right"
          style="width: 100%" />
      </el-form-item>
      <el-form-item label="可拆分半天休假天数" prop="halfDaySplitRestDays">
        <el-input-number v-model="form.halfDaySplitRestDays" :min="0" :precision="0" :step="1" controls-position="right"
          style="width: 100%" />
        <div class="form-hint">整数：本月允许拆成半天休的最大天数；不能超过月应休天数。</div>
      </el-form-item>
      <el-form-item label="应休解锁规则">
        <el-switch :value="form.restUnlockCycle > 0" style="margin-right: 8px" @change="handleRestUnlockToggle" />
        <template v-if="form.restUnlockCycle > 0">
          <span class="inline-hint">每上满</span>
          <el-input-number v-model="form.restUnlockCycle" :min="1" :max="365" :precision="0" controls-position="right"
            style="width: 100px; margin: 0 6px" />
          <span class="inline-hint">天，解锁 1 天应休</span>
        </template>
        <span v-else class="inline-hint muted">不启用</span>
      </el-form-item>
      <el-form-item label="是否启用" prop="isEnabled">
        <el-switch v-model="form.isEnabled" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model.trim="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="无" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { saveAttendanceRestGroup } from '@/api/extend/attendanceRestGroup'

function defaultForm() {
  return {
    id: '',
    groupName: '',
    monthlyRestDays: 4,
    halfDaySplitRestDays: 0,
    restUnlockCycle: 0,
    isEnabled: 1,
    remark: ''
  }
}

export default {
  name: 'AttendanceRestGroupDialog',
  data() {
    const halfDaySplitRestDaysValidator = (rule, value, callback) => {
      const n = Number(value || 0)
      if (n < 0) {
        callback(new Error('不能小于0'))
        return
      }
      if (n !== Math.floor(n)) {
        callback(new Error('只能填写整数'))
        return
      }
      if (n > Number(this.form.monthlyRestDays || 0)) {
        callback(new Error('不能大于月应休天数'))
        return
      }
      callback()
    }
    return {
      visible: false,
      submitLoading: false,
      mode: 'create',
      dialogTitle: '应休分组',
      form: defaultForm(),
      rules: {
        groupName: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
        monthlyRestDays: [{ required: true, message: '请输入月应休天数', trigger: 'blur' }],
        halfDaySplitRestDays: [{ validator: halfDaySplitRestDaysValidator, trigger: 'blur' }]
      }
    }
  },
  methods: {
    open(row) {
      this.visible = true
      this.mode = row && row.id ? 'edit' : 'create'
      this.dialogTitle = this.mode === 'edit' ? '编辑应休分组' : '新增应休分组'
      this.form = {
        ...defaultForm(),
        ...(row && row.id ? { ...row } : {})
      }
      this.$nextTick(() => {
        this.$refs.formRef && this.$refs.formRef.clearValidate()
      })
    },
    handleRestUnlockToggle(enabled) {
      this.form.restUnlockCycle = enabled ? 7 : 0
    },
    handleClose() {
      this.form = defaultForm()
    },
    handleSubmit() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        this.submitLoading = true
        try {
          const payload = {
            id: this.form.id || undefined,
            groupName: this.form.groupName,
            monthlyRestDays: Number(this.form.monthlyRestDays || 0),
            halfDaySplitRestDays: Number(this.form.halfDaySplitRestDays || 0),
            restUnlockCycle: Math.max(0, Number(this.form.restUnlockCycle || 0)),
            isEnabled: this.form.isEnabled != null ? Number(this.form.isEnabled) : 1,
            remark: this.form.remark || null
          }
          await saveAttendanceRestGroup(payload)
          this.$message.success('保存成功')
          this.visible = false
          this.$emit('saved')
        } finally {
          this.submitLoading = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-hint {
  margin-top: 6px;
  color: #909399;
  font-size: 12px;
  line-height: 1.6;
}

.inline-hint {
  color: #606266;
  font-size: 13px;
}

.inline-hint.muted {
  color: #909399;
}
</style>
