<template>
  <el-form
    ref="formRef"
    :model="formData"
    label-width="100px"
    v-loading="formLoading"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item label="设备编码" prop="deviceName">
          <el-input v-model="formData.failureCode" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="故障名称" prop="deviceName">
          <el-input v-model="formData.deviceName" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="formData.deviceName" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="故障系统" prop="failureSystem">
          <el-input v-model="formData.failureSystem" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否解决" prop="ifDeal">
          <el-select v-model="formData.ifDeal" disabled>
            <el-option
              v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
              :key="dict.label"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="状态" prop="status">
          <el-select v-model="formData.status" disabled>
            <el-option
              v-for="dict in getBoolDictOptions(DICT_TYPE.PMS_FAILURE_STATUS)"
              :key="dict.label"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否停机" prop="ifStop">
          <el-select v-model="formData.ifStop" disabled>
            <el-option
              v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
              :key="dict.label"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="故障时间" prop="failureTime">
          <el-date-picker
            disabled
            v-model="formData.failureTime"
            type="date"
            value-format="x"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="故障系统" prop="failureSystem">
          <el-input v-model="formData.failureSystem"  disabled/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否需要协助" prop="needHelp">
          <el-select v-model="formData.needHelp" disabled>
            <el-option
              v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
              :key="dict.label"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="图片" prop="pic">
          <UploadImg v-model="formData.pic" height="60px"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="故障影响" prop="failureInfluence">
          <el-input
            disabled
            type="textarea"
            v-model="formData.failureInfluence"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="解决办法" prop="solution">
          <el-input v-model="formData.solution" type="textarea" disabled/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="故障描述" prop="description">
          <el-input type="textarea" v-model="formData.description" disabled/>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" type="textarea" disabled/>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup lang="ts">
import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
import {IotFailureReportApi} from "@/api/pms/failure";

/** 故障上报 表单 */
defineOptions({ name: 'IotFailureReportInfo' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const deviceLabel = ref('') // 表单的类型：create - 新增；update - 修改
const { params, name } = useRoute() // 查询参数
const props = defineProps<{ id?: number }>()
const formData = ref({
  id: undefined,
  failureCode: undefined,
  failureName: undefined,
  deviceId: undefined,
  deviceName: undefined,
  status: undefined,
  ifStop: undefined,
  failureTime: undefined,
  failureInfluence: undefined,
  failureSystem: undefined,
  description: undefined,
  pic: undefined,
  ifDeal: undefined,
  needHelp: undefined,
  solution: undefined,
  remark: undefined
})
onMounted( async ()=>{
  const id = props.id || params.id
  if (!id) {
    message.warning('参数错误，故障上报不能为空！')
    close()
    return
  }
  await getFailureData(id)
})
const getFailureData = async (id) => {
  formLoading.value = true
  try {
    debugger
    formData.value = await IotFailureReportApi.getIotFailureReport(id)
  } finally {
    formLoading.value = false
  }
}
</script>
