<!-- 对编号为XXX证书/报告的补充件 基本信息 -->
<script name="BusinessCertSupplementBasic" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormRules } from 'element-plus'
import dayjs from 'dayjs'
import type { IForm } from '../supplement-interface'
import type { dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
import { SCHEDULE } from '@/utils/scheduleDict'
import { getCertList as getCertInfo } from '@/api/business/certManage/cert'

import useUserStore from '@/store/modules/user'
import selectChangeApplyDialog from '@/views/business/certManage/supplement/dialog/selectChangeApplyDialog.vue'
import { addSupplement, failUpdateSupplement, getInfo, submit, updateSupplement } from '@/api/business/certManage/supplement'
const props = defineProps({
  pageType: { // 页面类型 add新建 edit编辑 detail详情
    type: String,
    requre: true,
    default: 'detail',
  },
  id: { // id
    type: String,
    requre: true,
  },
  approvalStatusName: { // 审批状态名称
    type: String,
    requre: true,
  },
  processId: { // 流程实例id
    type: String,
  },
})
const emits = defineEmits(['addSuccess', 'submitSuccess'])
const $router = useRouter()
const user = useUserStore() // 用户信息
const form = ref<IForm>({
  labCode: '', // 实验室
  labCodeName: '', // 实验室名称
  groupCode: '', // 部门
  groupCodeName: '', // 部门名称
  wjbh: '', // 文件编号
  wjmc: '', // 文件名称
  createUserId: '', // 创建人id
  createUserName: '', // 创建人名称
  createTime: '', // 创建时间

  zsbgbchghsqdbh: '', // 证书/报告补充或更换申请单编号
  customerName: '', // 委托方
  reportName: '', // 证书/报告名称
  reportId: '', // 证书/报告id
  reportNo: '', // 证书/报告编号
  sampleName: '', // 设备名称
  model: '', // 规格型号
  manufactureNo: '', // 出厂编号
  sbsrrq: '', // 设备收入日期
  traceDate: '', // 测试、校准检定日期

  smyy: '', // 说明原因
  dzwt: '', // 导致问题
  bcnr: '', // 补充内容

})

const ruleFormRef = 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'] }],
  zsbgbchghsqdbh: [{ required: true, message: '证书/报告补充或更换申请单编号不能为空', trigger: ['change', 'blur'] }],
  smyy: [{ required: true, message: '此处不能为空', trigger: ['change', 'blur'] }],
  dzwt: [{ required: true, message: '此处不能为空', trigger: ['change', 'blur'] }],
  bcnr: [{ required: true, message: '补充内容不能为空', trigger: ['change', 'blur'] }],
  sm: [{ required: true, message: '说明不能为空', trigger: ['change', 'blur'] }],
})
// ------------------------------------------字典----------------------------------------------
const labCodeList = ref<dictType[]>([]) // 实验室代码
const groupCodeList = ref<dictType[]>([]) // 组别代码
const changeTypeList = ref<dictType[]>([]) // 变更类型

function getDict() {
  // 实验室
  getDictByCode('bizGroupCodeEquipment').then((response) => {
    labCodeList.value = response.data
  })
  // 部门
  getDictByCode('bizGroupCode').then((response) => {
    groupCodeList.value = response.data
  })
}
getDict()

// -----------------------------------------------选择证书/报告补充或更换申请单编号----------------------------------------------
const selectChangeApplyDialogRef = ref() // 选择证书/报告补充或更换申请单编号组件ref

// 点击选择证书/报告补充或更换申请单编号
const selectUpdateCertNo = () => {
  selectChangeApplyDialogRef.value.initDialog()
}

// 通过证书编号获取证书相关的信息
const fetchCertInfo = async (reportNo = '') => {
  const params = {
    approvalStatus: '0', //	审批状态类型code，导出接口不用传
    certificateReportNo: reportNo, //		证书报告编号
    certificateReportName: '', //		证书报告名称
    customerId: '', //		委托方id
    customerName: '', //		委托方
    deptName: '', //		使用部门
    sampleNo: '', //		受检设备编号
    sampleName: '', //		受检设备名称
    model: '', //		规格型号
    manufactureNo: '', //		出厂编号
    measureCategory: '', //		检校类别(字典code)
    traceDateStart: '', //		测试、校准或检定日期开始
    traceDateEnd: '', //		测试、校准或检定日期结束
    conclusion: '', //		结论(所检项目合格/不合格/除*外其余所检项目合格,用户手选)
    measureValidDateStart: '', //		检定有效期开始
    measureValidDateEnd: '', //		检定有效期结束
    labCode: '', //		实验室代码(字典code)
    groupCode: '', //		组别代码(字典code)
    createUserName: '', //		检定员
    formId: SCHEDULE.CERTIFICATE_PRINT_APPROVAL, //		表单id
    printStatus: '', // 打印状态(未打印传1,其他状态不传)
    offset: 1,
    limit: 20,
  }
  let result = [] as any
  const response = await getCertInfo(params)
  if (response.data && response.data.rows && response.data.rows.length) {
    form.value.customerName = response.data.rows[0].customerName // 委托方
    form.value.sampleName = response.data.rows[0].sampleName // 设备名称
    form.value.model = response.data.rows[0].model // 规格型号
    form.value.manufactureNo = response.data.rows[0].manufactureNo // 出厂编号
    form.value.sbsrrq = response.data.rows[0].sbsrrq // 设备收入日期
    form.value.traceDate = response.data.rows[0].traceDate // 测试、校准检定日期

    result = response.data.rows
  }
  return result
}

// 确认选择证书
const confirmSelect = (val: any) => {
  if (val && val.length) {
    form.value.zsbgbchghsqdbh =	val[0].changeApplyNo // 报告补充或更换申请单编号
    form.value.reportName =	val[0].changeReportName	// 证书 / 报告名称
    form.value.reportNo =	val[0].changeReportNo	// 证书编号
    form.value.reportId =	val[0].id	// 证书报告id
    form.value.wjmc = `对编号为${val[0].changeReportNo}证书/报告的补充件` // 申请单名称
    fetchCertInfo(val[0].changeReportNo)
  }
}

// -----------------------------------------------保存----------------------------------------------
/**
 * 点击保存
 * @param formEl 基本信息表单ref
 */
const saveForm = async () => {
  await 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') { // 新建
          addSupplement(params).then((res) => {
            loading.close()
            form.value.changeApplyNo = res.data.changeApplyNo // 登记表编号
            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 === '全部') {
            updateSupplement(params).then((res) => {
              loading.close()
              emits('addSuccess', infoId.value)
              ElMessage.success('已保存')
            }).catch(() => {
              loading.close()
            })
          }
          else { // '未通过' || '已取消'
            failUpdateSupplement(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.CERTIFICATE_CHANGE_APPROVAL }).then((res) => {
    ElMessage.success('已提交')
    emits('submitSuccess')
    loading.close()
  })
}
// -----------------------------------------------------------------------------------------
// 点击证书报告编号跳转证书页面
const clickReportNo = () => {
  fetchCertInfo(form.value.reportNo).then((res) => {
    if (Array.isArray(res) && res.length) {
      const row = res[0]
      $router.push({
        path: `/cert/detail/${row.id}`,
        query: {
          ...row,
          approvalStatusName: '全部', // 审批状态名称
          printFileName: row.certificateFile,
          printStatusName: row.printStatusName, // 证书打印状态
          processId: row.processId, // 流程实例
          taskId: row.taskId, // 任务id，用于同意、驳回、拒绝审批
        },
      })
    }
  })
}
// ---------------------------------------------钩子----------------------------------------------
watch(() => props.id, (newValue) => {
  infoId.value = newValue!
}, { immediate: true })
const $route = useRoute()
onMounted(async () => {
  if (props.pageType === 'edit' || props.pageType === 'detail') {
    // 请求详情
  }
  else { // 新建
    form.value.createUserId = user.id// 创建人id
    form.value.createUserName = user.name // 创建人
    form.value.createTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 创建时间
    form.value.wjmc = '对编号为XXX证书/报告的补充件' // 申请单名称
    form.value.labCode = user.bizLabCode // 实验室
    form.value.groupCode = user.groupNo // 部门名称
  }
})

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

<template>
  <el-form
    ref="ruleFormRef"
    :model="form"
    :label-width="134"
    label-position="right"
    :rules="rules"
  >
    <detail-block title="">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="实验室" prop="labCode">
            <el-select v-model="form.labCode" :placeholder="pageType === 'detail' ? ' ' : '请选择实验室'" :disabled="pageType === 'detail'" 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-col>
        <el-col :span="6">
          <el-form-item label="部门" prop="groupCode">
            <el-select v-model="form.groupCode" :placeholder="pageType === 'detail' ? ' ' : '请选择部门'" :disabled="pageType === 'detail'" 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-col>
        <el-col :span="6">
          <el-form-item label="文件编号:" prop="wjbh">
            <el-input
              v-model="form.wjbh"
              :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件名称:" prop="wjmc">
            <el-input
              v-model="form.wjmc"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </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="创建时间:">
            <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
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </detail-block>
    <detail-block title="">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="证书/报告补充或更换申请单编号" label-width="280px" prop="zsbgbchghsqdbh">
            <el-input
              v-model="form.zsbgbchghsqdbh"
              :placeholder="pageType === 'detail' ? '' : '请选择'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            >
              <template v-if="pageType !== 'detail'" #append>
                <el-button size="small" @click="selectUpdateCertNo">
                  选择
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="委托方:" prop="customerName">
            <el-input
              v-model="form.customerName"
              :placeholder="pageType === 'detail' ? ' ' : '委托方'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="证书/报告名称:" prop="reportName">
            <el-input
              v-model="form.reportName"
              :placeholder="pageType === 'detail' ? ' ' : '证书/报告名称'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <span v-if="pageType === 'detail'" class="link" @click="clickReportNo">{{ form.reportNo }}</span>
          <el-form-item v-else label="证书/报告编号:" prop="reportNo">
            <el-input
              v-model="form.reportNo"
              :placeholder="pageType === 'detail' ? ' ' : '证书/报告编号'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设备名称:">
            <el-input
              v-model="form.sampleName"
              :class="{ 'detail-input': pageType === 'detail' }"
              :placeholder="pageType === 'detail' ? ' ' : '设备名称'"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="规格型号:">
            <el-input
              v-model="form.model"
              :class="{ 'detail-input': pageType === 'detail' }"
              :placeholder="pageType === 'detail' ? ' ' : '规格型号'"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出厂编号:">
            <el-input
              v-model="form.manufactureNo"
              :class="{ 'detail-input': pageType === 'detail' }"
              :placeholder="pageType === 'detail' ? ' ' : '出厂编号'"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设备收入日期:">
            <el-input
              v-model="form.sbsrrq"
              :class="{ 'detail-input': pageType === 'detail' }"
              :placeholder="pageType === 'detail' ? ' ' : '设备收入日期'"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="测试、校准检定日期:" label-width="180px">
            <el-input
              v-model="form.traceDate"
              :class="{ 'detail-input': pageType === 'detail' }"
              :placeholder="pageType === 'detail' ? ' ' : '测试、校准检定日期'"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <!-- <el-form-item label="说明:" prop="sm">
            <el-input
              v-model="form.sm"
              :rows="4"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 20 }"
              max-length="500"
              :placeholder="pageType === 'detail' ? '' : '说明'"
              :class="{ 'detail-input': pageType === 'detail' }"
              :disabled="pageType === 'detail'"
            />
          </el-form-item> -->
          <div class="desc">
            <span>贵单位编号为 </span>
            <el-form-item label-width="10px" style="margin-right: 10px;">
              <el-input
                v-model="form.reportNo"
                :placeholder="pageType === 'detail' ? ' ' : '系统自动生成'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
                style="width: 220px;"
              />
            </el-form-item>
            <span> 的 </span>
            <el-form-item label-width="10px" style="margin-right: 10px;">
              <el-input
                v-model="form.reportName"
                :placeholder="pageType === 'detail' ? ' ' : '系统自动生成'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
                style="width: 220px;"
              />
            </el-form-item>
            <span> 证书/报告，因 </span>
            <el-form-item label-width="10px" prop="smyy" style="margin-right: 10px;">
              <el-input
                v-model="form.smyy"
                :placeholder="pageType === 'detail' ? ' ' : '请填写'"
                :class="{ 'detail-input': pageType === 'detail' }"
                :disabled="pageType === 'detail'"
                style="width: 400px;"
                type="textarea"
                autosize
              />
            </el-form-item>
            <span> 原因， 导致</span>
            <el-form-item label-width="10px" prop="dzwt" style="margin-right: 10px;">
              <el-input
                v-model="form.dzwt"
                :placeholder="pageType === 'detail' ? ' ' : '请填写'"
                :class="{ 'detail-input': pageType === 'detail' }"
                :disabled="pageType === 'detail'"
                style="width: 400px;"
                type="textarea"
                autosize
              />
            </el-form-item>

            <span> 内容不全面，现予补充。 </span>
            <span> 补充件和原证书或报告一并使用，共同为有效文件。因我们工作疏忽，给贵单位造成不便，深表歉意，请予谅解。</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="补充内容:" prop="bcnr">
            <el-input
              v-model="form.bcnr"
              :rows="4"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 20 }"
              :placeholder="pageType === 'detail' ? '' : '补充内容'"
              :class="{ 'detail-input': pageType === 'detail' }"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </detail-block>
  </el-form>

  <select-change-apply-dialog ref="selectChangeApplyDialogRef" @confirm="confirmSelect" />
</template>

<style lang="scss" scoped>
.desc {
  box-sizing: border-box;
  padding: 5px 11px;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(#dcdfe6, var(--el-border-color)) inset;
  margin-left: 134px;
  margin-bottom: 20px;
  display: flex;
  white-space: nowrap;
  flex-wrap: wrap;
  line-height: 30px;
}

.link {
  color: #5da0ff;
  text-decoration: underline;
  cursor: pointer;
  margin-right: 8px;
}
</style>