<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="regularForm" label-width="180px">
      <el-divider content-position="left">工作日设置</el-divider>
      <el-row>
        <el-col :offset="2" style="margin-top: 5px;margin-bottom: 5px">
          <el-form-item prop="workDayArr">
            <el-checkbox-group v-model="regularForm.workDayArr" size="medium">
              <el-checkbox-button v-for="week in weeks" :label="week.value" :key="week.value" :value="week.value">{{ week.label }}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left" >考勤时间设置</el-divider>
      <el-row>
        <el-col :offset="2" style="margin-top: 5px;">
          <el-col :span="6">
            <el-form-item label="上班时间" prop="workTimeBegin">
              <el-time-picker
                v-model="regularForm.workTimeBegin"
                :picker-options="{selectableRange:`00:00:00 - ${(regularForm.breakTimeBegin ? regularForm.breakTimeBegin : regularForm.workTimeEnd) ? (regularForm.breakTimeBegin ? regularForm.breakTimeBegin : regularForm.workTimeEnd) + ':00' : '23:59:00'}`}"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="上班时间"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="下班时间" prop="workTimeEnd">
              <el-time-picker
                v-model="regularForm.workTimeEnd"
                :picker-options="{selectableRange: `${(regularForm.breakTimeEnd ? regularForm.breakTimeEnd : regularForm.workTimeBegin) ? (regularForm.breakTimeEnd ? regularForm.breakTimeEnd : regularForm.workTimeBegin) +':00' : '00:00:00'}-23:59:00`}"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="下班时间"/>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="2" style="margin-bottom: 5px">
          <el-col :span="6">
            <el-form-item label="休息开始时间" prop="breakTimeBegin">
              <el-time-picker
                v-model="regularForm.breakTimeBegin"
                :picker-options="{selectableRange:`${regularForm.workTimeBegin ? regularForm.workTimeBegin+':00' : '00:00:00'} -${regularForm.breakTimeEnd ? regularForm.breakTimeEnd+':00' : '23:59:00'}`}"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="休息开始时间"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="休息结束时间" prop="breakTimeEnd">
              <el-time-picker
                v-model="regularForm.breakTimeEnd"
                :picker-options="{selectableRange:`${regularForm.breakTimeBegin ? regularForm.breakTimeBegin+':00' : '00:00:00'} -${regularForm.workTimeEnd ? regularForm.workTimeEnd +':00' : '23:59:00'}`}"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="休息结束时间"/>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
      <el-divider content-position="left">迟到规则设置</el-divider>
      <el-row>
        <el-col :span="6" :offset="2" style="margin-top: 5px;">
          <el-form-item label="迟到宽容时长（分钟）" prop="delayBegin1">
            <el-input v-model.number.trim="regularForm.delayBegin1" type="number" placeholder="必填"/>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="margin-top: 15px;margin-left: 30px"><span> 说明：晚到时长在此时间范围之内不视为迟到</span></el-col>
      </el-row>
      <el-row>
        <el-col :span="6" :offset="2">
          <el-form-item label="严重迟到时长（分钟）" prop="delayBegin2">
            <el-input v-model.number.trim="regularForm.delayBegin2" type="number" placeholder="必填"/>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="margin-top: 12px;margin-left: 30px"><span> 说明：晚到时长超过此时间范围则将视为旷工</span></el-col>
      </el-row>
      <el-row>
        <el-col :offset="8" style="margin-top: 20px;">
          <el-button type="primary" size="medium" @click="cancel">放弃修改</el-button>
          <el-button type="primary" size="medium" @click="save">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getRegular, updateRegular } from '@/api/attendance'

export default {
  name: 'Regular',
  data() {
    return {
      weeks: [{ label: '星期一', value: '1' }, { label: '星期二', value: '2' }, { label: '星期三', value: '3' }, { label: '星期四', value: '4' }, { label: '星期五', value: '5' }, { label: '星期六', value: '6' }, { label: '星期日', value: '7' }],
      // weeks: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
      regularForm: {
        workDayArr: [],
        workDay: '',
        workTimeBegin: '',
        workTimeEnd: '',
        breakTimeBegin: '',
        breakTimeEnd: '',
        delayBegin1: '',
        delayBegin2: ''
      },
      rules: {
        workDayArr: [{ required: true, type: 'array', min: 1, message: '请选择工作日', trigger: ['blur', 'change'] }],
        workTimeBegin: [{ type: 'string', required: true, message: '上班时间必填', trigger: ['blur', 'change'] }],
        workTimeEnd: [{ type: 'string', required: true, message: '下班时间必填', trigger: ['blur', 'change'] }],
        breakTimeBegin: [{ required: true, message: '休息开始时间必填', trigger: ['blur', 'change'] }],
        breakTimeEnd: [{ required: true, message: '休息结束时间必填', trigger: ['blur', 'change'] }],
        delayBegin1: [{ type: 'number', required: true, message: '迟到宽容时长必填', trigger: 'blur' }],
        delayBegin2: [{ type: 'number', required: true, message: '严重迟到时长必填', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.fetchData()// 获取数据
  },
  methods: {
    // 保存
    save() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 处理工作日数据，转换为字符串
          this.regularForm.workDay = this.regularForm.workDayArr.join(',')
          updateRegular(this.regularForm).then(response => {
          })
        }
      })
    },
    // 获取数据
    fetchData() {
      getRegular().then(response => {
        // 处理工作日数据，转换为数组
        this.regularForm.workDayArr = response.data.workDay.split(',')
      })
    },
    // 放弃修改
    cancel() {
      // 清除验证
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>