<!-- 证书审批提醒 基本信息 -->
<script name="taskMeasureCertificateBasic" lang="ts" setup>
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { ElLoading, ElMessage } from 'element-plus'
import type { FormRules } from 'element-plus'
import type { IForm, IMesureResult, IUsedEquipmentList } from '../certificate-interface'
import useUserStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import { getUserList } from '@/api/system/user'
import type { dictType } from '@/global'
import { UploadFile } from '@/api/file'
import { useCheckList } from '@/commonMethods/useCheckList'
import selectUsedEquipmentDialog from '@/views/business/manager/order/dialog/selectEquipment.vue'
import { useDoubleClickTableRow, useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable'
const props = defineProps({
  pageType: { // 页面类型 add新建 edit编辑 detail详情
    type: String,
    default: 'detail',
  },
})
const user = useUserStore() // 用户信息
const form: Ref<IForm> = ref({ // 基本信息表单
  certificateReportCode: '', // 证书报告编号
  measureCategory: '', // 检校类别
  measurePersonName: '', // 检定员
  calibrationTime: '', // 		检校时间
  orderCode: '', // 任务单编号
  temperature: 0, // 温度
  humidity: 0, // 湿度
  environmentCode: '', // 环境记录单编号
  environmentId: '', // 环境记录单id
  mesureDate: '', // 检定时间
  jsyxq: '', // 检定有效期
  calibrationPlace: '', // 检校地点
  ckbz: '', // 参考标准
  jdjg: '', // 检定结果
  xyfw: '', // 限用范围
  jdjl: '', // 检定结论

  customerId: '', // 委托方id
  customerNo: '', // 委托方代码
  customerName: '', // 委托方名称
  deliverer: '', // 送检人
  phone: '', // 委托方电话
  planDeliverTime: '', // 预计送达时间
  requireOverTime: '', // 要求检完时间
  isUrgent: '', // 是否加急
  customerAddress: '', // 委托方地址

  ysjltemplateId: '', // 	原始记录模板id
  originalRecordName: '', // 原始记录模板名称
  ysjlfj: '', // 原始记录附件
  certificateReportName: '', // 证书报告名称
  zsbgtemplateId: '', // 证书报告id
  zsbgfj: '', // 证书报告录附件
})
const rules = reactive<FormRules>({ // 表单验证规则
  measureCategory: [{ required: true, message: '检校类别不能为空', trigger: ['blur', 'change'] }],
  measurePersonName: [{ required: true, message: '检定员不能为空', trigger: ['blur', 'change'] }],
  calibrationTime: [{ required: true, message: '检定时间不能为空', trigger: ['blur', 'change'] }],
  orderCode: [{ required: true, message: '任务单编号不能为空', trigger: ['blur', 'change'] }],
  temperature: [{ required: true, message: '温度不能为空', trigger: ['blur', 'change'] }],
  humidity: [{ required: true, message: '湿度不能为空', trigger: ['blur', 'change'] }],
  mesureDate: [{ required: true, message: '检定日期不能为空', trigger: ['blur', 'change'] }],
  jsyxq: [{ required: true, message: '检定有效期不能为空', trigger: ['blur', 'change'] }],
  calibrationPlace: [{ required: true, message: '检校地点不能为空', trigger: ['blur', 'change'] }],
  ckbz: [{ required: true, message: '参考标准不能为空', trigger: ['blur', 'change'] }],
  jdjg: [{ required: true, message: '检定结果不能为空', trigger: ['blur', 'change'] }],
  xyfw: [{ required: true, message: '限用范围不能为空', trigger: ['blur', 'change'] }],
  jdjl: [{ required: true, message: '检定结论不能为空', trigger: ['blur', 'change'] }],
  originalRecordName: [{ required: true, message: '原始记录名称不能为空', trigger: ['blur', 'change'] }],
  certificateReportName: [{ required: true, message: '证书报告名称不能为空', trigger: ['blur', 'change'] }],
  ysjltemplateId: [{ required: true, message: '原始记录模板不能为空', trigger: ['blur', 'change'] }],
  zsbgtemplateId: [{ required: true, message: '证书报告模板不能为空', trigger: ['blur', 'change'] }],
})
// ------------------------------------------字典----------------------------------------------
const mesureResultMap = ref<dictType[]>([]) // 检定结果
const measureCategoryList = ref<dictType[]>([]) // 检校类别
const userList = ref<{ [key: string]: string }[]>([]) // 用户列表
const isUrgentList = ref<dictType[]>([]) // 是否加急

/**
 * 获取字典
 */
function getDict() {
  // 检定结果
  getDictByCode('mesureResult').then((response) => {
    mesureResultMap.value = response.data
  })
  // 检校类别
  getDictByCode('measureCategory').then((response) => {
    measureCategoryList.value = response.data
  })
  // 获取用户列表
  getUserList({ offset: 1, limit: 999999 }).then((res: any) => {
    userList.value = res.data.rows
  })
  // 是否加急
  getDictByCode('isUrgent').then((response) => {
    isUrgentList.value = response.data
  })
}
// ------------------------------------------被检件信息-------------------------------------------
const equipmentRef = ref() // 选择任务单下的设备组件ref
const equipmentColumns = [ // 被检件信息表头
  { text: '统一编号', value: 'equipmentNo', align: 'center', width: '240', disabled: true, required: true },
  { text: '设备名称', value: 'equipmentName', align: 'center', required: false },
  { text: '型号规格', value: 'model', align: 'center', required: false },
  { text: '附件', value: 'fj', align: 'center', required: false },
  { text: '外观和功能检查', value: 'wghgnjc', align: 'center', required: false },
  { text: '特殊要求', value: 'tsyq', align: 'center', required: false },
  { text: '检校项目', value: 'jjxm', align: 'center', required: false },
]
const equipmentList = ref([{ // 表格
  equipmentNo: '', // 统一编号
  equipmentName: '', // 设备名称
  model: '', // 型号规格
  fj: '', // 附件
  wghgnjc: '', // 外观和功能检查
  tsyq: '', // 特殊要求
  jjxm: '', // 检校项目
}])

// 点击选择设备
const selectEquipment = (index: number) => {
  equipmentRef.value.initDialog()
}

// 选好设备
const confirmSelectTechFile = (val: any) => {
  if (val && val.length) {
    equipmentList.value = [{
      equipmentNo: val[0].equipmentNo, // 统一编号
      equipmentName: val[0].equipmentName, // 设备名称
      model: val[0].model, // 型号规格
      fj: val[0].fj, // 附件
      wghgnjc: val[0].wghgnjc, // 外观和功能检查
      tsyq: val[0].tsyq, // 特殊要求
      jjxm: val[0].jjxm, // 检校项目
    }]
  }
}
// ------------------------------------------所使用的标准、主要测量设备----------------------------------------
const usedEquipmentColumns = [ // 表头
  { text: '统一编号', value: 'equipmentNo', align: 'center', width: '240', disabled: true, required: true },
  { text: '设备名称', value: 'equipmentName', align: 'center', required: false },
  { text: '型号规格', value: 'model', align: 'center', required: false },
  { text: '出厂编号', value: 'manufactureNo', align: 'center', required: false },
  { text: '不确定度或允许误差极限或准确度等级', value: 'level', align: 'center', required: false },
  { text: '证书有效期', value: 'expirationDate', align: 'center', required: false },
]
const selectUsedEquipmentRef = ref() // 选择设备组件ref
const selectUsedEquipmentIndex = ref(0) // 选择的第几列
const checkoutUsedEquipmentList = ref<IUsedEquipmentList[]>([]) // 选中的内容
const usedEquipmentList = ref<IUsedEquipmentList[]>([]) // 表格数据

// 多选发生改变时
const handleSelectionUsedEquipmentChange = (e: any) => {
  checkoutUsedEquipmentList.value = e
}

// 点击选择
const selectUsedEquipment = (index: number) => {
  selectUsedEquipmentIndex.value = index
  selectUsedEquipmentRef.value.initDialog(false)
}

// 增加行
const addUsedEquipmentRow = () => {
  const checkResult = useCheckList(usedEquipmentList.value, usedEquipmentColumns, '所使用的标准、主要测量设备') // 检查表格
  if (checkResult) {
    useSetAllRowReadable(usedEquipmentList.value)
    usedEquipmentList.value.push({
      id: '', // 主键
      equipmentNo: '', // 统一编号
      equipmentName: '', // 设备名称
      model: '', // 型号规格
      manufactureNo: '', // 出厂编号
      level: '', // 不确定度或允许误差极限或准确度等级
      expirationDate: '', // 证书有效期
    })
  }
}

// 选好设备
const clickConfirmUsedEquipment = (val: Array<IUsedEquipmentList>) => {
  const getValue = val[0]
  const index = usedEquipmentList.value.findIndex((i: IUsedEquipmentList) => val[0].equipmentNo === i.equipmentNo)
  if (index !== -1) {
    ElMessage.warning('此设备已添加过')
    return
  }
  usedEquipmentList.value.splice(selectUsedEquipmentIndex.value, 1, getValue)
}

// 删除行
const delUsedEquipmentRow = () => {
  if (checkoutUsedEquipmentList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutUsedEquipmentList.value.forEach((item: IUsedEquipmentList) => {
      usedEquipmentList.value.forEach((element, index) => {
        if (element.equipmentNo === item.equipmentNo) {
          usedEquipmentList.value.splice(index, 1)
        }
      })
    })
  }
}

// -----------------------------------------检定结果信息-------------------------------------
const mesureResultRef = ref() // 检定结果信息表格ref
const mesureResultList = ref<IMesureResult[]>([]) // 表格数据
const checkoutMesureResultList = ref<IMesureResult[]>([]) // 多选数据
const addMesureResultObj: IMesureResult = { // IMesureResult对象
  executiveItem: '', // 检定项目
  jdd: '', // 检定点
  dw: '', // 单位
  cs: '', // 次数
  sx: '', // 上限
  xx: '', // 下限
  sdz: '', // 设定值
  csz: '', // 测试值
  bqdd: '', // 不确定度
  remark: '', // 备注
  editable: props.pageType !== 'detail',
}
const mesureResultColumns = [ // 检定结果信息
  { text: '检定项目', value: 'executiveItem', required: false },
  { text: '检定点', value: 'jdd', required: false },
  { text: '单位', value: 'dw', required: false },
  { text: '次数', value: 'cs', required: false, width: '180' },
  { text: '上限', value: 'sx', required: false },
  { text: '下限', value: 'xx', required: false },
  { text: '设定值', value: 'sdz', required: false },
  { text: '测试值', value: 'csz', required: false },
  { text: '不确定度', value: 'bqdd', required: false },
  { text: '备注', value: 'remark', required: false },
]

// 多选发生改变时
const handleSelectionMesureResultChange = (e: any) => {
  checkoutMesureResultList.value = e
}

/**
 * 点击增加行
 * @param val 操作的表格类型
 */
const addMesureResultRow = () => {
  if (useCheckList(mesureResultList.value, mesureResultColumns, '检定结果信息')) {
    useSetAllRowReadable(mesureResultList.value)
    mesureResultList.value.push({ ...addMesureResultObj })
  }
}

/**
 * 点击删除行
 * @param val 操作的表格类型 tech技术指标、accessory主附件信息、inspect核查点
 */
const deleteMesureResultRow = () => {
  if (checkoutMesureResultList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
    return false
  }

  mesureResultList.value = mesureResultList.value.filter((item: IMesureResult) => {
    return !checkoutMesureResultList.value.includes(item)
  })
}

// 双击行
const rowDblclick = (row: IMesureResult) => {
  useDoubleClickTableRow(row, mesureResultList.value)
}
// -------------------------------------原始记录、证书报告----------------------------------
// ==================文件上传===================
const originalRecordFileRef = ref() // 原始记录ref
const certificateReportFileRef = ref() // 证书报告ref
const onFileOriginalRecordChange = (event: any) => { // 原始记录上传
  // 原生上传
  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) {
        form.value.ysjlfj = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
      }
      else {
        ElMessage.error(res.message)
      }
    })
  }
}
const originalRecordUpload = () => {
  originalRecordFileRef.value.click()
}

const onFileCertificateReportChange = (event: any) => { // 证书报告上传
  // 原生上传
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        form.value.zsbgfj = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}
const certificateReportUpload = () => {
  certificateReportFileRef.value.click()
}
// ==================生成表单按钮===================
// 点击生成表单
const createForm = () => {
  ElMessage.info('敬请期待')
}
// -------------------------------------------任务单----------------------------------------------
// 点击选择任务单
const selectOrder = () => {

}
// -------------------------------------------环境记录单--------------------------------------------
// 点击选择环境记录单
const selectEnvironment = () => {

}
// -------------------------------------------原始记录---------------------------------------------
// 点击选择原始记录
const selectOriginalRecord = () => {

}
// -------------------------------------------证书报告---------------------------------------------
// 点击选择证书报告
const selectCertificateReport = () => {

}
// -------------------------------------------钩子------------------------------------------------

onMounted(async () => {
  await getDict() // 获取字典
})
</script>

<template>
  <detail-block title="">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="120"
      label-position="right"
      :rules="rules"
    >
      <el-row :gutter="24" class="marg">
        <el-col :span="6">
          <el-form-item label="证书报告编号:" prop="certificateReportCode">
            <el-input v-model="form.certificateReportCode" disabled placeholder="系统自动生成" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检校类别:" prop="measureCategory">
            <el-select
              v-model.trim="form.measureCategory"
              clearable
              :placeholder="pageType === 'detail' ? '' : '请选择检校类别'"
              size="default"
              :disabled="pageType === 'detail'"
              class="full-width-input"
            >
              <el-option
                v-for="item in measureCategoryList"
                :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="measurePersonName">
            <el-select
              v-model.trim="form.measurePersonName"
              placeholder="请选择检定员"
              filterable
              class="full-width-input"
            >
              <el-option v-for="item in userList" :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="calibrationTime">
            <el-date-picker
              v-model="form.calibrationTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              :placeholder="pageType === 'detail' ? ' ' : '请选择检定时间'"
              value-format="YYYY-MM-DD HH:mm:ss"
              :disabled="pageType === 'detail'"
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="任务单编号:" prop="orderCode">
            <el-input
              v-model.trim="form.orderCode"
              :placeholder="pageType === 'detail' ? ' ' : '请选择任务单编号'"
              disabled
              class="full-width-input"
              clearable
            >
              <template v-if="pageType !== 'detail'" #append>
                <el-button
                  size="small"
                  @click="selectOrder"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="环境记录单:" prop="environmentCode">
            <el-input
              v-model.trim="form.environmentCode"
              :placeholder="pageType === 'detail' ? '' : '请选择环境记录单'"
              class="full-width-input"
              disabled
            >
              <template v-if="pageType !== 'detail'" #append>
                <el-button
                  size="small"
                  @click="selectEnvironment"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="温度(℃):" prop="temperature">
            <el-input-number
              v-model.trim="form.temperature"
              :step="0.1"
              :placeholder="pageType === 'detail' ? '' : '请输入温度'"
              class="full-width-input"
              :disabled="pageType === 'detail' || form.environmentCode !== ''"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="相对湿度(%RH):" prop="humidity">
            <el-input-number
              v-model.trim="form.humidity"
              :step="0.1"
              :placeholder="pageType === 'detail' ? '' : '请输入相对湿度'"
              class="full-width-input"
              :disabled="pageType === 'detail' || form.environmentCode !== ''"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检定日期:" prop="mesureDate">
            <el-date-picker
              v-model="form.mesureDate"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              class="full-width-input"
              :placeholder="pageType === 'detail' ? ' ' : '请选择检定日期'"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检定有效期:" prop="jsyxq">
            <el-date-picker
              v-model="form.jsyxq"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              class="full-width-input"
              :placeholder="pageType === 'detail' ? ' ' : '请选择检定有效期'"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="参考标准:" prop="ckbz">
            <el-input
              v-model.trim="form.ckbz"
              :placeholder="pageType === 'detail' ? '' : '请选择参考标准'"
              class="full-width-input"
              disabled
            >
              <template v-if="pageType !== 'detail'" #append>
                <el-button
                  size="small"
                  @click="selectEnvironment"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检定结果:" prop="jdjg">
            <el-select
              v-model.trim="form.jdjg"
              clearable
              :placeholder="pageType === 'detail' ? '' : '请选择检定结果'"
              size="default"
              :disabled="pageType === 'detail'"
              class="full-width-input"
            >
              <el-option
                v-for="item in mesureResultMap"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="12">
          <el-form-item label="检校地点:" prop="calibrationPlace">
            <el-input
              v-model="form.calibrationPlace"
              type="textarea"
              autosize
              :placeholder="pageType === 'detail' ? '' : '请输入检校地点'"
              :disabled="pageType === 'detail'"
              :class="{ 'detail-input': pageType === 'detail' }"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="12">
          <el-form-item label="限用范围:" prop="xyfw">
            <el-input
              v-model="form.xyfw"
              type="textarea"
              autosize
              :placeholder="pageType === 'detail' ? '' : '请输入限用范围'"
              :disabled="pageType === 'detail'"
              :class="{ 'detail-input': pageType === 'detail' }"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="12">
          <el-form-item label="检定结论:" prop="jdjl">
            <el-input
              v-model="form.jdjl"
              type="textarea"
              autosize
              :placeholder="pageType === 'detail' ? '' : '请输入检定结论'"
              :disabled="pageType === 'detail'"
              :class="{ 'detail-input': pageType === 'detail' }"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block>
  <detail-block title="">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="120"
      label-position="right"
      :rules="rules"
    >
      <el-row :gutter="24" class="marg">
        <el-col :span="6">
          <el-form-item label="委托方" prop="customerName">
            <el-input
              v-model="form.customerName"
              placeholder=" "
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="委托方地址:">
            <el-input
              v-model="form.customerAddress"
              type="textarea"
              autosize
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否加急:" prop="isUrgent">
            <el-select v-model="form.isUrgent" placeholder=" " disabled class="full-width-input">
              <el-option
                v-for="i in isUrgentList"
                :key="i.value"
                :label="i.name"
                :value="i.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="送检人:" prop="deliverer">
            <el-input
              v-model="form.deliverer"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="电话" prop="phone">
            <el-input
              v-model="form.phone"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="预计送达时间:" prop="planDeliverTime">
            <el-date-picker
              v-model="form.planDeliverTime"
              type="datetime"
              class="full-width-input"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="要求检完时间:" prop="requireOverTime">
            <el-date-picker
              v-model="form.requireOverTime"
              type="datetime"
              class="full-width-input"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block>

  <detail-block title="被检件信息">
    <el-table
      :data="equipmentList"
      border
      style="width: 100%;"
    >
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in equipmentColumns"
        :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.value === 'equipmentNo' && pageType !== 'detail'"
          #default="scope"
        >
          <el-input
            v-model="scope.row[item.value]"
            :placeholder="`${item.text}`"
            class="input"
            disabled
          >
            <template #append>
              <el-button
                v-if="pageType !== 'detail'"
                size="small"
                @click="selectEquipment(scope.$index)"
              >
                选择
              </el-button>
              <span v-else>{{ scope.row[item.value] }}</span>
            </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="addUsedEquipmentRow">
        增加行
      </el-button>
      <el-button type="info" @click="delUsedEquipmentRow">
        删除行
      </el-button>
    </template>
    <el-table
      :data="usedEquipmentList"
      border
      style="width: 100%;"
      max-height="600"
      @selection-change="handleSelectionUsedEquipmentChange"
    >
      <el-table-column type="selection" width="38" />
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in usedEquipmentColumns"
        :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 #default="scope">
          <el-input
            v-if="pageType !== 'detail' && item.value === 'equipmentNo'"
            v-model="scope.row[item.value]"
            placeholder="请选择"
            :disabled="item.disabled"
          >
            <template v-if="pageType !== 'detail'" #append>
              <el-button size="small" @click="selectUsedEquipment(scope.$index)">
                选择
              </el-button>
            </template>
          </el-input>
          <span v-else>{{ scope.row[item.value] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </detail-block>
  <!-- 主附件信息 -->
  <detail-block title="检定结果信息">
    <template v-if="pageType !== 'detail'" #btns>
      <el-button type="primary" @click="addMesureResultRow">
        增加行
      </el-button>
      <el-button type="info" @click="deleteMesureResultRow">
        删除行
      </el-button>
    </template>
    <el-table
      ref="mesureResultRef"
      :data="mesureResultList"
      border
      style="width: 100%;"
      @selection-change="handleSelectionMesureResultChange"
      @row-dblclick="rowDblclick"
    >
      <el-table-column type="selection" width="38" />
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in mesureResultColumns"
        :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 #default="scope">
          <span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
          <el-input-number v-if="scope.row.editable && item.value === 'cs'" v-model="scope.row[item.value]" :precision="0" :min="0" :step="1" :placeholder="`${item.text}`" />
          <el-input v-if="scope.row.editable && item.value !== 'cs'" v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" />
        </template>
      </el-table-column>
    </el-table>
  </detail-block>
  <!-- 原始记录和证书报告部分 -->
  <detail-block title="">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="120"
      label-position="right"
      :rules="rules"
    >
      <el-row :gutter="24" class="marg">
        <el-col :span="6">
          <el-form-item label="原始记录名称:" prop="originalRecordName">
            <el-input
              v-model="form.originalRecordName"
              type="textarea"
              autosize
              :placeholder="pageType === 'detail' ? '' : '请输入原始记录名称'"
              :disabled="pageType === 'detail'"
              :class="{ 'detail-input': pageType === 'detail' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="原始记录模板:" prop="ysjltemplateId">
            <el-input
              v-model.trim="form.ysjltemplateId"
              :placeholder="pageType === 'detail' ? ' ' : '请选择原始记录模板'"
              disabled
              class="full-width-input"
              clearable
            >
              <template v-if="pageType !== 'detail'" #append>
                <el-button
                  size="small"
                  @click="selectOriginalRecord"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原始记录附件:">
            <show-photo v-if="form.ysjlfj" :minio-file-name="form.ysjlfj" />
            <span v-else-if="pageType === 'detail'">无</span>
            <input v-show="pageType === ''" ref="originalRecordFileRef" type="file" @change="onFileOriginalRecordChange">
            <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.ysjlfj === '' ? '0px' : '20px' }" @click="originalRecordUpload">
              {{ form.ysjlfj === '' ? '上传' : '更换附件' }}
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="6">
          <el-form-item label="证书报告名称:" prop="certificateReportName">
            <el-input
              v-model="form.certificateReportName"
              type="textarea"
              autosize
              :placeholder="pageType === 'detail' ? '' : '请输入证书报告名称'"
              :disabled="pageType === 'detail'"
              :class="{ 'detail-input': pageType === 'detail' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="证书报告模板:" prop="zsbgtemplateId">
            <el-input
              v-model.trim="form.zsbgtemplateId"
              :placeholder="pageType === 'detail' ? ' ' : '请选择原始记录模板'"
              disabled
              class="full-width-input"
              clearable
            >
              <template v-if="pageType !== 'detail'" #append>
                <el-button
                  size="small"
                  @click="selectCertificateReport"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证书报告附件:">
            <show-photo v-if="form.zsbgfj" :minio-file-name="form.zsbgfj" />
            <span v-else-if="pageType === 'detail'">无</span>
            <input v-show="pageType === ''" ref="certificateReportFileRef" type="file" @change="onFileCertificateReportChange">
            <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.zsbgfj === '' ? '0px' : '20px' }" @click="certificateReportUpload">
              {{ form.zsbgfj === '' ? '上传' : '更换附件' }}
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-button v-if="pageType !== 'detail'" type="primary" style="margin: 0 0 20px 20px;" @click="createForm">
      生成表单
    </el-button>
  </detail-block>
  <!-- 选择设备组件 -->
  <select-used-equipment-dialog ref="selectUsedEquipmentRef" @confirm="clickConfirmUsedEquipment" />
</template>