<!-- 现场检测审批详情 -->
<script lang="ts" setup name="FieldTestApproveDetail">
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ref } from 'vue'
import dayjs from 'dayjs'
import selectStaffList from '../components/selectStaffList.vue'
import type { IForm, dictType } from './approve-interface'
import { cancelApproval, fetchApproval, submitApproval } from '@/api/approval'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'
import type { IAddress } from '@/components/AddressSelect/address-interface'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getDictByCode } from '@/api/system/dict'
import type { IOrderList } from '@/views/business/schedule/order/orderList_interface'
import selectOrder from '@/views/business/schedule/interchangeReceipt/selectOrder.vue'
import useUserStore from '@/store/modules/user'
import { getUserList } from '@/api/system/user'
import { SCHEDULE } from '@/utils/scheduleDict'
import { printPdf } from '@/utils/printUtils'
import type { userType } from '@/views/system/user/user-interface'
import { getPhotoUrl } from '@/api/system/tool'
import SelectDeviceDialog from '@/views/device/receive/selectDeviceDialog.vue'
import { addFieldTestApproveList, failUpdateFieldTestApprove, getDetail, submit, updateFieldTestApprove } from '@/api/business/fieldTest/apply'
const user = useUserStore() // 用户信息
const { proxy } = getCurrentInstance() as any
const $router = useRouter() // 关闭页面使用
const usePersonList = ref<userType[]>([]) // 申请人列表（用户）
const usePersonOptions = ref<userType[]>([]) // 申请人列表（用户）--模糊搜索数据
const applyPersonLoading = ref(false) // 申请人模糊搜索框loading
const approvalStatusName = ref('') // 审批状态名称
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // 列表id
const submitId = ref('') // 新建提交时所用的id
const $route = useRoute() // 路由参数
const ruleFormRef = ref<FormInstance>() // 表单ref
const decisionItem = ref('') // 同意、驳回、拒绝按钮权限
const taskId = ref('') // 任务id，用于同意、驳回、拒绝审批
const approvalDialog = ref() // 审批对话ref
const form = ref<IForm>({
  siteExecutiveNo: '', // 现场检测编号
  siteExecutiveName: '', // 现场检测名字
  applyPerson: '', // 申请人
  applyPersonName: '', // 申请人名称
  applyTime: '', // 申请时间
  directorId: '', // 负责人id
  directorName: '', // 负责人
  taskSource: '', // 任务来源-字典code
  taskSourceName: '', // 任务来源-字典value
  orderCode: '', // 委托单编号
  orderId: '', // 委托单id
  customerId: '', // 委托方id
  customerNo: '', // 委托方代码
  customerName: '', // 委托方名称
  customerAddress: '', // 委托方地址
  phone: '', // 委托方电话
  deliverer: '', // 送检人
  delivererTel: '', // 送样人联系方式
  preCost: '', // 预计计量费用
  preStartTime: '', // 预计开始时间
  preEndTime: '', // 预计结束时间
  executiveAddress: '', // 检测地址
  executiveEnvironment: '', // 现场环境条件
  executiveItem: '', // 现场测试、校准或检定项目
  hazardSourceAndPreventionMethod: '', // 主要危害源及预防措施
  meterStaffList: [] as any, // 现场测试、校准或检定人员
  equipmentInfoList: [] as any, // 携带仪器设备
  remark: '', // 备注
  processId: '', // 流程实例id
})

// 自定义校验规则--要求预计结束时间大于预计开始时间
const requireOverTimeValid = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('预计结束时间必填'))
  }
  if (new Date(form.value.preEndTime).getTime() <= new Date(form.value.preStartTime).getTime()) {
    return callback(new Error('不能小于预计开始时间'))
  }
  callback()
}
// 校验规则
const formRules = ref<FormRules>({
  directorId: [{ required: true, message: '要求负责人必填', trigger: ['blur', 'change'] }],
  taskSource: [{ required: true, message: '要求任务来源必填', trigger: ['blur', 'change'] }],
  preCost: [{ required: true, message: '要求预计计量费用必填', trigger: ['blur', 'change'] },
    { pattern: /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/, message: '要求大于0，且最多保留两位小数', trigger: ['blur', 'change'] }],
  preStartTime: [{ required: true, message: '要求预计开始时间必填', trigger: ['blur', 'change'] }],
  preEndTime: [{ required: true, type: 'date', validator: requireOverTimeValid, trigger: 'change' }],
  // preEndTime: [{ required: true, message: '要求预计结束时间必填', trigger: ['blur', 'change'] }],
  executiveAddress: [{ required: true, message: '要求现场测试、校准或检定地点必填', trigger: ['blur', 'change'] }],
  hazardSourceAndPreventionMethod: [{ required: true, message: '要求主要危害源及预防措施必填', trigger: ['blur', 'change'] }],
  executiveEnvironment: [{ required: true, message: '要求现场环境条件必填', trigger: ['blur', 'change'] }],
  executiveItem: [{ required: true, message: '要求现场测试、校准或检定项目必填', trigger: ['blur', 'change'] }],
  orderCode: [{ required: true, message: '要求委托单编号必填', trigger: ['blur', 'change'] }],
})
// -----------------------------------------------路由参数---------------------------------
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// ---------------------------------------------负责人-----------------------------------
// 选择器模糊查询
const remoteMethod = (query: string) => {
  if (query) {
    applyPersonLoading.value = true
    setTimeout(() => {
      applyPersonLoading.value = false
      usePersonOptions.value = usePersonList.value.filter((item) => {
        return item.name.toLowerCase().includes(query.toLowerCase())
      })
    }, 200)
  }
  else {
    usePersonOptions.value = usePersonList.value
  }
}
// 获取用户列表(增加模糊查询)
const fetchUserList = () => {
  getUserList({ offset: 1, limit: 999999 }).then((res: any) => {
    usePersonList.value = res.data.rows
    usePersonOptions.value = res.data.rows
  })
}
// ---------------------------------------------字典------------------------------------
const taskSourceMap = ref<dictType[]>([]) // 任务来源
function getDict() {
  // 任务来源
  getDictByCode('taskSource').then((response) => {
    taskSourceMap.value = response.data
  })
}
// -----------------------------------------------选择委托单-----------------------------
const orderVisible = ref(false) // 控制委托单对话框显隐
// 点击选择委托单编号
const handleClickOrder = () => {
  orderVisible.value = true
}
// 修改委托单对话框显隐
const changeOrderVisible = (val: boolean) => {
  orderVisible.value = val
}
// 选好委托单
const confirmCheckoutOrder = (val: Array<IOrderList>) => {
  if (val && val.length) {
    form.value.orderCode = val[0].orderCode // 委托单编号
    form.value.orderId = val[0].id // 委托单id
    form.value.customerNo = val[0].customerNo // 委托方代码
    form.value.customerId = val[0].customerId // 委托方id
    form.value.customerName = val[0].customerName // 委托方名称
    form.value.customerAddress = val[0].customerAddress // 委托方地址
    form.value.deliverer = val[0].deliverer // 联系人
    form.value.delivererTel = val[0].delivererTel // 委托方名称
  }
}
// ----------------------------------------审批流程-------------------------------------
const approvalRecordData = ref([]) // 审批流程数据
// 查询审批记录
function getApprovalRecord(processId: string) {
  if (pageType.value !== 'add') {
    if (processId) {
      fetchApproval(processId).then((res) => {
        approvalRecordData.value = res.data
      })
    }
    else {
      ElMessage.warning('流程实例id为空')
    }
  }
}
// ---------------------------------------现场检测人员----------------------------------
const checkoutMeterPersonList = ref([]) as any// 人员选中列表
const isMultiMerterPerson = ref(false) // 计量人员是否多选
// 人员信息表头
const meterPersonColumns = ref<TableColumn[]>([
  { text: '姓名', value: 'name', width: '220' },
  { text: '人员编号', value: 'staffNo', width: '160' },
  { text: '工作部门', value: 'deptName' },
  { text: '计量专业', value: 'major' },
  { text: '证书编号', value: 'verifierCertificateNo' },
  { text: '证书有效期', value: 'certificateDate', width: '120' },
])
// 记录点击的第几行
const listIndex = ref(0)
// 计量人员Ref
const merterPersonRef = ref()
// 点击选择
const handleClick = (index: number) => {
  isMultiMerterPerson.value = false
  listIndex.value = index // 选择的第几行
  merterPersonRef.value.initDialog()
}
// 选完计量人员
const confirmSelectPerson = (val: any) => {
  if (isMultiMerterPerson.value) { // 批量增加时push
    val.forEach((item: any) => {
    // 只添加列表里不存在的
      const index = form.value.meterStaffList.findIndex((i: any) => item.staffNo === i.staffNo)
      if (index === -1) {
        form.value.meterStaffList.push({
          ...item,
          deptName: item.deptName,
        })
      }
    })
  }
  else { // 单选替换
    const index = form.value.meterStaffList.findIndex((i: any) => val[0].staffNo === i.staffNo)
    if (index !== -1) {
      ElMessage.warning('此人员已添加过')
      return
    }
    form.value.meterStaffList.splice(listIndex.value, 1, val[0])
  }
}
// 增加行
const addMeterPersonRow = () => {
  const index = form.value.meterStaffList.findIndex((item: { name: string }) => !item.name)
  if (index !== -1) {
    ElMessage.warning('请完善上一条人员信息')
    return
  }
  form.value.meterStaffList.push(
    {
      name: '', // 姓名
      staffNo: '', // 人员编号
      deptName: '', // 工作部门
      major: '', // 计量专业
      verifierCertificateNo: '', // 证书编号
      certificateDate: '', // 证书有效期
    },
  )
}
// 删除行
const delMeterPersonRow = () => {
  if (checkoutMeterPersonList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutMeterPersonList.value.forEach((item: any) => {
      form.value.meterStaffList.forEach((element: any, index: number) => {
        if (element.staffNo === item.staffNo) {
          form.value.meterStaffList.splice(index, 1)
        }
      })
    })
  }
}
// 选中变化
const handleMeterPersonSelectionChange = (val: any) => {
  checkoutMeterPersonList.value = val
}
// 点击批量增加
const multiAddMeterPerson = () => {
  isMultiMerterPerson.value = true
  merterPersonRef.value.initDialog()
}
// --------------------------------------------携带仪器设备------------------------------------------
const checkoutEquipmentList = ref([]) as any// 人员选中列表
const dialogSelectDiviceVisible = ref(false) // 选择设备对话框显隐
// 携带仪器设备表头
const EquipmentColumns = ref<TableColumn[]>([
  { text: '设备名称', value: 'equipmentName', width: '220' },
  { text: '设备编号', value: 'equipmentNo', width: '160' },
  { text: '型号', value: 'modelNo' },
  { text: '出厂编号', value: 'manufacturingNo' },
  { text: '使用部门', value: 'useDeptName' },
  { text: '有效日期', value: 'validDate', width: '120' },
])
// 记录点击的第几行
const listEquipmentIndex = ref(0)
// 点击选择
const handleEquipmentClick = (index: number) => {
  listEquipmentIndex.value = index // 选择的第几行
  dialogSelectDiviceVisible.value = true
}
// 选择设备对话框关闭
const closeDialog = () => {
  dialogSelectDiviceVisible.value = false
}
// 选完设备
const confirmSelectEquipment = (val: any) => {
  const index = form.value.equipmentInfoList.findIndex((i: any) => val[0].equipmentNo === i.equipmentNo)
  if (index !== -1) {
    ElMessage.warning('此设备已添加过')
    return
  }
  form.value.equipmentInfoList.splice(listEquipmentIndex.value, 1, val[0])
}
// 增加行
const addEquipmentRow = () => {
  const index = form.value.equipmentInfoList.findIndex((item: { equipmentNo: string }) => !item.equipmentNo)
  if (index !== -1) {
    ElMessage.warning('请完善上一条设备信息')
    return
  }
  form.value.equipmentInfoList.push(
    {
      equipmentName: '', // 设备名称
      equipmentNo: '', // 设备编号
      modelNo: '', // 型号
      mesureRange: '', // 测量范围
      useDeptName: '', // 使用部门
      usePersonName: '', // 使用人
      managerStateName: '', // 管理状态
      validDate: '', // 有效日期
      equipmentId: '', // 设备ID
    },
  )
}
// 删除行
const delEquipmentRow = () => {
  if (checkoutEquipmentList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutEquipmentList.value.forEach((item: any) => {
      form.value.equipmentInfoList.forEach((element: any, index: number) => {
        if (element.equipmentNo === item.equipmentNo) {
          form.value.equipmentInfoList.splice(index, 1)
        }
      })
    })
  }
}
// 选中变化
const handleEquipmentSelectionChange = (val: any) => {
  checkoutEquipmentList.value = val
}

// 扫描识别
const scan = () => {

}

// ---------------------------------------------------------------------------------------
// 关闭新增页面的回调
const close = () => {
  $router.back()
}

// 保存
const save = () => {
  if (!form.value.meterStaffList.length) {
    ElMessage.warning('现场测试、校准或检定人员表格不能为空')
    return false
  }
  if (!form.value.equipmentInfoList.length) {
    ElMessage.warning('携带仪器设备表格不能为空')
    return false
  }
  ruleFormRef.value!.validate((valid: boolean) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        background: 'rgba(255, 255, 255, 0.8)',
      })
      // 保存之前清除空行、避免传给后端无用空对象
      const index = form.value.meterStaffList.findIndex((item: any) => !item.staffNo)
      if (index !== -1) {
        form.value.meterStaffList.splice(index, 1)
      }
      const indexEquipment = form.value.equipmentInfoList.findIndex((item: any) => !item.equipmentNo)
      if (index !== -1) {
        form.value.equipmentInfoList.splice(indexEquipment, 1)
      }
      //
      const equipmentInfoList = form.value.equipmentInfoList.map((item: { id: string }) => {
        return {
          id: item.id,
        }
      })
      const meterStaffList = form.value.meterStaffList.map((item: { id: string }) => {
        return {
          id: item.id,
        }
      })
      const params = {
        ...form.value,
        meterStaffList,
        equipmentInfoList,
      }
      // 新建
      if (pageType.value === 'add') {
        addFieldTestApproveList(params).then((res) => {
          submitId.value = res.data.data
          ElMessage.success('保存成功')
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
      // 保存
      else if (pageType.value === 'edit') {
        if (approvalStatusName.value === '未通过-驳回') {
          failUpdateFieldTestApprove(params).then((res) => {
            ElMessage.success('保存成功')
            loading.close()
            close()
          }).catch(() => {
            loading.close()
          })
        }
        else {
          updateFieldTestApprove(params).then((res) => {
            ElMessage.success('保存成功')
            loading.close()
            close()
          }).catch(() => {
            loading.close()
          })
        }
      }
    }
    else {
      console.log('表单校验不通过')
    }
  })
}

// 提交表单
const handleSubmit = () => {
  if (submitId.value) {
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    const params = {
      id: submitId.value,
      formId: SCHEDULE.BUSINESS_FIELDTEST_APPROVE, // 表单id
    }
    submit(params).then(() => {
      ElMessage.success('提交成功')
      loading.close()
      close()
    })
  }
  else {
    ElMessage.warning('请先保存再提交！')
  }
}

// 审批结束回调
const approvalSuccess = () => {
  close() // 返回上一页
}
// 审批
const handleApprove = (val: string, title = '') => {
  if (val === '取消') {
    const params = {
      processInstanceId: form.value.processId!,
      comments: '',
    }
    ElMessageBox.confirm(
      '确认取消该审批吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )
      .then(() => {
        cancelApproval(params).then((res) => {
          ElMessage({
            type: 'success',
            message: '取消成功',
          })
          close()
        })
      })
  }
  else if (val === '同意') {
    approvalDialog.value.initDialog('agree', taskId.value)
  }
  else if (val === '驳回') {
    approvalDialog.value.initDialog('reject', taskId.value)
  }
  else if (val === '拒绝') {
    approvalDialog.value.initDialog('refuse', taskId.value)
  }
}

// 获取详细信息
const getInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getDetail({ id: infoId.value }).then((res) => {
    form.value = res.data
    form.value.meterStaffList = res.data.meterStaffList.map((item: any) => {
      return {
        ...item,
        certificateDate: item.certificateDate ? dayjs(item.certificateDate).format('YYYY-MM-DD') : '',
      }
    }) // 现场测试、校准或检定人员
    form.value.equipmentInfoList = res.data.equipmentInfoList.map((item: any) => {
      return {
        ...item,
        validDate: item.validDate ? dayjs(item.validDate).format('YYYY-MM-DD') : '',
      }
    }) // 携带仪器设备
    form.value.siteExecutiveName = '现场检测审批单' // 现场检测审批名字
    form.value.applyPerson = user.id// 申请人
    form.value.applyPersonName = user.name // 申请人名字
  })
  loading.close()
}
// 打印
const print = () => {
  // getPhotoUrl(printFileName as string).then((res) => {
  //   const url = res.data
  //   printPdf(res.data)
  // })
}

onMounted(async () => {
  fetchUserList() // 获取用户列表
  await getDict()// 字典
  form.value.processId = $route.query.processId as string // 任务id
  approvalStatusName.value = $route.query.approvalStatusName as string // 审批类型名称
  decisionItem.value = $route.query.decisionItem as string // 同意、驳回、拒绝按钮权限
  taskId.value = $route.query.taskId as string // 流程实例id
  if (pageType.value !== 'add') {
    getInfo() // 获取详情
    if (approvalStatusName.value !== '草稿箱') {
      getApprovalRecord(form.value.processId)
    }
  }
  form.value.siteExecutiveName = '现场检测审批单' // 现场检测审批名字
  form.value.applyPerson = user.id// 申请人
  form.value.applyPersonName = user.name // 申请人名字
  form.value.applyTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 申请时间
})
</script>

<template>
  <app-container>
    <detail-page :title="`现场检测审批-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批'" type="primary" @click="handleApprove('同意')">
          同意
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批' && decisionItem !== '3'" type="primary" @click="handleApprove('驳回')">
          驳回
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批' && decisionItem !== '2'" type="danger" @click="handleApprove('拒绝')">
          拒绝
        </el-button>

        <el-button v-if="pageType === 'add'" type="primary" @click="handleSubmit">
          提交
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="save">
          保存
        </el-button>
        <!-- <el-button v-if="pageType === 'detail' && approvalStatusName === '已通过' " type="primary" @click="print">
          打印
        </el-button> -->
        <el-button v-if="pageType === 'detail' && approvalStatusName === '审批中'" type="info" @click="handleApprove('取消')">
          取消
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="form"
        label-width="200"
        label-position="right"
        :rules="formRules"
      >
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="现场检测编号:" prop="siteExecutiveNo">
              <el-input v-model="form.siteExecutiveNo" disabled placeholder="系统自动生成" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="现场检测名称:" prop="siteExecutiveName">
              <el-input
                v-model="form.siteExecutiveName"
                :placeholder="pageType === 'detail' ? '' : '请输入现场检测名称'"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请人:">
              <el-input
                v-model="form.applyPersonName" disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请时间:" prop="applyTime">
              <el-date-picker
                v-model="form.applyTime"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人:" prop="directorId">
              <el-select
                v-model="form.directorId"
                placeholder="请选择负责人"
                class="full-width-input"
                :disabled="pageType === 'detail'"
                filterable
                remote
                remote-show-suffix
                :remote-method="remoteMethod"
                :loading="applyPersonLoading"
              >
                <el-option v-for="item in usePersonOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务来源:" prop="taskSource">
              <el-select
                v-model="form.taskSource"
                :placeholder="pageType === 'detail' ? '' : '请选择任务来源'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              >
                <el-option v-for="item of taskSourceMap" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联委托单编号:" prop="orderCode">
              <el-input
                v-model="form.orderCode"
                :placeholder="pageType === 'detail' ? '' : '请选择委托单编号'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button size="small" @click="handleClickOrder">
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="委托方代码:" prop="customerNo">
              <el-input
                v-model="form.customerNo"
                :placeholder="pageType === 'detail' ? '' : '请输入委托方代码'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <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-col :span="8">
            <el-form-item label="委托方电话" prop="phone">
              <el-input
                v-model="form.phone"
                :placeholder="pageType === 'detail' ? '' : '请输入委托方电话'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="联系人" prop="deliverer">
              <el-input
                v-model="form.deliverer"
                :placeholder="pageType === 'detail' ? '' : '请输入联系人'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="delivererTel">
              <el-input
                v-model="form.delivererTel"
                :placeholder="pageType === 'detail' ? '' : '请输入联系方式'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="16">
            <el-form-item label="委托方地址:" prop="customerAddress">
              <el-input
                v-model="form.customerAddress"
                type="textarea"
                autosize
                :placeholder="pageType === 'detail' ? '' : '请输入委托方地址'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="预计计量费用(元):" prop="preCost">
              <el-input
                v-model="form.preCost"
                placeholder="请输入预计计量费用"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计开始时间:" prop="preStartTime">
              <el-date-picker
                v-model="form.preStartTime"
                type="datetime"
                placeholder="请选择"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计结束时间:" prop="preEndTime">
              <el-date-picker
                v-model="form.preEndTime"
                type="datetime"
                placeholder="请选择"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="16">
            <el-form-item label="现场测试、校准或检定地点:" prop="executiveAddress">
              <el-input
                v-model="form.executiveAddress"
                :placeholder="pageType === 'detail' ? '' : '请输入现场测试、校准或检定地点'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="16">
            <el-form-item label="现场环境条件:" prop="executiveEnvironment">
              <el-input
                v-model="form.executiveEnvironment"
                :placeholder="pageType === 'detail' ? '' : '请输入现场环境条件'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="16">
            <el-form-item label="主要危害源及预防措施:" prop="hazardSourceAndPreventionMethod">
              <el-input
                v-model="form.hazardSourceAndPreventionMethod"
                :placeholder="pageType === 'detail' ? '' : '请输入主要危害源及预防措施'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="16">
            <el-form-item label="现场测试、校准或检定项目:" prop="executiveItem">
              <el-input
                v-model="form.executiveItem"
                :placeholder="pageType === 'detail' ? '' : '请输入现场测试、校准或检定项目'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="16">
            <el-form-item label="备注:" prop="remark">
              <el-input
                v-model="form.remark"
                autosize
                type="textarea"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title="现场测试、校准或检定人员">
      <template v-if="pageType !== 'detail'" #btns>
        <el-button type="primary" @click="multiAddMeterPerson">
          批量添加
        </el-button>
        <el-button type="primary" @click="addMeterPersonRow">
          增加行
        </el-button>
        <el-button type="info" @click="delMeterPersonRow">
          删除行
        </el-button>
      </template>
      <el-table
        :data="form.meterStaffList"
        border
        style="width: 100%;"
        @selection-change="handleMeterPersonSelectionChange"
      >
        <el-table-column v-if="pageType !== 'detail'" type="selection" width="55" />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in meterPersonColumns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          show-overflow-tooltip
          align="center"
        >
          <template v-if="item.text === '姓名' && pageType !== 'detail'" #default="scope">
            <el-input v-model="scope.row[item.value]" disabled :placeholder="`${item.text}`" class="input">
              <template #append>
                <el-button
                  v-if="pageType !== 'detail'"
                  size="small"
                  @click="handleClick(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="scan">
          扫描识别
        </el-button>
        <el-button type="primary" @click="addEquipmentRow">
          增加行
        </el-button>
        <el-button type="info" @click="delEquipmentRow">
          删除行
        </el-button>
      </template>
      <el-table
        :data="form.equipmentInfoList"
        border
        style="width: 100%;"
        @selection-change="handleEquipmentSelectionChange"
      >
        <el-table-column v-if="pageType !== 'detail'" type="selection" width="55" />
        <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 v-if="item.text === '设备名称' && pageType !== 'detail'" #default="scope">
            <el-input v-model="scope.row[item.value]" disabled :placeholder="`${item.text}`" class="input">
              <template #append>
                <el-button
                  v-if="pageType !== 'detail'"
                  size="small"
                  @click="handleEquipmentClick(scope.$index)"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
    <detail-block v-if="approvalStatusName !== '草稿箱' && pageType !== 'add'" title="审批流程">
      <!-- 审批流程 -->
      <approval-record ref="approvalRecord" :approval-record-data="approvalRecordData" />
    </detail-block>
    <!-- 选择委托单组件 -->
    <select-order v-model:visible="orderVisible" @confirmCheckout="confirmCheckoutOrder" @changeVisible="changeOrderVisible" />
    <!-- 选择计量人员组件列表 -->
    <select-staff-list ref="merterPersonRef" :is-multi-merter-person="isMultiMerterPerson" @add="confirmSelectPerson" />
    <!-- 设备 -->
    <select-device-dialog
      :dialog-select-divice-visible="dialogSelectDiviceVisible"
      :is-multi="false"
      @close-dialog="closeDialog"
      @update-device-confirm="confirmSelectEquipment"
    />
    <!-- 审批弹窗 -->
    <approval-dialog ref="approvalDialog" @on-success="approvalSuccess" />
  </app-container>
</template>