<template>
  <el-card>
    <el-form ref="formRef" :model="formData" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24" :sm="24" :md="12">
          <el-form-item label="事件时间" prop="actualTime">
            <el-date-picker
              v-model="formData.actualTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="x"
              placeholder="选择事件发生时间"
              style="width: 100%"
              :disabled="true" />
          </el-form-item>
        </el-col>

        <el-col :span="24" :xs="24" :sm="24" :md="12">
          <el-form-item label="事件级别" prop="accidentGrade">
            <el-input
              v-model="formData.accidentGrade"
              placeholder="请输入事件级别"
              clearable
              :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24" :xs="24" :sm="24" :md="12">
          <el-form-item label="事件类型" prop="accidentType">
            <el-input
              v-model="formData.accidentType"
              placeholder="请选择事件类型"
              clearable
              style="width: 100%"
              :disabled="true" />
          </el-form-item>
        </el-col>

        <el-col :span="24" :xs="24" :sm="24" :md="12">
          <el-form-item label="事件地址" prop="accidentAddress">
            <el-input
              v-model="formData.accidentAddress"
              placeholder="请输入事件地址"
              clearable
              :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24" :xs="24" :sm="24" :md="12">
          <el-form-item label="现场负责人" prop="dutyPerson">
            <el-input
              v-model="formData.dutyPerson"
              placeholder="请输入现场负责人姓名"
              clearable
              :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="事件损失情况" prop="lossSituation">
            <el-input
              v-model="formData.lossSituation"
              placeholder="请输入事件损失情况"
              clearable
              type="textarea"
              :rows="2"
              :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="现场采取措施" prop="emergencyMeasure">
            <el-input
              v-model="formData.emergencyMeasure"
              type="textarea"
              :rows="2"
              placeholder="请输入现场采取的应急措施"
              maxlength="500"
              show-word-limit
              :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="事件简要经过" prop="description">
            <el-input
              v-model="formData.description"
              type="textarea"
              :rows="2"
              placeholder="请输入事件详细经过"
              maxlength="1000"
              show-word-limit
              :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="附件/现场图片" prop="pic">
            <UploadImage v-model="formData.pic" width="260px" :disabled="true" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="formData.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入备注信息"
              maxlength="500"
              show-word-limit
              :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { IotFailureApi } from '@/api/pms/qhse/index'
/** 故障上报 表单 */
defineOptions({ name: 'QhseFaultReportInfo' })

const message = useMessage() // 消息弹窗
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

const route = useRoute() // 查询参数
const props = defineProps<{ id?: number }>()
const formData = ref({
  actualTime: null, // 使用时间戳格式
  accidentGrade: '',
  accidentType: '',
  accidentAddress: '',
  dutyPerson: '',
  lossSituation: '',
  emergencyMeasure: '',
  description: '',
  pic: '',
  remark: ''
})
onMounted(async () => {
  const id = route.query.id

  if (!id) {
    message.warning('参数错误，事故事件上报不能为空！')
    close()
    return
  }
  await getFailureData(id)
})
const getFailureData = async (id) => {
  formLoading.value = true
  try {
    formData.value = await IotFailureApi.getFailure(id)
  } finally {
    formLoading.value = false
  }
}
</script>
