<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <BreadcrumbBack />
      <span class="breadcrumb-title">新增劳防用品</span>
    </header>
    <main class="safety-platform-container__main">
      <el-form
        ref="formRef"
        :model="form"
        :rules="formRules"
        label-width="120px"
        class="ppe-form"
      >
        <el-form-item label="作业(岗位)分类" prop="jobPost">
          <el-input v-model="form.jobPost" placeholder="请输入作业(岗位)分类" clearable />
        </el-form-item>
        <el-form-item label="物品分类" prop="ppeCategory">
          <el-input v-model="form.ppeCategory" placeholder="请输入物品分类" clearable />
        </el-form-item>
        <el-form-item label="物品名称" prop="ppeName">
          <el-input v-model="form.ppeName" placeholder="请输入物品名称" clearable />
        </el-form-item>
        <el-form-item label="使用期限(月)" prop="serviceMonths">
          <el-input-number
            v-model="form.serviceMonths"
            :min="1"
            :max="9999"
            :precision="0"
            placeholder="1-9999"
            controls-position="right"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="用品状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :value="true">启用</el-radio>
            <el-radio :value="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入备注"
            :rows="3"
            clearable
          />
        </el-form-item>
      </el-form>
    </main>
    <footer class="safety-platform-container__footer">
      <el-button @click="router.back()">返回</el-button>
      <el-button type="primary" :loading="submitting" @click="handleSubmit">提交</el-button>
    </footer>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
  import BreadcrumbBack from '@/components/BreadcrumbBack.vue';
  import { savePersonalProtectiveEquipment } from '@/api/production-safety/personal-protective-equipment';

  const router = useRouter();
  const formRef = ref<FormInstance>();
  const submitting = ref(false);

  const form = reactive({
    jobPost: '',
    ppeCategory: '',
    ppeName: '',
    serviceMonths: undefined as number | undefined, // 1-9999 整数
    status: true, // true-启用，false-禁用，默认启用
    remark: '',
  });

  const formRules: FormRules = {
    jobPost:[{ required: true, message: '请输入作业(岗位)分类', trigger: 'blur' }],
    ppeCategory: [{ required: true, message: '请输入物品分类', trigger: 'blur' }],
    ppeName:[{ required: true, message: '请输入物品名称', trigger: 'blur' }],
    serviceMonths: [{ required: true, message: '请输入使用期限', trigger: 'blur' }],
    status: [{ required: true, message: '请输入用品状态', trigger: 'change' }],
    remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
  };

  const handleSubmit = async () => {
    const valid = await formRef.value?.validate().then(() => true).catch(() => false);
    if (!valid) return;
    submitting.value = true;
    try {
      await savePersonalProtectiveEquipment({
        jobPost: form.jobPost || undefined,
        ppeCategory: form.ppeCategory || undefined,
        ppeName: form.ppeName || undefined,
        serviceMonths: form.serviceMonths != null ? String(form.serviceMonths) : undefined,
        status: form.status,
        remark: form.remark || undefined,
      });
      ElMessage.success('新增成功');
      router.back();
    } catch (e) {
      console.error('新增劳防用品失败:', e);
      ElMessage.error('新增失败，请重试');
    } finally {
      submitting.value = false;
    }
  };
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;

  .safety-platform-container__header {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .ppe-form {
    max-width: 600px;
  }
</style>
