<!-- 保存到检定审批管理草稿箱 -->
<script lang="ts" setup name="saveMeasureApprovalDialog">
import type { FormInstance, FormRules } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref } from 'vue'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import { addCertificate } from '@/api/business/taskMeasure/certificate'
import useUserStore from '@/store/modules/user'
// 用户信息
const emit = defineEmits(['backSuccess']); const user = useUserStore() // 退回成功方法
const dialogVisible = ref(false) // 弹窗显示状态
const form = ref({ // 默认表单
  labCode: '', // 实验室
  groupCode: '', // 部门
  certificateName: '', // 检定审批报告名称
})
const btnLoading = ref(false) // 保存按钮加载状态
const saveParams = ref() as any // 检定数据参数
const $router = useRouter()
const dialogLoading = ref(false) // 弹窗loading
// -----------------------------------------字典--------------------------------------------------------------
const labCodeList = ref<dictType[]>([]) // 实验室
const groupCodeList = ref<dictType[]>([]) // 部门
async function getDict() {
  // 实验室
  const res = await getDictByCode('bizLabCode')
  labCodeList.value = res.data
  // 部门
  const response = await getDictByCode('bizGroupCode')
  groupCodeList.value = response.data
}
// ---------------------------------表单提交---------------------------------------------
const dataFormRef = ref<FormInstance>() // 表单对象
const rules = reactive<FormRules>({ // 校验规则
  labCode: [{ required: true, message: '实验室不能为空', trigger: ['blur', 'change'] }],
  groupCode: [{ required: true, message: '部门不能为空', trigger: ['blur', 'change'] }],
  certificateName: [{ required: true, message: '检定审批报告名称不能为空', trigger: ['blur', 'change'] }],
})

// 提交表单
function submitForm(formEl: FormInstance | undefined) {
  if (!formEl) { return }
  formEl.validate((valid) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        background: 'rgba(255, 255, 255, 0.8)',
      })
      dialogLoading.value = true
      btnLoading.value = true
      const params = {
        ...saveParams.value,
        ...form.value,
        dataId: saveParams.value.dataId, // 检定数据管理基础信息表id
        id: '',
      }
      addCertificate(params).then((res) => {
        ElMessage.success('保存成功')
        dialogVisible.value = false
        $router.push({
          path: `/businessCertificate/detail/${res.data.id}`,
          query: {
            certNo: res.data.certNo, // 检定证书报告
            sampleName: saveParams.value.sampleName, // 被检设备名称
            model: saveParams.value.sampleModel, // 被检设备名称
            manufacturingNo: saveParams.value.manufactureNo, // 被检设备名称
            approvalStatusName: '草稿箱',
            measureDataId: saveParams.value.dataId,
          },
        })
        loading.close()
        btnLoading.value = false
        dialogLoading.value = false
      }).catch(() => {
        loading.close()
        btnLoading.value = false
        dialogLoading.value = false
      })
    }
  })
}

// ------------------------------------------弹窗操作------------------------------------
/**
 * 初始化审批弹窗
 * @param id 委托书id
 */
function initDialog(value: any) {
  saveParams.value = value
  // dataFormRef.value!.clearValidate()
  dialogVisible.value = true
  getDict()
}

// 关闭弹窗
function handleClose() {
  dialogVisible.value = false
}
// ------------------------------------- 以下是暴露的方法内容 ------------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="生成原始记录和检定证书"
    width="600"
    :modal="true"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form
      ref="dataFormRef"
      v-loading="dialogLoading"
      label-position="top"
      label-width="80px"
      :model="form"
      :rules="rules"
    >
      <el-form-item label="实验室" prop="labCode">
        <el-select v-model="form.labCode" placeholder="请选择实验室" class="full-width-input">
          <el-option v-for="item in labCodeList" :key="item.id" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="部门" prop="groupCode">
        <el-select v-model="form.groupCode" placeholder="请选择部门" class="full-width-input">
          <el-option v-for="item in groupCodeList" :key="item.id" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="检定审批报告名称:" prop="certificateName">
        <el-input v-model="form.certificateName" placeholder="检定审批报告名称" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" :loading="btnLoading" @click="submitForm(dataFormRef)">
        提交
      </el-button>
      <el-button type="info" :disabled="btnLoading" @click="handleClose">
        取消
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
// 样式
</style>