<!-- 异常情况处理 基本信息 -->
<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 { deptType, 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 $route = useRoute()
const user = useUserStore() // 用户信息
const applyId = ref('') //	异常处置申请id,用于当添加异常处置结果所在的第二次审批时传入，即当applyType=2时必传
const applyType = ref('') //	申请类型(1异常处置申请/2异常处置结果),用于区分2次审批,全部tab页中只查询展示applyType为1的数据
const form = ref<IForm>({
  reportNo: '',	// 报告单编号
  reportName: '',	// 报告单名称
  createUserId: '', // 创建人id
  createUserName: '', // 创建人
  createTime: '', // 创建时间
  equipmentId: '', // 设备台账id
  equipmentNo: '', // 设备编号
  equipmentName: '', // 设备名称
  model: '', // 规格型号
  manufacturer: '', // 生产厂家
  exceptionTime: '', // 故障时间
  exceptionDesc: '', // 异常情况描述、原因及后果分析
  handleSituation: '', // 应急处置情况
  traceSituation: '', // 追溯情况

  labCode: '', // 实验室
  groupCode: '', // 部门
  handleResult: '', // 设备处置结果
})

const ruleFormRef = ref() // 表单ref
const ruleFormRefResult = 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'] }],
  handleResult: [{ required: true, message: '设备处置结果不能为空', trigger: ['blur', 'change'] }],
})

// -----------------------------------------字典--------------------------------------------------------------
const labDeptList = ref<dictType[]>([]) // 实验室
const useDeptList = ref<dictType[]>([]) // 部门

// 查询字典
const getDict = async () => {
  // 实验室
  getDictByCode('bizGroupCodeEquipment').then((response) => {
    labDeptList.value = response.data
  })

  // 部门
  getDictByCode('bizGroupCode').then((response) => {
    useDeptList.value = response.data
  })
}
getDict()
// --------------------------------------选择设备编号-------------------------------------------------
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 // 生产厂家
    form.value.labCode = val[0].labCode // 实验室
    form.value.groupCode = val[0].groupCode // 部门
  }
}

// -----------------------------------------------保存----------------------------------------------
// 封装验证函数
const validateForm = (formRef: any) => {
  return new Promise((resolve, reject) => {
    formRef.validate((valid: Boolean) => {
      if (valid) {
        resolve(valid)
      }
      else {
        reject(new Error('验证不通过'))
      }
    })
  })
}

const save = () => {
  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,
      applyType: applyType.value,
      applyId: applyId.value,
    }
    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 formEl 基本信息表单ref
 */
const saveForm = () => {
  if (applyType.value !== '2') { // 第一步审批
    validateForm(ruleFormRef.value).then(() => {
      save()
    })
  }
  else { // 第二步审批流程
    validateForm(ruleFormRefResult.value).then(() => {
      save()
    })
  }
}

// ----------------------------------------------提交--------------------------------------------
// 提交
/**
 *
 * @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
    applyType.value = `${res.data.applyType}` //	申请类型(1异常处置申请/2异常处置结果),用于区分2次审批,全部tab页中只查询展示applyType为1的数据
    applyId.value = res.data.applyId //	异常处置申请id,用于当添加异常处置结果所在的第二次审批时传入，即当applyType=2时必传
  })
}
// ---------------------------------------------钩子----------------------------------------------
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') {
    fetchInfo() // 获取详情信息
  }
  else { // 新建
    applyType.value = '1'
  }
})

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

<template>
  <detail-block v-loading="loading" title="">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="120"
      label-position="right"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="文件编号:" prop="reportNo">
            <el-input v-model="form.reportNo" disabled placeholder="系统自动生成" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="文件名称:" prop="reportName">
            <el-input v-model="form.reportName" disabled :placeholder="pageType === 'detail' ? ' ' : '请输入报告单名称'" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建人:">
            <el-input
              v-model="form.createUserName" disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <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-row>
    </el-form>
  </detail-block>
  <detail-block v-loading="loading" title="异常处置申请">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="120"
      label-position="right"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="6">
          <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' && applyType !== '2'" #append>
                <el-button size="small" @click="selectEquipment">
                  选择
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设备名称:" prop="equipmentName">
            <el-input v-model="form.equipmentName" disabled placeholder="设备名称" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <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="6">
          <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="6">
          <el-form-item label="实验室" prop="labCode">
            <el-select
              v-model="form.labCode"
              :placeholder="pageType === 'detail' ? ' ' : '请选择实验室'"
              disabled
              class="full-width-input"
            >
              <el-option
                v-for="item in labDeptList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部门" prop="groupCode">
            <el-select
              v-model="form.groupCode"
              :placeholder="pageType === 'detail' ? ' ' : '请选择部门'"
              disabled
              class="full-width-input"
            >
              <el-option
                v-for="item in useDeptList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <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' || applyType === '2'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="18">
          <el-form-item label="异常情况描述、原因及后果分析:" label-width="240" prop="exceptionDesc">
            <el-input
              v-model="form.exceptionDesc"
              class="full-width-input"
              :placeholder="pageType === 'detail' ? ' ' : '请输入异常情况描述、原因及后果分析'"
              autosize
              type="textarea"
              :disabled="pageType === 'detail' || applyType === '2'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="18">
          <el-form-item label="应急处置情况:" label-width="240" prop="handleSituation">
            <el-input
              v-model="form.handleSituation"
              class="full-width-input"
              :placeholder="pageType === 'detail' ? ' ' : '请输入应急处置情况'"
              autosize
              type="textarea"
              :disabled="pageType === 'detail' || applyType === '2'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="18">
          <el-form-item label="追溯情况:" label-width="240" prop="traceSituation">
            <el-input
              v-model="form.traceSituation"
              class="full-width-input"
              :placeholder="pageType === 'detail' ? ' ' : '请输入追溯情况'"
              autosize
              type="textarea"
              :disabled="pageType === 'detail' || applyType === '2'"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block>
  <detail-block v-if="applyType === '2'" v-loading="loading" title="设备处置结果">
    <el-form
      ref="ruleFormRefResult"
      :model="form"
      :label-width="120"
      label-position="right"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="设备处置结果:" prop="handleResult">
            <el-input
              v-model="form.handleResult"
              class="full-width-input"
              :placeholder="pageType === 'detail' ? ' ' : '请输入设备处置结果'"
              :autosize="{ minRows: 6 }"
              type="textarea"
              :disabled="pageType === 'detail' || applyType !== '2'"
            />
          </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>