<!-- 证书报告新增、详情、编辑 -->
<script lang="ts" setup name="ReportOnCredentialsAdd">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import dayjs from 'dayjs'
import type { IFileList, columnsType } from '../report_interface'
import selectMeasureDevice from '../../components/selectMeasureDevice.vue'
import SelectFiles from '../../components/selectFiles.vue'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'
import { getStaffList } from '@/api/measure/person'
import {
  getStandardLisAdd,
  getStandardLisdetali,
  getStandardListDetail,
  getUsersDept,
  submitStandardEquipmentApply,
  updateStandardEquipmentApply,
} from '@/api/device/standard'
import { UploadFile } from '@/api/measure/file'
import useUserStore from '@/store/modules/user'
import showPhoto from '@/views/system/tool/showPhoto.vue'
import { submitApproval } from '@/api/approval'
import { addReport } from '@/api/business/lab/report'
import type { fixedAssetsType } from '@/views/device/standingBook/standingBook-interface'
import type { fileListType } from '@/views/measure/file/file-interface'

const infoId = ref('') // id
const buttonArray = ref<string[]>([]) // 顶部按钮数组
const pageType = ref('add') // 页面类型: add,edit, detail
const buttonLoading = ref(false) // 按钮加载状态
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '查看',
} // 字典
const selectIndex = ref() // 所用设备表格-点击选择的index--点击第几行
const selectFliesIndex = ref() // 技术文件表格-点击选择的index---点击第几行
const checkoutMeasureDeviceList = ref([]) // 所用设备多选
const checkoutFilesList = ref([]) // 技术文件多选
const measureDeviceVisible = ref(false) // 控制选择测量设备对话框显隐
const filesVisible = ref(false) // 控制选择技术文件对话框显隐
// 从路由中获取页面类型参数
const $route = useRoute()
const formId = ref<string>('')
const { username } = useUserStore()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  formId.value = $route.query.formId as string
  if (pageType.value === 'add') {
    buttonArray.value = ['提交', '保存']
  }
  else if (pageType.value === 'edit') {
    buttonArray.value = ['保存']
  }
  else {
    buttonArray.value = ['同意', '驳回', '拒绝']
  }
  if ($route.query.id) {
    infoId.value = $route.query.id as string
  }
}
const ruleFormRef = ref<FormInstance>()
// 逻辑代码
const formInline = ref({
  approvalSignId: '', // 认可标志专用章id
  approvalSignName: '', // 认可标志专用章名称
  approvalStatus: '', // 审批状态
  calibrationMajor: '', // 检校专业
  calibrationMajorName: '', // 检校专业名称
  certificateReportCategory: '', // 证书类别
  certificateReportCode: '', // 证书报告编号
  certificateReportFile: '', // 证书报告附件
  certificateReportName: '', // 证书报告名称
  expirationDate: '', // 证书有效期
  issuanceDate: '', // 出具日期
  measureDeptId: '', // 检定部门id
  measurePersonId: '', // 检定人员
  measureResult: '', // 检定结果
  orderId: '', // 委托书id
  originalRecordId: '', // 原始记录id
  printNum: '', // 	打印次数
  printStatus: '', // 	可打印状态
  processId: '', // 	流程实例id
  sampleId: '', // 	样品id
  signId: '', // 	电子签章id
  signName: '', // 	电子签章名称
  remark: '', // 证书报告备注
  templateId: '', // 证书报告模板id
  templateName: '', // 证书报告模板名称
  businessOriginalRecord: {
    calibrationPlace: '', // 检校地点
    originalRecordNo: '', // 原始记录编号
    businessEnvironmentRecord: { // 环境记录单
      temperature: '', // 环境记录单温度
      humidity: '', // 环境记录单相对湿度
      environmentCode: '', // 环境记录单编号
    }, // 环境记录单信息
    customerSampleInfo: { // 样品信息
      sampleNo: '', // 样品编号
      sampleName: '', // 样品名称
      manufacturingNo: '', // 出厂编号
      sampleModel: '', // 型号
      manufacturer: '', // 生产厂家
      deliverer: '', // 送检人
      delivererTel: '', // 送检人联系方式
      measureContent: '', // 检定项目
    },
    businessOrder: { // 委托书
      orderCode: '', // 委托书编号
      customerNo: '', // 委托方代码
      customerName: '', // 委托方名称
      customerPhone: '', // 委托方电话
      customerAddress: '', // 委托方地址
      planDeliverTime: '', // 预计送达时间
      requireOverTime: '', // 要求检完时间
    },
  } as any, // 原始记录
  equipmentInfoList: [] as any, // 测量设备
  fileList: [] as any, // 技术文件
})

// 下拉框数组类型
interface IOptions {
  id: string
  name: string
  value: string
  organizeName: string
  deptId: string
}
interface standardOwnerOptionsType {
  id: string
  name: string
}
// 标准所在部门下拉框
const standardUsersDeptList = ref<IOptions[]>([])
const approvalDialog = ref()
const params = ref({
  director: '',
  meterMajor: '',
  createEndTime: '',
  createstartTime: '',
  organizeName: '',
  organizeNo: '',
  organizeType: '2',
  pdeptId: null,
  offset: 1,
  limit: 999999,
})
// 获取部门信息
getUsersDept(params.value).then((res) => {
  standardUsersDeptList.value = res.data.rows
})
const standardOwnerOptions = ref<standardOwnerOptionsType[]>([])
// 获取到标准负责人数组
const getStandardOwnerOptions = () => {
  const params = {
    staffNo: '', // 人员编号
    name: '', // 姓名
    deptId: '', // 工作部门
    major: '', // 计量专业
    verifierCertificateNo: '', // 证书号
    certificateStatus: '', // 证书状态
    limit: 100000,
    offset: 1,
  }
  getStaffList(params).then((res) => {
    standardOwnerOptions.value = res.data.records
  })
}
// 审批弹窗开关
const applyShow = ref(false)
// 审批弹窗信息收集类型
interface applyListType {
  select: string
  epilog: string
  approval: string
  approvalTime: string
}
// 审批弹窗信息收集
const applyList = ref<applyListType>({
  select: '',
  epilog: '',
  approval: '',
  approvalTime: '',
})

// 所用设备表头
const columns = ref<columnsType[]>([
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
    width: '240',
    required: true,
    choose: true,
    time: false,
  },
  {
    text: '设备编号',
    value: 'equipmentNo',
    align: 'center',
    width: '160',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '型号',
    value: 'modelNo',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '出厂编号',
    value: 'manufacturingNo',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '证书有效期',
    value: 'validDate',
    width: '120',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
])

// 所依据的技术文件表头
const columnsFiles = ref<columnsType[]>([
  {
    text: '文件编号',
    value: 'fileNo',
    align: 'center',
    width: '240',
    required: true,
    choose: true,
    time: false,
  },
  {
    text: '文件名称',
    value: 'fileName',
    align: 'center',
    required: true,
    choose: false,
    time: true,
  },
  {
    text: '文件代号',
    value: 'fileCode',
    align: 'center',
    required: true,
    time: false,
    choose: false,
  },
])

getStandardOwnerOptions()
// 初始化路由
const $router = useRouter()

// 关闭
const close = () => {
  $router.back()
}
// 表单验证规则
const rules = ref({
  'calibrationMajor': [{ required: true, message: '检校专业不能为空', trigger: ['blur', 'change'] }],
  'certificateReportCode': [{ required: true, message: '证书编号不能为空', trigger: ['blur', 'change'] }],
  'certificateReportName': [{ required: true, message: '证书名称不能为空', trigger: ['blur', 'change'] }],
  'issuanceDate': [{ required: true, message: '出具日期不能为空', trigger: ['blur', 'change'] }],
  'templateName': [{ required: true, message: '证书报告模板不能为空', trigger: ['blur', 'change'] }],
  'signName': [{ required: true, message: '电子签章不能为空', trigger: ['blur', 'change'] }],
  'approvalSignName': [{ required: true, message: '认可标志专用章不能为空', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.originalRecordNo': [{ required: true, message: '原始记录编号不能为空', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.customerSampleInfo.sampleNo': [{ required: true, message: '样品编号不能为空', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.customerSampleInfo.sampleName': [{ required: true, message: '样品名称不能为空', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.customerSampleInfo.sampleModel': [{ required: true, message: '型号不能为空', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.customerSampleInfo.manufacturer': [{ required: true, message: '生产厂家不能为空', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.businessEnvironmentRecord.temperature': [{ required: true, message: '温度(℃)不能为空', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.businessEnvironmentRecord.humidity': [{ required: true, message: '相对湿度(%)不能为空', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.customerSampleInfo.manufacturingNo': [{ required: true, message: '出厂编号不能为空', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.businessOrder.customerNo': [{ required: true, message: '委托方代码不能为空', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.businessOrder.customerName': [{ required: true, message: '委托方名称不能为空', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.businessOrder.customerPhone': [{ required: true, message: '委托方电话不能为空', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.businessOrder.customerAddress': [{ required: true, message: '委托方地址不能为空', trigger: ['blur', 'change'] }],
  'businessOriginalRecord.customerSampleInfo.measureContent': [{ required: true, message: '检定项目不能为空', trigger: ['blur', 'change'] }],
})

const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  // 原生上传
  console.log(event.target.files)
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        formInline.value.certificateReportFile = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
      }
      else {
        ElMessage.error(res.message)
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}

// 获取详情信息
const getInfo = (id: string | number) => {
  getStandardLisdetali({ id }).then((res) => {
    Object.keys(res.data).map((item) => {
      if (typeof res.data[item] === 'number') {
        res.data[item] = res.data[item].toString()
      }
    })
    formInline.value = res.data.meterStandardEquipment
    fromListInfo.value.fixedAssetsList = res.data.fixedAssetsList
    fromListInfo.value.fileList = res.data.fileList.map((item: IFileList) => {
      item.choose = true
      return item
    })
  })
}
if (pageType.value !== 'add') {
  getInfo(infoId.value)
}

// 取消
const handleCancel = () => {
  const params = {
    taskId: fromListInfo.value.taskId!,
    comments: '',
  }
  ElMessageBox.confirm('确认取消该审批吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    submitApproval('revoke', params).then((res) => {
      ElMessage({
        type: 'success',
        message: '取消成功',
      })
    })
  })
}
// 点击数据后的操作按钮
const clickBtn = (buttonType: string) => {
  switch (buttonType) {
    case '同意':
      approvalDialog.value.initDialog('agree', fromListInfo.value.taskId)
      break
    case '驳回':
      approvalDialog.value.initDialog('reject', fromListInfo.value.taskId)
      break
    case '拒绝':
      approvalDialog.value.initDialog('refuse', fromListInfo.value.taskId)
      break
    case '取消':
      handleCancel()
      break
  }
}

// 保存后的id
const addId = ref('')
// 点击顶部一排按钮
const getAddList = async (item: string, formEl: FormInstance | undefined) => {
  if (item === '保存' && pageType.value === 'add') {
    if (!formEl) {
      return
    }
    await formEl.validate((valid, fields) => {
      if (valid) {
        ElMessageBox.confirm('确认保存吗？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          getStandardLisAdd(fromListInfo.value).then((res) => {
            if (res.code === 200) {
              ElMessage.success('保存成功')
              addId.value = res.data.id
            }
          })
        })
      }
    })
  }
  else if (item === '保存' && pageType.value === 'edit') {
    if (!formEl) {
      return
    }
    await formEl.validate((valid, fields) => {
      if (valid) {
        ElMessageBox.confirm('确认保存吗？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          updateStandardEquipmentApply(fromListInfo.value).then((res) => {
            if (res.code === 200) {
              ElMessage.success('保存成功')
              addId.value = res.data.id
            }
          })
        })
      }
    })
  }
  else if (item === '提交') {
    if (addId.value === '') {
      ElMessage.warning('请先保存')
    }
    else {
      submitStandardEquipmentApply({
        id: addId.value,
        formId: formId.value,
      }).then((res) => {
        if (res.code === 200) {
          close()
        }
      })
    }
  }
  else {
    clickBtn(item)
  }
}
// 审批流程模拟数据
const approvalActivities = [
  {
    name: '张三',
    deptName: '审计局',
    content: '同意',
    timestamp: '2018-04-15 08:00:00',
  },
  {
    name: '张三',
    content: 'Approved',
    timestamp: '2018-04-13',
  },
  {
    name: '张三',
    content: 'Success',
    timestamp: '2018-04-11',
  },
]
// 审批完成后的回调
const approvalSuccess = () => {}
watch(
  () => formInline.value,
  (newVal) => {
    // 变化后存储
  },
  { deep: true, immediate: true },
)
// 审批弹窗的关闭
const applyListClose = () => {
  applyShow.value = false
}
// 审批弹窗的提交
const applyListSubmit = () => {
  console.log(applyList.value)
  if (applyList.value.select == '') {
    return ElMessage.error('必须选择审批意见')
  }
  applyListClose()
}
// 标准装置发生改变data类型
interface dataReturn {
  id: string
}
// 获取详情信息
const getStandarInfo = (id: string | number) => {
  getStandardListDetail({ id }).then((res) => {
    Object.keys(res.data).map((item) => {
      if (typeof res.data[item] === 'number') {
        res.data[item] = res.data[item].toString()
      }
    })
    formInline.value = res.data
  })
}

// ----------------------------------------所用设备-------------------------------------
// 点击所用设备增加行
const addMeasureDeviceRow = () => {
  const index = formInline.value.equipmentInfoList.findIndex((item: fixedAssetsType) =>
    !item.equipmentNo && !item.equipmentName)
  if (index !== -1) {
    ElMessage.warning('请完善上一条设备信息')
    return
  }
  formInline.value.equipmentInfoList.push({
    equipmentName: '', // 设备名称
    equipmentNo: '', // 设备编号
    modelNo: '', // 型号
    validDate: '', // 有效日期
    manufacturingNo: '', // 出厂编号
  })
}

const handleSelectionChangeMeasureDevice = (e: any) => {
  checkoutMeasureDeviceList.value = e
}

// 点击所用设备删除行
const delMeasureDeviceRow = () => {
  if (checkoutMeasureDeviceList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutMeasureDeviceList.value.forEach((item: fixedAssetsType) => {
      formInline.value.equipmentInfoList.forEach((element: fixedAssetsType, index: number) => {
        if (element.equipmentNo === item.equipmentNo) {
          formInline.value.equipmentInfoList.splice(index, 1)
        }
      })
    })
  }
}

// 点击选择测量设备编号
const handleClickMeasureDevice = (index: number) => {
  measureDeviceVisible.value = true
  selectIndex.value = index
}
// 修改测量设备对话框显隐
const changeMeasureDeviceVisible = (val: boolean) => {
  measureDeviceVisible.value = val
}
// 选好测量设备
const confirmCheckoutMeasureDevice = (val: any) => {
  if (val && val.length) {
    const index = formInline.value.equipmentInfoList.findIndex((i: fixedAssetsType) => val[0].equipmentNo === i.equipmentNo)
    if (index !== -1) {
      ElMessage.warning('此设备已添加过')
      return
    }
    formInline.value.equipmentInfoList.splice(selectIndex.value, 1, val[0])
  }
}

// ------------------------------------------技术文件----------------------------------
// 点击技术文件增加行
const addFilesRow = () => {
  console.log(formInline.value.fileList)

  const index = formInline.value.fileList.findIndex((item: fileListType) =>
    !item.fileNo && !item.fileName)
  if (index !== -1) {
    ElMessage.warning('请完善上一条文件信息')
    return
  }
  formInline.value.fileList.push({
    fileNo: '', // 编号
    fileName: '', // 名称
    fileCode: '', // 文件号
  })
}

// 技术文件表格多选
const handleSelectionChangeFiles = (e: any) => {
  checkoutFilesList.value = e
}
// 点击技术文件删除行
const delFilesRow = () => {
  if (checkoutFilesList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutFilesList.value.forEach((item: fileListType) => {
      formInline.value.fileList.forEach((element: fileListType, index: number) => {
        if (element.fileNo === item.fileNo) {
          formInline.value.fileList.splice(index, 1)
        }
      })
    })
  }
}

// 点击选择文件编号
const handleClickFiles = (index: number) => {
  filesVisible.value = true
  selectFliesIndex.value = index
}
// 修改技术文件对话框显隐
const changeFilesVisible = (val: boolean) => {
  filesVisible.value = val
}
// 选好测量设备
const confirmCheckoutFiles = (val: any) => {
  if (val && val.length) {
    const index = formInline.value.fileList.findIndex((i: fileListType) => val[0].fileNo === i.fileNo)
    if (index !== -1) {
      ElMessage.warning('此文件已添加过')
      return
    }
    formInline.value.fileList.splice(selectFliesIndex.value, 1, val[0])
  }
}

// -------------------------------------------底部-------------------------------------------
</script>

<template>
  <app-container>
    <detail-page :title="`证书报告 -- ${textMap[pageType]}`">
      <template #btns>
        <el-button
          v-for="(item, index) in buttonArray"
          :key="index"
          type="primary"
          @click="getAddList(item, ruleFormRef)"
        >
          {{ item }}
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="formInline"
        label-position="right"
        label-width="auto"
        :rules="rules"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="检校专业:" prop="calibrationMajor">
              <el-select
                v-model="formInline.calibrationMajor"
                clearable
                :placeholder="pageType === 'detail' ? '' : '请选择检校专业'"
                size="default"
                style="width: 100%;"
                :disabled="pageType === 'detail'"
              >
                <el-option
                  v-for="item in standardOwnerOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出具日期:" prop="issuanceDate">
              <el-date-picker
                v-model="formInline.issuanceDate"
                type="date"
                style="width: 100%;"
                clearable
                :placeholder="pageType === 'detail' ? '' : '请选择出具日期'"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书编号:" prop="certificateReportCode">
              <el-input
                v-model.trim="formInline.certificateReportCode"
                :placeholder="pageType === 'detail' ? '' : '请输入证书编号'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书报告名称:" prop="certificateReportName">
              <el-input
                v-model.trim="formInline.certificateReportName"
                :placeholder="pageType === 'detail' ? '' : '请输入证书报告名称'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书报告模板:" prop="templateName">
              <el-input
                v-model.trim="formInline.templateName"
                :placeholder="pageType === 'detail' ? '' : '请选择证书报告模板'"
                class="full-width-input"
                :disabled="pageType === 'detail'"
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电子签章:" prop="signName">
              <el-input
                v-model.trim="formInline.signName"
                :placeholder="pageType === 'detail' ? '' : '请选择电子签章'"
                class="full-width-input"
                :disabled="pageType === 'detail'"
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="认可标志专用章:" prop="approvalSignName">
              <el-input
                v-model.trim="formInline.approvalSignName"
                :placeholder="pageType === 'detail' ? '' : '请选择认可标志专用章'"
                class="full-width-input"
                :disabled="pageType === 'detail'"
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="原始记录编号:" prop="businessOriginalRecord.originalRecordNo">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.originalRecordNo"
                :placeholder="pageType === 'detail' ? '' : '请选择原始记录编号'"
                class="full-width-input"
                :disabled="pageType === 'detail'"
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检校地点:" prop="businessOriginalRecord.calibrationPlace">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.calibrationPlace"
                :placeholder="pageType === 'detail' ? '' : '请输入检校地点'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="温度(℃):" prop="businessOriginalRecord.businessEnvironmentRecord.temperature">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.businessEnvironmentRecord.temperature"
                :placeholder="pageType === 'detail' ? '' : '请输入温度(℃)'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="相对湿度(%):" prop="businessOriginalRecord.businessEnvironmentRecord.humidity">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.businessEnvironmentRecord.humidity"
                :placeholder="pageType === 'detail' ? '' : '请输入相对湿度(%)'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="样品编号:" prop="businessOriginalRecord.customerSampleInfo.sampleNo">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.sampleNo"
                :placeholder="pageType === 'detail' ? '' : '请输入样品编号'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="样品名称:" prop="businessOriginalRecord.customerSampleInfo.sampleName">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.sampleName"
                :placeholder="pageType === 'detail' ? '' : '请输入样品名称'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出厂编号:" prop="businessOriginalRecord.customerSampleInfo.manufacturingNo">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.manufacturingNo"
                :placeholder="pageType === 'detail' ? '' : '请输入出厂编号'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="型号:" prop="businessOriginalRecord.customerSampleInfo.sampleModel">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.sampleModel"
                :placeholder="pageType === 'detail' ? '' : '请输入型号'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产厂家:" prop="businessOriginalRecord.customerSampleInfo.manufacturer">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.manufacturer"
                :placeholder="pageType === 'detail' ? '' : '请输入生产厂家'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托方代码:" prop="businessOriginalRecord.businessOrder.customerNo">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.businessOrder.customerNo"
                :placeholder="pageType === 'detail' ? '' : '请输入委托方代码'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托方名称:" prop="businessOriginalRecord.businessOrder.customerName">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.businessOrder.customerName"
                :placeholder="pageType === 'detail' ? '' : '请输入委托方名称'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托方电话:" prop="businessOriginalRecord.businessOrder.customerPhone">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.businessOrder.customerPhone"
                :placeholder="pageType === 'detail' ? '' : '请输入委托方电话'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="委托方地址:" prop="businessOriginalRecord.businessOrder.customerAddress">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.businessOrder.customerAddress"
                :placeholder="pageType === 'detail' ? '' : '请输入委托方地址'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="送检人:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.deliverer"
                :placeholder="pageType === 'detail' ? '' : '请输入送检人'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式:">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.delivererTel"
                :placeholder="pageType === 'detail' ? '' : '请输入联系方式'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预计送达时间:">
              <el-date-picker
                v-model="formInline.businessOriginalRecord.businessOrder.planDeliverTime"
                type="datetime"
                style="width: 100%;"
                clearable
                :placeholder="pageType === 'detail' ? '' : '请选择预计送达时间'"
                format="YYYY-MM-DD hh:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss a"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="要求检完时间:">
              <el-date-picker
                v-model="formInline.businessOriginalRecord.businessOrder.requireOverTime"
                type="datetime"
                style="width: 100%;"
                :placeholder="pageType === 'detail' ? '' : '请选择预计送达时间'"
                format="YYYY-MM-DD hh:mm:ss"
                clearable
                value-format="YYYY-MM-DD HH:mm:ss a"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="检定项目:" prop="businessOriginalRecord.customerSampleInfo.measureContent">
              <el-input
                v-model.trim="formInline.businessOriginalRecord.customerSampleInfo.measureContent"
                :placeholder="pageType === 'detail' ? '' : '请输入检定项目'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备注:">
              <el-input
                v-model.trim="formInline.remark"
                :placeholder="pageType === 'detail' ? '' : '请输入备注'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="证书报告附件:">
              <show-photo v-if="formInline.certificateReportFile" :minio-file-name="formInline.certificateReportFile" />
              <span v-else-if="pageType === 'detail'">无</span>
              <input v-show="pageType === ''" ref="fileRef" type="file" @change="onFileChange">
              <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': formInline.certificateReportFile === '' ? '0px' : '20px' }" @click="upload">
                {{ formInline.certificateReportFile === '' ? '上传' : '更换附件' }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title=" 所用设备">
      <template v-if="pageType !== 'detail'" #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="addMeasureDeviceRow">
          增加行
        </el-button>
        <el-button
          v-if="pageType !== 'detail'"
          type="info"
          @click="delMeasureDeviceRow"
        >
          删除行
        </el-button>
      </template>
      <el-table
        :data="formInline.equipmentInfoList"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChangeMeasureDevice"
      >
        <el-table-column
          v-if="pageType !== 'detail'"
          type="selection"
          width="38"
        />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          align="center"
        >
          <template #header>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </template>
          <template
            v-if="item.text === '设备名称' && pageType !== 'detail'"
            #default="scope"
          >
            <el-input
              v-model="scope.row[item.value]"
              :placeholder="`${item.text}`"
              class="input"
            >
              <template v-if="item.choose" #append>
                <el-button
                  v-if="pageType !== 'detail'"
                  size="small"
                  type="primary"
                  @click="handleClickMeasureDevice(scope.$index)"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
    <detail-block title="所依据的技术文件">
      <template v-if="pageType !== 'detail'" #btns>
        <el-button type="primary" @click="addFilesRow">
          增加行
        </el-button>
        <el-button type="info" @click="delFilesRow">
          删除行
        </el-button>
      </template>
      <el-table
        :data="formInline.fileList"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChangeFiles"
      >
        <el-table-column
          v-if="pageType !== 'detail'"
          type="selection"
          width="38"
        />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columnsFiles"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          align="center"
        >
          <template #header>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </template>
          <template
            v-if="item.text === '文件编号' && pageType !== 'detail'"
            #default="scope"
          >
            <el-input
              v-model="scope.row[item.value]"
              :placeholder="`${item.text}`"
              class="input"
            >
              <template v-if="item.choose" #append>
                <el-button
                  v-if="pageType !== 'detail'"
                  size="small"
                  @click="handleClickFiles(scope.$index)"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
    <div v-if="pageType === 'detail'">
      <detail-block title="审批流程">
        <!-- 审批流程 -->
        <div>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in approvalActivities"
              :key="index"
              :timestamp="activity.timestamp"
            >
              <div>
                <span>审批人：</span>{{ activity.name }}
                <span style="margin-left: 10px;">审批意见：</span>{{ activity.content }}
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </detail-block>
    </div>
  </app-container>
  <!-- 审批弹窗信息收集 -->
  <approval-dialog ref="approvalDialog" @on-success="approvalSuccess" />
  <!-- 选择设备弹窗 -->
  <select-measure-device v-model:visible="measureDeviceVisible" @confirm-checkout="confirmCheckoutMeasureDevice" @change-visible="changeMeasureDeviceVisible" />
  <!-- 选择所依据的技术文件（在用的计量规程） -->
  <select-files v-model:visible="filesVisible" @confirm-checkout="confirmCheckoutFiles" @change-visible="changeFilesVisible" />
</template>

<style lang="scss">
.el-upload-list {
  display: none !important;
}
</style>