<template>
  <el-form
    ref="formRef"
    :model="formData"
    label-width="100px"
    v-loading="formLoading"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item :label="t('faultForm.device')" prop="deviceName">
          <el-select
            disabled
            v-model="formData.deviceName"
            :placeholder="t('faultForm.choose')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="t('faultForm.solve')" prop="ifDeal">
          <el-select v-model="formData.ifDeal" :placeholder="t('faultForm.choose')" 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="t('faultForm.assist')" prop="needHelp" >
          <el-select v-model="formData.needHelp" :placeholder="t('faultForm.choose')" 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="t('faultForm.faultySystem')" prop="failureSystem" disabled="true">
          <el-input v-model="formData.failureSystem" :placeholder="t('faultForm.faultySystemHolder')" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="t('faultForm.failureTime')" prop="failureTime" disabled="true">
          <el-date-picker
            disabled
            style="width: 150%"
            v-model="formData.failureTime"
            type="datetime"
            value-format="x"
            :placeholder="t('faultForm.failureTimeHolder')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.ifDeal">
        <el-form-item :label="t('faultForm.dealTime')" prop="dealTime">
          <el-date-picker
            @change="endTimeBlur"
            disabled
            style="width: 150%"
            v-model="formData.dealTime"
            type="datetime"
            value-format="x"
            placeholder="选择故障解决时间"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="t('faultForm.shutDown')" prop="ifStop">
          <el-select v-model="formData.ifStop" :placeholder="t('faultForm.choose')" 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="t('faultForm.picture')" prop="pic">
          <UploadImg v-model="formData.pic" height="60px" disabled="true" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item :label="t('faultForm.faultImpact')" prop="failureInfluence">
          <el-input type="textarea" v-model="formData.failureInfluence" :placeholder="t('faultForm.faultImpactHolder')" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="解决办法" v-if="formData.ifDeal" prop="solution" :rules="formData.ifDeal?solutionRule:[]">
          <el-input v-model="formData.solution" type="textarea" placeholder="请输入解决办法" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item :label="t('faultForm.faultDescription')" prop="description">
          <el-input type="textarea" v-model="formData.description" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item :label="t('faultForm.remark')" prop="remark">
          <el-input v-model="formData.remark" type="textarea" :placeholder="t('faultForm.rHolder')" 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 {
    formData.value = await IotFailureReportApi.getIotFailureReport(id)
  } finally {
    formLoading.value = false
  }
}
</script>
