<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 v-loading="loading" :model="form" label-width="120px" class="ppe-form">
        <el-form-item label="作业(岗位)分类" prop="jobPost">
          <el-input v-model="form.jobPost" disabled />
        </el-form-item>
        <el-form-item label="物品分类" prop="ppeCategory">
          <el-input v-model="form.ppeCategory" disabled />
        </el-form-item>
        <el-form-item label="物品名称" prop="ppeName">
          <el-input v-model="form.ppeName" disabled />
        </el-form-item>
        <el-form-item label="使用期限(月)" prop="serviceMonths">
          <el-input-number
            v-model="form.serviceMonths"
            :min="1"
            :max="9999"
            :precision="0"
            disabled
            controls-position="right"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="用品状态" prop="status">
          <el-radio-group v-model="form.status" disabled>
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="3" disabled />
        </el-form-item>
      </el-form>
    </main>
    <footer class="safety-platform-container__footer">
      <el-button @click="router.back()">返回</el-button>
    </footer>
  </div>
</template>

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

  const router = useRouter();
  const route = useRoute();
  const loading = ref(false);

  const id = computed(() => Number(route.query.id));

  const form = reactive<{
    jobPost: string;
    ppeCategory: string;
    ppeName: string;
    serviceMonths?: number;
    status: boolean;
    remark: string;
    createdAt: string;
    updatedAt: string;
  }>({
    jobPost: '',
    ppeCategory: '',
    ppeName: '',
    serviceMonths: undefined,
    status: true,
    remark: '',
    createdAt: '',
    updatedAt: '',
  });

  const getDetail = async () => {
    if (!id.value) {
      ElMessage.error('缺少 id');
      return;
    }
    loading.value = true;
    try {
      const res = await queryPersonalProtectiveEquipmentDetail(id.value);
      if (res) {
        form.jobPost = res.jobPost ?? '';
        form.ppeCategory = res.ppeCategory ?? '';
        form.ppeName = res.ppeName ?? '';
        const sm = res.serviceMonths;
        form.serviceMonths =
          sm !== '' && sm != null && !Number.isNaN(Number(sm)) ? Number(sm) : undefined;
        form.status = res.status === true || res.status === 'true';
        form.remark = res.remark ?? '';
        form.createdAt = res.createdAt ?? '';
        form.updatedAt = res.updatedAt ?? '';
      }
    } catch (e) {
      console.error('获取劳防用品详情失败:', e);
      ElMessage.error('获取详情失败');
    } finally {
      loading.value = false;
    }
  };

  onMounted(() => {
    getDetail();
  });
</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>
