<!-- 异常情况处理 基本信息 -->
<script name="EquipmentResumeErrorBasic" lang="ts" setup>
import type { Ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import dayjs from 'dayjs'
import type { IForm } from '../error-interface'
import type { dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
import { SCHEDULE } from '@/utils/scheduleDict'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'
import useUserStore from '@/store/modules/user'
import SelectEquipmentDialog from '@/views/business/fieldTest/approve/dialog/selectEquipmentDialog.vue'
import { useCheckList } from '@/commonMethods/useCheckList'
import { getInfo as getResultConfirmDetail } from '@/api/equipment/source/resultConfirm'
import { useDoubleClickTableRow, useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable'
import { addResumeErrorList, failUpdateResumeErrorList, getInfo, submit, updateResumeErrorList } from '@/api/equipment/resume/error'
const props = defineProps({
  pageType: { // 页面类型 add新建 edit编辑 detail详情
    type: String,
    requre: true,
    default: 'detail',
  },
  id: {
    type: String,
    requre: true,
  },
  approvalStatusName: { // 审批状态名称
    type: String,
    requre: true,
  },
  processId: {
    type: String,
  },
})
const emits = defineEmits(['addSuccess', 'submitSuccess'])
const user = useUserStore() // 用户信息
const form = ref<IForm>({
  reportNo: '',	// 报告单编号
  reportName: '',	// 报告单名称
  createUserId: '', // 创建人id
  createUserName: '', // 创建人
  createTime: '', // 创建时间
  equipmentId: '', // 设备台账id
  equipmentNo: '', // 设备编号
  equipmentName: '', // 设备名称
  model: '', // 规格型号
  manufacturer: '', // 生产厂家
  exceptionTime: '', // 故障时间
  exceptionDesc: '', // 异常情况描述、原因及后果分析
  handleSituation: '', // 应急处置情况
  traceSituation: '', // 追溯情况
})

const ruleFormRef = ref() // 表单ref
const certFormRef = ref() // 证书要素确认ref
const resultRulesRef = ref() // 结果确认ref
const equipmentRef = ref() // 设备ref
const loading = ref(false) // loading
const infoId = ref('') // id
const rules = ref<FormRules>({ // 校验规则
  labCode: [{ required: true, message: '实验室代码不能为空', trigger: ['blur', 'change'] }],
  groupCode: [{ required: true, message: '组别代码不能为空', trigger: ['blur', 'change'] }],
  equipmentNo: [{ required: true, message: '统一编号不能为空', trigger: ['blur', 'change'] }],
  exceptionTime: [{ required: true, message: '故障时间不能为空', trigger: ['blur', 'change'] }],
  exceptionDesc: [{ required: true, message: '异常情况描述、原因及后果分析不能为空', trigger: ['blur', 'change'] }],
  handleSituation: [{ required: true, message: '应急处置情况不能为空', trigger: ['blur', 'change'] }],
  traceSituation: [{ required: true, message: '追溯情况不能为空', trigger: ['blur', 'change'] }],
})

// --------------------------------------选择设备编号-------------------------------------------------
const selectEquipmentDialogRef = ref() // 选择设备编号组件ref
// 批量添加
const selectEquipment = () => {
  selectEquipmentDialogRef.value.initDialog()
}

// 确定选择设备
const confirmSelectEquipment = (val: any) => {
  console.log(val[0])

  if (val.length) {
    form.value.equipmentId = val[0].id // 设备id
    form.value.equipmentNo = val[0].equipmentNo // 统一编号
    form.value.equipmentName = val[0].equipmentName // 设备名称
    form.value.model = val[0].model // 型号规格
    form.value.manufacturer = val[0].manufacturer // 生产厂家
  }
}

// -----------------------------------------------保存----------------------------------------------
/**
 * 点击保存
 * @param formEl 基本信息表单ref
 */
const saveForm = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) { // 基本信息表单通过校验
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        const loading = ElLoading.service({
          lock: true,
          text: '加载中...',
          background: 'rgba(255, 255, 255, 0.8)',
        })
        const params = {
          ...form.value,
          id: infoId.value,
          processId: props.processId,
        }
        if (props.pageType === 'add') { // 新建
          addResumeErrorList(params).then((res) => {
            loading.close()
            form.value.reportNo = res.data.reportNo // 报告单编号
            infoId.value = res.data.id // id
            emits('addSuccess', infoId.value)
            ElMessage.success('已保存')
          }).catch(() => {
            loading.close()
          })
        }
        else if (props.pageType === 'edit') { // 编辑
          console.log(props.approvalStatusName)
          if (props.approvalStatusName === '草稿箱' || props.approvalStatusName === '全部') {
            updateResumeErrorList(params).then((res) => {
              loading.close()
              emits('addSuccess', infoId.value)
              ElMessage.success('已保存')
            }).catch(() => {
              loading.close()
            })
          }
          else { // '未通过' || '已取消'
            failUpdateResumeErrorList(params).then((res) => {
              loading.close()
              emits('submitSuccess')
              fetchInfo()
              ElMessage.success('已保存')
            }).catch(() => {
              loading.close()
            })
          }
        }
      })
    }
  })
}

// ----------------------------------------------提交--------------------------------------------
// 提交
/**
 *
 * @param processId 流程实例id
 * @param id
 */
const submitForm = (processId: string, id: string) => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  submit({ id, formId: SCHEDULE.EXCEPTION_HANDLING_APPROVAL }).then((res) => {
    ElMessage.success('已提交')
    emits('submitSuccess')
    loading.close()
  })
}
// -----------------------------------------获取详情------------------------------------------
// 获取详情
function fetchInfo() {
  loading.value = true
  getInfo({ id: infoId.value }).then((res) => {
    loading.value = false
    form.value = res.data
  })
}
// ---------------------------------------------钩子----------------------------------------------
watch(() => props.id, (newValue) => {
  infoId.value = newValue!
  if (infoId.value) {
    fetchInfo() // 获取详情信息
  }
}, { immediate: true })

onMounted(() => {
  form.value.createUserId = user.id// 创建人id
  form.value.createUserName = user.name // 创建人名字
  form.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss')// 创建时间
  form.value.reportName = '设备异常及追溯情况报告单'
  if (props.pageType !== 'add' && infoId.value) {
    fetchInfo() // 获取详情信息
  }
})

defineExpose({ saveForm, submitForm, fetchInfo })
</script>

<template>
  <detail-block v-loading="loading" title="">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="200"
      label-position="right"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="报告单编号:" prop="reportNo">
            <el-input v-model="form.reportNo" disabled placeholder="系统自动生成" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="报告单名称:" prop="reportName">
            <el-input v-model="form.reportName" disabled :placeholder="pageType === 'detail' ? ' ' : '请输入报告单名称'" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人:">
            <el-input
              v-model="form.createUserName" disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间:" prop="createTime">
            <el-date-picker
              v-model="form.createTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="统一编号:" prop="equipmentNo">
            <el-input
              v-model="form.equipmentNo"
              :placeholder="pageType === 'detail' ? '' : '请选择统一编号'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            >
              <template v-if="pageType !== 'detail'" #append>
                <el-button size="small" @click="selectEquipment">
                  选择
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备名称:" prop="equipmentName">
            <el-input v-model="form.equipmentName" disabled placeholder="设备名称" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="型号规格" prop="model">
            <el-input
              v-model.trim="form.model"
              placeholder="型号规格"
              disabled
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="生产厂家:" prop="manufacturer">
            <el-input
              v-model.trim="form.manufacturer"
              :placeholder="pageType === 'detail' ? '' : '请输入生产厂家'"
              disabled
            />
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="故障时间:" prop="exceptionTime">
            <el-date-picker
              v-model="form.exceptionTime"
              type="date"
              format="YYYY-MM-DD HH:mm:ss"
              :placeholder="pageType === 'detail' ? ' ' : '请选择故障时间'"
              value-format="YYYY-MM-DD HH:mm:ss"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16">
          <el-form-item label="异常情况描述、原因及后果分析:" prop="exceptionDesc">
            <el-input
              v-model="form.exceptionDesc"
              class="full-width-input"
              :placeholder="pageType === 'detail' ? ' ' : '请输入异常情况描述、原因及后果分析'"
              autosize
              type="textarea"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16">
          <el-form-item label="应急处置情况:" prop="handleSituation">
            <el-input
              v-model="form.handleSituation"
              class="full-width-input"
              :placeholder="pageType === 'detail' ? ' ' : '请输入应急处置情况'"
              autosize
              type="textarea"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16">
          <el-form-item label="追溯情况:" prop="traceSituation">
            <el-input
              v-model="form.traceSituation"
              class="full-width-input"
              :placeholder="pageType === 'detail' ? ' ' : '请输入追溯情况'"
              autosize
              type="textarea"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block>
  <!-- 选择设备台账 -->
  <select-equipment-dialog ref="selectEquipmentDialogRef" @confirm="confirmSelectEquipment" />
</template>

<style lang="scss" scoped>
.tech-file {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-bottom: 10px;

  .file-text {
    white-space: nowrap;
    margin-right: 10px;
    font-size: 14px;
    color: #60627f;
  }
}
</style>