<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="550px">
    <div v-loading="formLoading" class="exception-details" v-if="formData">
      <table border="1" cellpadding="10" cellspacing="0" style="width: 100%; border-collapse: collapse;">
        <tbody>
        <tr>
          <td style="text-align: right; width: 120px;"><strong>异常分类：</strong></td>
          <td>
            <dict-tag :type="DICT_TYPE.CLASSIFICATION_OF_EXCEPTIONS" :value="formData.exceptionCategory" />
          </td>
        </tr>
        <tr>
          <td style="text-align: right;"><strong>异常来源：</strong></td>
          <td>{{ formData.sourceName }}</td>
        </tr>
        <tr>
          <td style="text-align: right;"><strong>异常类型：</strong></td>
          <td>{{ formData.exceptionTypeName }}</td>
        </tr>
        <tr>
          <td style="text-align: right;"><strong>严重等级：</strong></td>
          <td>{{ formData.exceptionLevelName }}</td>
        </tr>
        <tr>
          <td style="text-align: right;"><strong>状态：</strong></td>
          <td>
            <dict-tag :type="DICT_TYPE.MANUAL_STATUS" :value="formData.status" />
          </td>
        </tr>
        <tr>
          <td style="text-align: right;"><strong>上报人：</strong></td>
          <td>{{ formData.raiserName }}</td>
        </tr>
        <tr>
          <td style="text-align: right;"><strong>异常发生时间：</strong></td>
          <td>{{ formData.raiseTime }}</td>
        </tr>
        <tr>
          <td style="text-align: right;"><strong>异常解除时间：</strong></td>
          <td>{{ formData.handleTime }}</td>
        </tr>
        <tr style="height: 250px;">
          <td style="text-align: right; vertical-align: top;"><strong>异常描述：</strong></td>
          <td style="vertical-align: top;">{{ formData.exceptionDescription }}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <template #footer>
      <el-button
        :disabled="formData?.status === '1'"
        type="primary"
        @click="handleDeal"
      >处 理</el-button>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import * as ExceptionApi from '@/api/material/manualException'

defineOptions({ name: 'MaterialManualExceptionDetail' })

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

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('异常详情') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中
const formData = ref<any>(null) // 表单数据

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  formLoading.value = true
  try {
    formData.value = await ExceptionApi.getExceptionInfo(id)
  } finally {
    formLoading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 处理异常 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const handleDeal = async () => {
  if (!formData.value) return
  try {
    await ExceptionApi.updateException({
      ...formData.value,
      status: '1'
    })
    message.success(t('common.updateSuccess'))
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } catch {}
}
</script>

<style lang="scss" scoped>
.exception-details {
  table {
    width: 100%;
    border-collapse: collapse;
  }

  td {
    border: 1px solid #ddd;
    padding: 10px;
  }

  tr td:first-child {
    background-color: #f5f5f5;
  }
}
</style>
