<!-- 更换证书 基本信息 -->
<script name="BusinessChangeCertApplyBasic" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormRules } from 'element-plus'
import dayjs from 'dayjs'
import type { IForm } from '../apply-interface'
import SelectCertDialog from '../dialog/selectTaskMeasureCertificateListDialog.vue'
import type { dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
import { SCHEDULE } from '@/utils/scheduleDict'
import useUserStore from '@/store/modules/user'
import { addChangeCertApplyList, failUpdateChangeCertApplyList, getInfo, submit, updateChangeCertApplyList } from '@/api/business/certManage/changeApply'
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 user = useUserStore() // 用户信息
const form = ref<IForm>({
  labCode: '', // 实验室代码
  groupCode: '', // 组别代码
  changeApplyNo: '', // 申请单编号
  changeApplyName: '', // 申请单名称
  createUserId: '', // 创建人id
  createUserName: '', // 创建人名称
  createTime: '', // 创建时间
  changeReportId: '', // 更换证书id
  changeReportNo: '', // 更换证书编号
  changeReportName: '', // 更换证书/报告名称
  changeType: '', // 变更类型
  changeTypeName: '', // 变更类型名称
  changeAnalysis: '', // 补充/更换原因及影响分析
  recallAnalysis: '', // 如果召回被测件、被校件或被检件重新送检，召回原因及影响分析
})

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'] }],
  changeReportNo: [{ required: true, message: '更换证书编号不能为空', trigger: ['change', 'blur'] }],
  changeType: [{ required: true, message: '变更类型不能为空', trigger: ['change', 'blur'] }],
})
// ------------------------------------------字典----------------------------------------------
const labCodeList = ref<dictType[]>([]) // 实验室代码
const groupCodeList = ref<dictType[]>([]) // 组别代码
const changeTypeList = ref<dictType[]>([]) // 变更类型

function getDict() {
  // 实验室代码
  getDictByCode('bizLabCode').then((response) => {
    labCodeList.value = response.data
  })
  // 组别代码
  getDictByCode('bizGroupCode').then((response) => {
    groupCodeList.value = response.data
  })
  // 变更类型
  getDictByCode('bizCertChangeType').then((response) => {
    changeTypeList.value = response.data
  })
}
getDict()
// -----------------------------------------------保存----------------------------------------------
/**
 * 点击保存
 * @param formEl 基本信息表单ref
 */
const saveForm = async () => {
  if (!form.value.changeAnalysis) {
    ElMessage.warning('补充/更换原因及影响分析不能为空')
    return false
  }
  if (!form.value.recallAnalysis) {
    ElMessage.warning('召回原因及影响分析不能为空')
    return false
  }
  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') { // 新建
          addChangeCertApplyList(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 === '全部') {
            updateChangeCertApplyList(params).then((res) => {
              loading.close()
              emits('addSuccess', infoId.value)
              ElMessage.success('已保存')
            }).catch(() => {
              loading.close()
            })
          }
          else { // '未通过' || '已取消'
            failUpdateChangeCertApplyList(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 selectCertDialogRef = ref() // 选择证书组件ref
// 点击选择证书
const selectUpdateCertNo = () => {
  selectCertDialogRef.value.initDialog()
}

// 确认选择证书
const confirmSelect = (val: any) => {
  if (val && val.length) {
    form.value.changeReportId =	val[0].id // 更换证书id
    form.value.changeReportName =	val[0].certificateName	// 更换证书 / 报告名称
    form.value.changeReportNo =	val[0].certificateNo	// 更换证书编号
  }
}
// ---------------------------------------------钩子----------------------------------------------
watch(() => props.id, (newValue) => {
  infoId.value = newValue!
}, { immediate: true })
const $route = useRoute()
onMounted(async () => {
  if (props.pageType === 'edit' || props.pageType === 'detail') {
    form.value.labCode = $route.query.labCode as any // 实验室代码
    form.value.groupCode = $route.query.groupCode as string // 组别代码
    form.value.changeApplyNo = $route.query.changeApplyNo as string // 申请单编号
    form.value.changeApplyName = $route.query.changeApplyName as string // 申请单名称
    form.value.createUserId = $route.query.createUserId as string // 创建人id
    form.value.createUserName = $route.query.createUserName as string // 创建人名称
    form.value.createTime = $route.query.createTime as string // 创建时间
    form.value.changeReportId = $route.query.changeReportId as string // 更换证书id
    form.value.changeReportNo = $route.query.changeReportNo as string // 更换证书编号
    form.value.changeReportName = $route.query.changeReportName as string // 更换证书/报告名称
    form.value.changeType = $route.query.changeType as string // 变更类型
    form.value.changeTypeName = $route.query.changeTypeName as string // 变更类型名称
    form.value.changeAnalysis = $route.query.changeAnalysis as string // 补充/更换原因及影响分析
    form.value.recallAnalysis = $route.query.recallAnalysis as string // 如果召回被测件、被校件或被检件重新送检，召回原因及影响分析
  }
  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.changeApplyName = '证书/报告补充或更换申请单' // 申请单名称
  }
})

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

<template>
  <div class="business-certManage-apply">
    <detail-block title="">
      <el-form
        ref="ruleFormRef"
        :model="form"
        :label-width="134"
        label-position="right"
        :rules="rules"
      >
        <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="changeApplyNo">
              <el-input
                v-model="form.changeApplyNo"
                :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请单名称:" prop="changeApplyName">
              <el-input
                v-model="form.changeApplyName"
                :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-col :span="6">
            <el-form-item label="更换证书编号" prop="changeReportNo">
              <el-input
                v-model="form.changeReportNo"
                :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="changeReportName">
              <el-input
                v-model="form.changeReportName"
                :placeholder="pageType === 'detail' ? ' ' : '更换证书/报告名称'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="变更类型:" prop="changeType">
              <el-radio-group v-model="form.changeType" :disabled="pageType === 'detail'">
                <el-radio label="1">
                  补充
                </el-radio>
                <el-radio label="2">
                  更换
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>
    <detail-block title="补充/更换原因及影响分析">
      <el-row>
        <el-col :span="24">
          <el-input
            v-model="form.changeAnalysis"
            :rows="4"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 20 }"
            :placeholder="pageType === 'detail' ? '' : '请输入补充/更换原因及影响分析'"
            :class="{ 'detail-input': pageType === 'detail' }"
            :disabled="pageType === 'detail'"
          />
        </el-col>
      </el-row>
    </detail-block>
    <detail-block title="如果召回被测件、被校件或被检件重新送检，召回原因及影响分析">
      <el-row>
        <el-col :span="24">
          <el-input
            v-model="form.recallAnalysis"
            :rows="4"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 20 }"
            :placeholder="pageType === 'detail' ? '' : '请输入如果召回被测件、被校件或被检件重新送检，召回原因及影响分析'"
            :class="{ 'detail-input': pageType === 'detail' }"
            :disabled="pageType === 'detail'"
          />
        </el-col>
      </el-row>
    </detail-block>
    <!-- 选择证书组件  -->
    <select-cert-dialog ref="selectCertDialogRef" @confirm="confirmSelect" />
  </div>
</template>

<style lang="scss">
.business-certManage-apply {
  .el-radio__label {
    display: block !important;
  }
}
</style>