<template>
  <div class="request-page">
    <el-card class="form-card" shadow="never">
      <div slot="header" class="card-header">
        <span>请假申请</span>
        <div class="actions">
          <el-button size="mini" icon="el-icon-arrow-left" @click="$router.back()">返回</el-button>
        </div>
      </div>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="110px" size="small">
        <el-form-item label="申请人" prop="empId">
          <el-select
            v-model="form.empId"
            filterable
            clearable
            placeholder="选择申请人"
            style="width: 100%"
          >
            <el-option
              v-for="emp in employees"
              :key="emp.empId"
              :label="emp.empName || emp.empNo || emp.empId"
              :value="emp.empId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="请假类型" prop="leaveType">
          <el-input v-model="form.leaveType" placeholder="年假/事假/病假等" />
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker v-model="form.startTime" type="datetime" placeholder="请选择开始时间" style="width: 100%" />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker v-model="form.endTime" type="datetime" placeholder="请选择结束时间" style="width: 100%" />
        </el-form-item>
        <el-form-item label="时长(小时)" prop="hours">
          <el-input-number v-model="form.hours" :min="0.5" :step="0.5" style="width: 180px" />
        </el-form-item>
        <el-form-item label="事由" prop="reason">
          <el-input v-model="form.reason" type="textarea" :rows="3" placeholder="请填写请假事由" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="可选" />
        </el-form-item>
        <div class="form-actions">
          <el-button @click="$router.back()">取消</el-button>
          <el-button type="primary" :loading="submitting" @click="submit">提交申请</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { listEmployee, addLeaveReq } from '@/api/hrm'

export default {
  name: 'HrmLeaveRequest',
  data() {
    return {
      employees: [],
      submitting: false,
      form: {
        empId: '',
        leaveType: '',
        startTime: '',
        endTime: '',
        hours: 0,
        reason: '',
        remark: ''
      },
      rules: {
        empId: [{ required: true, message: '请选择申请人', trigger: 'change' }],
        leaveType: [{ required: true, message: '请输入请假类型', trigger: 'blur' }],
        startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
        hours: [{ required: true, message: '请输入时长', trigger: 'blur' }],
        reason: [{ required: true, message: '请输入事由', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.loadEmployees()
    const userId = this.$store?.state?.user?.userId
    if (userId) this.form.empId = userId
  },
  methods: {
    loadEmployees() {
      listEmployee({ pageNum: 1, pageSize: 500 }).then(res => {
        this.employees = res.rows || res.data || []
      })
    },
    submit() {
      this.$refs.formRef.validate(valid => {
        if (!valid) return
        this.submitting = true
        const payload = { ...this.form }
        addLeaveReq(payload)
          .then(() => {
            this.$message.success('提交成功')
            this.$router.push('/hrm/requests')
          })
          .finally(() => {
            this.submitting = false
          })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.request-page {
  padding: 16px 20px 32px;
  background: #f8f9fb;
}
.form-card {
  max-width: 720px;
  margin: 0 auto;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.actions {
  display: flex;
  gap: 8px;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}
</style>
