<!-- 委托书详情 -->
<script lang="ts" setup name="OrderListEdit">
import type { Ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import type { IOrderDetail, ISampleList, dictType } from './orderList_interface'
import selectSample from './selectSample.vue'
import { UploadFile } from '@/api/measure/file'
import selectCustomer from '@/views/customer/sample/list/selectCustomer.vue'
import type { ICustomer } from '@/views/customer/customerInfo/customer_interface'
import showPhoto from '@/views/system/tool/showPhoto.vue'
import { getDictByCode } from '@/api/system/dict'
import { getUid } from '@/utils/getUid'
import scanSampleDialog from '@/components/ScanSampleDialog/index.vue'
import { addOrder, getOrderDetail, getStream, updateOrder } from '@/api/business/schedule/order'
import selectStaffList from '@/views/business/fieldTest/components/selectStaffList.vue'
import { printPdf } from '@/utils/printUtils'

const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // id
const isReceived = ref(false) // 样品状态是否已接收
const visible = ref(false) // 控制选择委托方对话框显隐
const sampleVisible = ref(false) // 控制选择样品对话框显隐
const ruleFormRef = ref()
const orderType = ref('') // 委托书类型 1检测委托单、2检定或校准委托单
// 表单
const dataForm: Ref<IOrderDetail> = ref({
  id: '',
  orderCode: '', // 委托书编号
  postalCode: '', // 委托方邮编
  orderId: '', // 委托书编号
  deliverer: '', // 送检人/联系人
  // delivererTel: '', // 送样人联系方式
  orderTime: '', // 委托日期
  planDeliverTime: '', // 预计送达时间
  requireOverTime: '', // 要求检完时间
  customerNo: '', // 委托方代码
  customerId: '', // 委托方id
  customerName: '', // 委托方名称
  phone: '', // 委托方电话
  customerAddress: '', // 委托方地址
  remark: '', // 备注
  minioFileName: '', // 附件
  isUrgent: 0, // 是否加急 0否 1是
  certifications: '', // 证书类别
  certificationCompany: '', // 证书单位名称
  certificationCompanyAddress: '', // 证书单位地址

  needContact: '1', // 需联络后再做退件处理0、直接退件处理1
  staffNo: '', // 收件人工号
  staffName: '', // 收件人名称
  receiveDate: '', // 收件日期
  fixedTel: '', // 固定电话
  delivererTel: '', // 移动电话
  email: '', // 电子邮件或qq
  invoiceCompany: '', // 发票单位名称
})
const checkCertificateList = ref([]) as any// 对证书要求多选框
const scanSampleRef = ref() // 标签绑定弹窗ref
const certificationsMap = ref<dictType[]>([]) // 证书类别
const powerVoltageMap = ref<dictType[]>([]) // 电源电压
const isUrgentMap = ref<dictType[]>([]) // 是否加急
const sampleStatusMap = ref([]) as any// 样品状态
const customerInfoMap = ref<dictType[]>([]) // 系统字典--航天计量检测技术（江苏）有限公司基本信息

const list = ref<ISampleList[]>([])// 表格数据
// 选中的内容
const checkoutList = ref([])
const columns = ref([]) as any
// 表头
const columnsMeasure = ref([
  { text: '被测样品名称', value: 'sampleName', align: 'center', required: true },
  { text: '型号规格', value: 'sampleModel', align: 'center', required: true },
  { text: '仪器编号', value: 'manufacturingNo', align: 'center', required: true },
  { text: '生产厂家', value: 'manufacturer', align: 'center', required: true },
  { text: '样品编号', value: 'sampleNo', align: 'center', width: '170', disabled: true, required: true },
  // { text: '电源电压', value: 'powerVoltage', align: 'center', required: true },
  { text: '外观状态', value: 'appearanceStatus', align: 'center', required: true },
  { text: '检测项目', value: 'measureContent', align: 'center', required: false },
  // { text: '样品状态', value: 'sampleStatusName', align: 'center' },
  { text: '检测依据标准', value: 'accordStandard', align: 'center', required: false },
  { text: '备注', value: 'remark', align: 'center', required: false },

])
// 表头
const columnsCalibration = ref([
  { text: '被测样品名称', value: 'sampleName', align: 'center', required: true },
  { text: '型号规格', value: 'sampleModel', align: 'center', required: true },
  { text: '仪器编号', value: 'manufacturingNo', align: 'center', required: true },
  { text: '生产厂家', value: 'manufacturer', align: 'center', required: true },
  { text: '样品编号', value: 'sampleNo', align: 'center', width: '170', disabled: true, required: true },
  { text: '证书要求', value: 'certificateRequire', align: 'center', required: false },
  { text: '外观状态', value: 'appearanceStatus', align: 'center', required: true },
  // { text: '客户特殊要求', value: 'specialRequire', align: 'center', required: false },
  { text: '备注', value: 'remark', align: 'center', required: false },
])

// 自定义校验规则--要求检完时间不能比预计送达时间大
const requireOverTimeValid = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('要求检完时间必填'))
  }
  if (new Date(dataForm.value.planDeliverTime).getTime() >= new Date(dataForm.value.requireOverTime).getTime()) {
    return callback(new Error('要求检完时间应大于预计送达时间'))
  }
  callback()
}
// 校验规则
const rules = reactive<FormRules>({
  // deliverer: [{ required: true, message: '要求送样人必填', trigger: 'blur' }],
  // delivererTel: [{ required: true, message: '要求送样人联系方式必填', trigger: 'blur' }],
  customerNo: [{ required: true, message: '要求委托方代码必填', trigger: 'change' }],
  customerName: [{ required: true, message: '要求委托方名称必填', trigger: 'change' }],
  // phone: [{ required: true, message: '要求委托方电话必填', trigger: 'change' }],
  customerAddress: [{ required: true, message: '要求委托方地址必填', trigger: 'change' }],
  orderTime: [{ type: 'date', required: true, message: '要求委托日期必填', trigger: 'change' }],
  planDeliverTime: [{ type: 'date', required: true, message: '要求预计送达时间必填', trigger: 'change' }],
  requireOverTime: [{ required: true, type: 'date', validator: requireOverTimeValid, trigger: 'change' }],
  certifications: [{ required: true, message: '要求证书类别必填', trigger: 'change' }],
  isUrgent: [{ required: true, message: '要求是否加急必填', trigger: 'change' }],
  certificationCompany: [{ required: true, message: '要求证书单位名称必填', trigger: 'blur' }],
  certificationCompanyAddress: [{ required: true, message: '要求证书单位地址必填', trigger: 'blur' }],

  deliverer: [{ required: true, message: '联系人必填', trigger: 'blur' }],
  delivererTel: [{ required: true, message: '移动电话必填', trigger: 'blur' }],
  // phone: [{ required: true, message: '固定电话必填', trigger: 'blur' }],
  // email: [{ required: true, message: '电子邮件/QQ必填', trigger: 'blur' }],
  // invoiceCompany: [{ required: true, message: '发票单位名称必填', trigger: 'blur' }],
}) // 表单验证规则

// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
  if ($route.params.status) {
    isReceived.value = $route.params.status === '2' // 已接收
    console.log('样品状态', isReceived.value)
  }
}

// 获取字典值
function getDict() {
  // 证书类别
  getDictByCode('certificationType').then((response) => {
    certificationsMap.value = response.data
  })
  // 电源电压
  getDictByCode('powerVoltage').then((response) => {
    powerVoltageMap.value = response.data
  })
  // 是否加急
  getDictByCode('isUrgent').then((response) => {
    isUrgentMap.value = response.data.map((item: dictType) => {
      return {
        ...item,
        value: parseInt(item.value as string),
      }
    })
  })
  // 样品状态
  getDictByCode('sampleStatus').then((response) => {
    response.data.forEach((item: dictType) => {
      sampleStatusMap.value[`${item.value}`] = item.name
    })
  })
  // 系统字典
  getDictByCode('systemDict').then((response) => {
    const tempMap = response.data.map((item: dictType) => {
      if (item.value === 'address') {
        item.label = '通信地址'
      }
      else if (item.value === 'postalCode') {
        item.label = '邮编'
      }
      else if (item.value === 'tel') {
        item.label = '电话'
      }
      return item
    })
    // 删除除上述四项的其他基本信息
    tempMap.forEach((item: dictType, index: number) => {
      if (item.value !== 'address' && item.value !== 'postalCode' && item.value !== 'tel' && item.value !== 'fax') {
        tempMap.splice(index, 1)
      }
    })
    customerInfoMap.value = tempMap
  })
}

// 点击选择
const customerNoFocus = () => {
  visible.value = true
}

// 点击从样品库添加
const multiAdd = () => {
  if (!dataForm.value.customerNo) {
    ElMessage.warning('请先选择委托方')
    return
  }
  sampleVisible.value = true
}

// 双击样品表格
const rowDblclick = (row: ISampleList) => {
  row.isEdit = true
}
// 单击样品表格某一行
const rowClick = (row: ISampleList) => {
  // row.isEdit = false
}
// 点击表头--手填全的行和样品库中选的行退出编辑模式
const headerClick = () => {
  list.value.forEach((item) => {
    if ((item.isEdit && (!item.sampleName || !item.sampleModel || !item.manufacturingNo || !item.powerVoltage))) {
      item.isEdit = true
    }
    else {
      item.isEdit = false
    }
  })
}

// 选好委托方
const confirmCheckout = (val: Array<ICustomer>) => {
  // 委托方变化样品清单置空
  if (val[0].customerNo !== dataForm.value.customerNo) {
    list.value = []
  }
  if (val && val.length) {
    list.value.filter(item => !item.sampleNo) // 切换委托方时把不是手填的样品删了
    dataForm.value.customerNo = val[0].customerNo // 委托方代码
    dataForm.value.customerId = val[0].id // 委托方id
    dataForm.value.customerName = val[0].customerName // 委托方名称
    dataForm.value.phone = val[0].phone // 委托方电话
    dataForm.value.customerAddress = val[0].fullAddress // 委托方地址

    dataForm.value.deliverer = val[0].director // 联系人
    dataForm.value.delivererTel = val[0].mobile // 移动电话
    dataForm.value.email = val[0].email // 电子邮件或qq
    dataForm.value.postalCode = val[0].postalCode // 邮编
    dataForm.value.certificationCompany = val[0].customerName // 证书单位名称
    dataForm.value.certificationCompanyAddress = val[0].fullAddress // 证书单位地址
  }
}

// 选择好样品
const clickConfirmSample = (val: Array<ISampleList>) => {
  val.forEach((item: ISampleList) => {
    // 只添加列表里不存在的
    const index = list.value.findIndex((i: ISampleList) => item.sampleNo === i.sampleNo)
    if (index === -1) {
      list.value.push({
        ...item,
        // measureContent: '', // 检定项目置空
        isExistSample: '1', // 是否存在样品库中 1存在、0不存在
      })
    }
  })
}

// 控制选择委托方对话框显隐
const changeVisible = (val: boolean) => {
  visible.value = val
}

// 控制选择样品对话框显隐
const changeSampleVisible = (val: boolean) => {
  sampleVisible.value = val
}

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

// 检查表格第几行信息未完善
const checkList = () => {
  // const index = list.value.findIndex(item => (!item.sampleNo || item.sampleNo === '系统自动生成') && (!item.sampleName || !item.sampleModel || !item.manufacturingNo || !item.powerVoltage || !item.measureContent))
  const index = list.value.findIndex((item: any) => !item.sampleName || !item.sampleModel || !item.manufacturingNo || !item.appearanceStatus)
  if (index !== -1) {
    return index + 1
  }
  else {
    return 'pass'
  }
}

// 增加行
const addRow = () => {
  const result = checkList()
  if (result !== 'pass') {
    ElMessage.warning(`请完善第${result}行样品信息`)
    return
  }
  list.value.push({
    sampleNo: '', // 样品编号
    sampleName: '', // 样品名称
    sampleModel: '', // 样品型号
    manufacturingNo: '', // 出厂编号
    appendixDescn: '', // 附件说明
    appearanceStatus: '', // 外观状态
    measureContent: '', // 检测依据标准
    certificateRequire: '', // 证书要求
    specialRequire: '', // 客户特殊要求
    powerVoltage: '', // 电源电压
    accordStandard: '', // 附件说明
    remark: '', // 备注
    isEdit: true, // 是否可编辑
    isExistSample: '0', // 是否存在样品库中 1存在、0不存在
    delId: getUid(),
  })
}

// 删除行
const delRow = () => {
  if (checkoutList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutList.value.forEach((item: ISampleList) => {
      list.value.forEach((element, index) => {
        if (!item.sampleNo) { // 点击增加行--手动增加的项目需要判断前端添加的delID
          if (element.delId === item.delId) {
            list.value.splice(index, 1)
          }
        }
        else { // 从样品库中选择的项目
          if (element.sampleNo === item.sampleNo) {
            list.value.splice(index, 1)
          }
        }
      })
    })
  }
}

const fileRef = ref() // 文件上传input
const onFileChange = (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) {
        dataForm.value.minioFileName = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}

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

// 点击保存
const saveForm = (formEl: FormInstance | undefined) => {
  console.log('委托单类型', orderType.value === 'measure' ? '1' : orderType.value === 'calibration' ? '2' : '')
  if (!list.value.length) {
    ElMessage.warning('要求样品清单不能为空')
    return
  }
  // 检查表格是否存在增加行信息没有完善的情况
  const result = checkList()
  if (result !== 'pass') {
    ElMessage.warning(`表格第${result}行信息未完善`)
    return
  }
  headerClick() // 所有行退出编辑模式
  if (!formEl) { return }
  formEl.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        const loading = ElLoading.service({
          lock: true,
          background: 'rgba(255, 255, 255, 0.8)',
        })
        const params = {
          ...dataForm.value,
          customerPhone: dataForm.value.phone, // 委托方电话
          accordLab: checkCertificateList.value.includes('如无相应检定规程/校准规范,可按本实验室的方法进行校准') ? '1' : '0',
          agreeOther: checkCertificateList.value.includes('如不能出具所选证书类型,同意受托方出具其他类型证书') ? '1' : '0',
          needAccordDeclare: checkCertificateList.value.includes('需要符合性声明') ? '1' : '0',
          needAdvice: checkCertificateList.value.includes('需要建议再校准日期') ? '1' : '0',
          contactReturn: dataForm.value.needContact === '1' ? '1' : '0', // 需联系之后退件处理
          directReturn: dataForm.value.needContact === '2' ? '1' : '0', // 直接退件处理
          orderType: orderType.value === 'measure' ? '1' : orderType.value === 'calibration' ? '2' : '',
          orderTypeName: orderType.value === 'measure' ? '检测委托单' : orderType.value === 'calibration' ? '检定或校准委托单' : '',
          customerSampleInfoList: list.value,
        }
        if (pageType.value === 'edit') { // 编辑
          updateOrder(params).then(() => {
            ElMessage.success('已保存')
            loading.close()
            $router.go(-1)
          }).catch(() => {
            loading.close()
          })
        }
        if (pageType.value === 'add') { // 新建
          addOrder(params).then(() => {
            ElMessage.success('已保存')
            loading.close()
            $router.go(-1)
          }).catch(() => {
            loading.close()
          })
        }
      })
    }
  })
}

// ---------------------------------------------扫描--------------------------------------
// 点击扫描收添加
const scan = () => {
  if (!dataForm.value.customerNo) {
    ElMessage.warning('请先选择委托方')
    return
  }
  // 参数：不是标签绑定，委托书，业务场景
  scanSampleRef.value.initDialog(false, '2', '', 'list', dataForm.value.customerId)
}
// 扫描结束
const scanOver = (sampleList: any) => {
  console.log(sampleList)
  sampleList.forEach((item: any) => {
    list.value.push({
      ...item,
      isEdit: true, // 是否可编辑
      isExistSample: '1', // 是否存在样品库中 1存在、0不存在
      delId: getUid(),
    })
  })
  scanSampleRef.value.closeDialog()
}
// --------------------------------------------------------------------------------------

// 点击打印
const printPDF = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getStream({ id: infoId.value }).then((res) => {
    loading.close()
    const pdfStream = new Blob([res.data])
    const blobUrl = URL.createObjectURL(pdfStream)
    printPdf(blobUrl)
  })
}

// 获取详细信息
const getInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getOrderDetail({ id: infoId.value }).then((res) => {
    dataForm.value = res.data
    dataForm.value.phone = res.data.customerPhone

    if (`${res.data.accordLab}` === '1') {
      checkCertificateList.value.push('如无相应检定规程/校准规范,可按本实验室的方法进行校准')
    }
    if (`${res.data.agreeOther}` === '1') {
      checkCertificateList.value.push('如不能出具所选证书类型,同意受托方出具其他类型证书')
    }
    if (`${res.data.needAccordDeclare}` === '1') {
      checkCertificateList.value.push('需要符合性声明')
    }
    if (`${res.data.needAdvice}` === '1') {
      checkCertificateList.value.push('需要建议再校准日期')
    }
    if (`${res.data.contactReturn}` === '1') { // 需联系之后退件处理
      dataForm.value.needContact = '1'
    }
    if (`${res.data.directReturn}` === '1') { // 直接退件处理
      dataForm.value.needContact = '2'
    }
    orderType.value = res.data.orderType === '1' ? 'measure' : 'calibration' // 委托书类型

    list.value = res.data.customerSampleInfoList.map((item: any) => {
      return {
        ...item,
        sampleStatusName: item.sampleStatus ? sampleStatusMap.value[item.sampleStatus] : '',
      }
    })
    loading.close()
  })
}

// ---------------------------------------收件人-------------------------------------------------
const merterPersonRef = ref() // 计量人员Ref
// 点击选择
const selectReceivePerson = () => {
  merterPersonRef.value.initDialog()
}
// 选完计量人员
const confirmSelectPerson = (val: any) => {
  dataForm.value.staffNo = val[0].staffNo// 收件人工号
  dataForm.value.staffName = val[0].name// 收件人名称
}
// -----------------------------------------------------------------------------------------------
watch(() => orderType.value, (newValue) => {
  if (newValue === 'measure') {
    columns.value = columnsMeasure.value
  }
  else if (newValue === 'calibration') {
    columns.value = columnsCalibration.value
  }
}, { immediate: true })

watch(() => checkCertificateList.value, (list) => {
  console.log(list)
}, { deep: true })
onMounted(async () => {
  await getDict()
  orderType.value = $route.query.orderType as string // 委托书类型 1检测委托单、2检定或校准委托单
  // 非添加页面获取详情
  if (pageType.value !== 'add') {
    getInfo()
  }
})
</script>

<template>
  <app-container>
    <div id="main">
      <!-- <div class="customer-title">
        <img src="@/assets/images/logo.png" class="img">
        <div class="title">
          航天计量检测技术（江苏）有限公司
        </div>
      </div> -->
      <detail-page :title="orderType === 'measure' ? '检测委托单' : '检定或校准委托单'">
        <template #btns>
          <el-button v-if="pageType === 'detail'" type="primary" @click="printPDF">
            打印
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="saveForm(ruleFormRef)">
            保存
          </el-button>
          <el-button type="info" @click="close">
            关闭
          </el-button>
        </template>
        <div id="form">
          <el-form
            ref="ruleFormRef"
            :model="dataForm"
            :label-width="120"
            label-position="right"
            :rules="rules"
          >
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="委托书编号:" prop="orderCode">
                  <el-input
                    v-model="dataForm.orderCode"
                    :placeholder="pageType === 'detail' ? ' ' : '系统自动生成'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="委托方代码" prop="customerNo">
                  <el-input
                    v-model="dataForm.customerNo"
                    :placeholder="pageType === 'detail' ? ' ' : '请选择'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  >
                    <template v-if="pageType !== 'detail' && !isReceived" #append>
                      <el-button size="small" @click="customerNoFocus">
                        选择
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="委托方名称" prop="customerName">
                  <el-input
                    v-model="dataForm.customerName"
                    :placeholder="pageType === 'detail' ? ' ' : '委托方名称'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮政编码" prop="postalCode">
                  <el-input
                    v-model="dataForm.postalCode"
                    :placeholder="pageType === 'detail' ? ' ' : '邮政编码'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="委托方地址:">
                  <el-input
                    v-model="dataForm.customerAddress"
                    type="textarea"
                    autosize
                    :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="dataForm.deliverer"
                    :placeholder="pageType === 'detail' ? '' : '请输入联系人'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail' || isReceived"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="固定电话:" prop="phone">
                  <el-input
                    v-model="dataForm.phone"
                    :placeholder="pageType === 'detail' ? '' : '请输入固定电话'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail' || isReceived"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="移动电话:" prop="delivererTel">
                  <el-input
                    v-model="dataForm.delivererTel"
                    :placeholder="pageType === 'detail' ? '' : '请输入移动电话'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail' || isReceived"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="电子邮件/QQ:" prop="email">
                  <el-input
                    v-model="dataForm.email"
                    :placeholder="pageType === 'detail' ? '' : '请输入电子邮件/QQ'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail' || isReceived"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="预约送达时间:" prop="planDeliverTime">
                  <el-date-picker
                    v-model="dataForm.planDeliverTime"
                    type="datetime"
                    class="full-width-input"
                    :placeholder="pageType === 'detail' ? '' : '请输入预约送达时间'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail' || isReceived"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="预约取样时间:" prop="requireOverTime">
                  <el-date-picker
                    v-model="dataForm.requireOverTime"
                    type="date"
                    class="full-width-input"
                    :placeholder="pageType === 'detail' ? '' : '请输入预约取样时间'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail' || isReceived"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发票单位名称:" prop="invoiceCompany">
                  <el-input
                    v-model="dataForm.invoiceCompany"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail' || isReceived"
                    :placeholder="pageType === 'detail' ? '' : '请输入发票单位名称'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证书单位名称:" prop="certificationCompany">
                  <el-input
                    v-model="dataForm.certificationCompany"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail' || isReceived"
                    :placeholder="pageType === 'detail' ? '' : '请输入证书单位名称'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否加急:" prop="isUrgent">
                  <el-select v-model="dataForm.isUrgent" :placeholder="pageType === 'detail' ? '' : '请选择是否加急'" :disabled="pageType === 'detail'" class="full-width-input">
                    <el-option
                      v-for="i in isUrgentMap"
                      :key="i.value"
                      :label="i.name"
                      :value="i.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="证书单位地址:" prop="certificationCompanyAddress">
                  <el-input
                    v-model="dataForm.certificationCompanyAddress"
                    type="textarea"
                    autosize
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :placeholder="pageType === 'detail' ? '' : '请输入证书单位地址'"
                    :disabled="pageType === 'detail' || isReceived"
                  />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="送样人:" prop="deliverer">
                  <el-input
                    v-model="dataForm.deliverer"
                    :placeholder="pageType === 'detail' ? '' : '请输入送样人'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail' || isReceived"
                  />
                </el-form-item>
              </el-col> -->
              <!-- <el-col :span="8">
                <el-form-item label="联系方式:" prop="delivererTel">
                  <el-input
                    v-model="dataForm.delivererTel"
                    :placeholder="pageType === 'detail' ? '' : '请输入联系方式'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail' || isReceived"
                  />
                </el-form-item>
              </el-col> -->

              <!-- <el-col :span="8">
                <el-form-item label="委托日期:" prop="orderTime">
                  <el-date-picker
                    v-model="dataForm.orderTime"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    class="full-width-input"
                    :placeholder="pageType === 'detail' ? '' : '请输入委托日期'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail' || isReceived"
                  />
                </el-form-item>
              </el-col> -->
            </el-row>
            <el-row :gutter="24">
              <el-form-item label="说明:">
                <el-col :span="24" style="display: flex;align-items: center;">
                  <!-- <span style="font-weight: 600;font-size: 13px;">说明</span> -->
                  <span style="font-size: 13px;margin-right: 60px;">1.如仪器出现故障或不合格</span>
                  <el-radio-group v-model="dataForm.needContact" :disabled="pageType === 'detail' || isReceived">
                    <el-radio label="1">
                      需联络后再做退件处理
                    </el-radio>
                    <el-radio label="2">
                      直接退件处理
                    </el-radio>
                  </el-radio-group>
                </el-col>
              </el-form-item>
            </el-row>
            <el-row v-if="orderType === 'calibration'" :gutter="24">
              <el-form-item label=" ">
                <el-col :span="24" style="display: flex;align-items: center;">
                  <span style="font-size: 13px;margin-right: 60px;">2.对证书要求</span>
                  <el-checkbox-group v-model="checkCertificateList" :disabled="pageType === 'detail' || isReceived">
                    <el-checkbox label="需要符合性声明" />
                    <el-checkbox label="如无相应检定规程/校准规范,可按本实验室的方法进行校准" />
                    <el-checkbox label="需要建议再校准日期" />
                    <el-checkbox label="如不能出具所选证书类型,同意受托方出具其他类型证书" />
                  </el-checkbox-group>
                </el-col>
              </el-form-item>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="收件人工号:" prop="staffNo">
                  <el-input
                    v-model.trim="dataForm.staffNo"
                    :placeholder="pageType === 'detail' ? '' : '请选择收件人工号'"
                    disabled
                    class="full-width-input"
                    clearable
                  >
                    <template v-if="pageType !== 'detail'" #append>
                      <el-button
                        size="small"
                        @click="selectReceivePerson"
                      >
                        选择
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收件人姓名:" prop="staffName">
                  <el-input
                    v-model.trim="dataForm.staffName"
                    :placeholder="pageType === 'detail' ? '' : '请输入收件人姓名'"
                    disabled
                    class="full-width-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收件日期:" prop="receiveDate">
                  <el-date-picker
                    v-model="dataForm.receiveDate"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    class="full-width-input"
                    :placeholder="pageType === 'detail' ? '' : '请选择收件日期'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail' || isReceived"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="证书类别:" prop="certifications">
                  <el-select v-model="dataForm.certifications" :placeholder="pageType === 'detail' ? '' : '请选择证书类别'" :disabled="pageType === 'detail' || isReceived" class="full-width-input">
                    <el-option
                      v-for="i in certificationsMap"
                      :key="i.value"
                      :label="i.name"
                      :value="i.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="是否加急:" prop="isUrgent">
                  <el-select v-model="dataForm.isUrgent" :placeholder="pageType === 'detail' ? '' : '请选择是否加急'" :disabled="pageType === 'detail'" class="full-width-input">
                    <el-option
                      v-for="i in isUrgentMap"
                      :key="i.value"
                      :label="i.name"
                      :value="i.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row> -->
            <!-- <el-row :gutter="24" class="marg">
              <el-col :span="16">
                <el-form-item label="备注:">
                  <el-input
                    v-model="dataForm.remark"
                    type="textarea"
                    autosize
                    :placeholder="pageType === 'detail' ? '' : '请输入备注'"
                    :disabled="pageType === 'detail' || isReceived"
                    :class="{ 'detail-input': pageType === 'detail' }"
                  />
                </el-form-item>
              </el-col>
            </el-row> -->

            <!-- <el-row :gutter="24" class="marg">
              <el-col :span="16">
                <el-form-item label="附件:">
                  <show-photo v-if="dataForm.minioFileName" :minio-file-name="dataForm.minioFileName" />
                  <span v-else-if="pageType === 'detail'">无</span>
                  <input v-show="pageType === ''" ref="fileRef" type="file" @change="onFileChange">
                  <el-button v-if="pageType !== 'detail' && !isReceived" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': dataForm.minioFileName === '' ? '0px' : '20px' }" @click="upload">
                    {{ dataForm.minioFileName === '' ? '上传' : '更换附件' }}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row> -->
          </el-form>
          <div style="color: red;font-size: 13px;">
            *本委托单一式两份 双方各执一份
          </div>
        </div>
      </detail-page>
      <!-- 表格 -->
      <detail-block title="样品清单">
        <template #btns>
          <el-button v-if="pageType !== 'detail' && !isReceived" type="primary" @click="scan">
            扫描添加
          </el-button>
          <el-button v-if="pageType !== 'detail' && !isReceived" type="primary" @click="multiAdd">
            从样品库中添加
          </el-button>
          <el-button v-if="pageType !== 'detail' && !isReceived" type="primary" @click="addRow">
            增加行
          </el-button>
          <el-button v-if="pageType !== 'detail' && !isReceived" type="info" @click="delRow">
            删除行
          </el-button>
        </template>
        <el-table
          :data="list"
          border
          style="width: 100%;"
          max-height="600"
          @selection-change="handleSelectionChange"
          @row-dblclick="rowDblclick"
          @row-click="rowClick"
          @header-click="headerClick"
        >
          <el-table-column v-if="pageType !== 'detail' && !isReceived" 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="(pageType === 'add' || pageType === 'edit')" #default="scope">
              <!-- 手动增加行-名称、型号、编号可编辑 -->
              <el-input
                v-if="(!scope.row.sampleNo || scope.row.sampleNo === '系统自动生成') && (item.value === 'sampleNo' || item.value === 'sampleName' || item.value === 'sampleModel' || item.value === 'manufacturingNo') && scope.row.isEdit"
                v-model="scope.row[item.value]"
                :placeholder="item.value === 'sampleNo' ? '系统自动生成' : `请输入${item.text}`"
                :disabled="item.disabled"
              />
              <!-- 手动增加行可编辑：附件说明、检定项目、备注、检测依据标准 -->
              <el-input
                v-if="(item.value === 'appendixDescn' || item.value === 'measureContent' || item.value === 'remark' || item.value === 'appearanceStatus' || item.value === 'certificateRequire' || item.value === 'specialRequire' || item.value === 'accordStandard')"
                v-model="scope.row[item.value]"
                type="textarea"
                autosize
                :placeholder=" `请输入${item.text}`"
                :disabled="item.disabled || isReceived"
              />
              <!-- 除电源电压和样品编号另外的行 -->
              <!-- <span v-if="item.value !== 'powerVoltage' && item.value !== 'sampleNo' && item.value !== 'appendixDescn' && item.value !== 'measureContent' && !scope.row.isEdit">{{ scope.row[item.value] }}</span> -->
              <!-- 除样品编号另外的行 -->
              <span v-if="item.value !== 'specialRequire' && item.value !== 'certificateRequire' && item.value !== 'remark' && item.value !== 'accordStandard' && item.value !== 'sampleNo' && item.value !== 'appendixDescn' && item.value !== 'measureContent' && item.value !== 'appearanceStatus' && !scope.row.isEdit">{{ scope.row[item.value] }}</span>
              <!-- 样品编号不可编辑 -->
              <span v-if="item.value === 'sampleNo' && !scope.row.isEdit">{{ scope.row[item.value] || '系统自动生成' }}</span>
              <el-select v-if="item.value === 'powerVoltage' && scope.row.isEdit" v-model="scope.row[item.value]" :placeholder="`请选择${item.text}`">
                <el-option
                  v-for="i in powerVoltageMap"
                  :key="i.value"
                  :label="i.name"
                  :value="i.value"
                />
              </el-select>
              <!-- <span v-if="item.value === 'powerVoltage' && !scope.row.isEdit">{{ scope.row[item.value] }}</span> -->
            </template>
          </el-table-column>
        </el-table>
      </detail-block>
      <!-- 签章部分 -->
      <!-- <div class="receipt-signature">
        <div class="content">
          <div class="deliverer-time">
            <span class="text-title">送样人:</span>
            <span class="time">时ㅤ间:</span>
          </div>
        </div>
      </div> -->
      <!-- 公司信息 -->
      <!-- <div class="customer-info">
        <div v-for="item in customerInfoMap" :key="item.value" class="content">
          <div v-if="item.value === 'address' || item.value === 'postalCode' || item.value === 'tel'" class="title">
            {{ item.label }}:
          </div>
          <div v-if="item.value === 'address' || item.value === 'postalCode' || item.value === 'tel'" class="value">
            {{ item.name }}
          </div>
        </div>
      </div> -->
    </div>
    <!-- 选择委托方组件 -->
    <select-customer v-model:visible="visible" @confirmCheckout="confirmCheckout" @changeVisible="changeVisible" />
    <!-- 选择样品组件 -->
    <select-sample v-model:visible="sampleVisible" :customer-no="dataForm.customerNo" :customer-id="dataForm.customerId" :order-id="infoId" @clickConfirmSample="clickConfirmSample" @changeVisible="changeSampleVisible" />
    <scan-sample-dialog ref="scanSampleRef" title="扫描添加样品" @confirm="scanOver" />
    <!-- 选择计量人员组件列表 -->
    <select-staff-list ref="merterPersonRef" :is-multi-merter-person="false" @add="confirmSelectPerson" />
  </app-container>
</template>

<style lang="scss" scoped>
.customer-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  margin: 24px 0;

  .img {
    width: 32px;
    height: 32px;
    margin-right: 14px;
    vertical-align: middle;
  }
}

.customer-info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  margin: 40px 0;

  .content {
    display: flex;
    font-size: 14px;

    .title {
      font-weight: 600;
      color: #000;
    }

    .value {
      margin-left: 10px;
    }
  }
}

.selectBtn {
  position: absolute;
  top: 0;
  right: 0;
}

.receipt-signature {
  display: flex;
  justify-content: flex-end;
  margin-right: 300px;
  // padding: 50px 250px 50px 150px;
  padding: 50px;
  font-size: 28px;
  color: #000;
  font-weight: 600;

  .content {
    display: flex;
    position: relative;

    .img {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 2;
    }

    .img-name {
      position: absolute;
      left: 220px;
      top: -30px;
      z-index: 1;
    }

    .title {
      margin-right: 32px;
      letter-spacing: 6px;
    }

    .deliverer-time {
      display: flex;
      flex-direction: column;

      .text-title {
        letter-spacing: 2px;
      }

      .time {
        margin-top: 30px;
        letter-spacing: 2px;
      }

      .text {
        font-size: 24px;
        font-weight: 500;
        margin-left: 10px;
      }
    }
  }
}
</style>

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