<!-- 任务单详情 -->
<script lang="ts" setup name="OrderDetail">
import type { Ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { DateModelType, FormInstance, FormRules, UploadUserFile } from 'element-plus'
import dayjs from 'dayjs'
import { fromPairs } from 'lodash-es'
import type { IDetailTableList, IForm } from './order-interface'
import selectEquipmentDialog from './dialog/selectEquipment.vue'
import selectCustomerDialog from './dialog/selectCustomer.vue'
import ReplenishOrBackDialog from './dialog/replenishOrBackDialog.vue'
import selectFieldTestApprovalDialog from './dialog/selectFieldTestApprovalDialog.vue'
import { getDictByCode } from '@/api/system/dict'
import { getUid } from '@/utils/getUid'
import scanSampleDialog from '@/components/ScanSampleDialog/index.vue'
import type { dictType } from '@/global'
import { useCheckList } from '@/commonMethods/useCheckList'
import { useDoubleClickTableRow, useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable'
import useUserStore from '@/store/modules/user'
import { getUserList } from '@/api/system/user'
import { getAllDeptList, getDept, getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
import QRcodeDeviceDialog from '@/components/QRcodeDeviceDialog/index.vue'

import { addOrder, getOrderDetail, receiveOrder, updateOrder } from '@/api/business/manager/order'
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 页面类型字典
const user = useUserStore() // 用户信息
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // id
const ruleFormRef = ref() // 表单ref

// 表单
const form: Ref<IForm> = ref({
  orderNo: '', // 任务单编号
  delivererId: '', // 送检人id
  deliverer: '', // 送检人
  customerId: '', // 委托方id
  customerNo: '', // 委托方代码
  customerName: '', // 委托方名称
  customerPhone: '', // 委托方电话
  customerAddress: '', // 委托方地址
  planDeliverTime: '', // 预计送达时间
  requireOverTime: '', // 要求检完时间
  isUrgent: '0', // 是否加急
  maintainMajor: '', // 检修专业
  createUserId: '', // 创建人id
  createUserName: '', // 创建人
  createTime: '', // 创建时间
  measureCompany: '', // 检定（校准）单位
  undertakerId: '', // 承接人id
  undertakerName: '', // 承接人
  undertakeTime: '', // 承接时间
  receiveStatus: '', // 接收状态
  receiveIllustrate: '', // 接收说明
  isOnSiteCheck: 0, // 是否现场检定
  onSiteCheckTime: '', // 现场检定时间
  siteExecutiveId: '', // 现场测试、校准或检定审批单id
  siteExecutiveNo: '', // 现场测试、校准或检定审批单编号
  deptId: '', // 使用部门
  dataSource: '', // 来源模块
})
const onSiteCheckTimeRange = ref<[DateModelType, DateModelType]>(['', '']) // 现场检定时间范围

// 自定义校验规则--要求检完时间不能比预计送达时间大
const requireOverTimeValid = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('要求检完时间不能为空'))
  }
  if (new Date(form.value.planDeliverTime).getTime() >= new Date(form.value.requireOverTime).getTime()) {
    return callback(new Error('要求检完时间应大于预计送达时间'))
  }
  callback()
}
const rules = reactive<FormRules>({ // 表单验证规则
  deliverer: [{ required: true, message: '送检人不能为空', trigger: 'blur' }],
  customerName: [{ required: true, message: '委托方不能为空', trigger: ['change', 'blur'] }],
  // customerPhone: [{ required: true, message: '电话不能为空', trigger: 'change' }],
  planDeliverTime: [{ type: 'date', required: true, message: '预计送达时间不能为空', trigger: 'change' }],
  requireOverTime: [{ required: true, type: 'date', validator: requireOverTimeValid, trigger: 'change' }],
  isUrgent: [{ required: true, message: '是否加急不能为空', trigger: 'change' }],
  maintainMajor: [{ required: true, message: '检修专业不能为空', trigger: 'blur' }],
  receiveIllustrate: [{ required: true, message: '接收说明不能为空', trigger: 'blur' }],
  isOnSiteCheck: [{ required: true, message: '是否现场检定不能为空', trigger: 'blur' }],
  onSiteCheckTime: [{ required: true, message: '现场检定时间不能为空', trigger: 'blur' }],
  deptId: [{ required: true, message: '使用部门不能为空', trigger: 'blur' }],
})

// -------------------------------------------字典------------------------------------------
const isUrgentList = ref<dictType[]>([])// 是否加急
const statusList = ref<dictType[]>([])// 接收状态
const statusMap = ref({}) as any // 检定完成度、样品检定状态
const userList = ref<{ [key: string]: string }[]>([]) // 用户列表

// 获取字典值
async function getDict() {
  // 获取用户列表
  getUserList({ offset: 1, limit: 999999 }).then((res: any) => {
    userList.value = res.data.rows
  })
  // 检测完成度
  getDictByCode('sampleStatus').then((res) => {
    res.data.forEach((item: any) => {
      statusMap.value[`${item.value}`] = item.name
    })
  })
  // 是否加急
  const resIsUrgent = await getDictByCode('isUrgent')
  isUrgentList.value = resIsUrgent.data

  // 接收状态
  const resStatus = await getDictByCode('orderStatus')
  statusList.value = resStatus.data
}
// -----------------------------------------路由参数----------------------------------------
// 从路由中获取页面类型参数
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
  }
}
console.log('页面类型', pageType.value)

// -------------------------------------------表格(任务单列表)------------------------------------------
const list = ref<IDetailTableList[]>([])// 表格数据
const selectEquipmentRef = ref() // 选择智能模型组件ref
const isMulti = ref(false) // 表格是否多选
const selectIndex = ref(0) // 选择的第几列
const checkoutList = ref<IDetailTableList[]>([]) // 选中的内容
const columns = ref([]) as any // 表头

const columnsAdd = ref([
  // { text: '统一编号', value: 'sampleNo', align: 'center', width: '240', disabled: true, required: true },
  { text: '智能模型名称', value: 'sampleName', width: '240', align: 'center', disabled: true, required: true },
  { text: '规格型号', value: 'sampleModel', align: 'center', required: false },
  { text: '出厂编号', value: 'manufactureNo', align: 'center', required: false },
  { text: '厂商', value: 'manufacturer', align: 'center', required: false },
  // { text: '辅助字段', value: 'helpInstruction', align: 'center', required: false },
  // { text: '使用状态', value: 'usageStatusName', align: 'center', required: false },
  { text: '附件', value: 'appendixDescn', align: 'center', required: false },
  // { text: '外观和功能检查', value: 'appearanceInspect', align: 'center', required: false },
  { text: '特殊要求', value: 'specialRequire', align: 'center', required: false },
  // { text: '接收状态', value: 'specialRequire', align: 'center', required: false },
  // { text: '接收状态说明', value: 'specialRequire', align: 'center', required: false },
  // { text: '接收状态说明', value: 'specialRequire', align: 'center', required: false },
  // { text: '检校项目', value: 'measureContent', align: 'center', required: true },
])
const detailColumns = ref([
  // // { text: '统一编号', value: 'sampleNo', align: 'center', width: '240', disabled: true, required: true },
  // { text: '智能模型名称', value: 'sampleName', align: 'center', required: false },
  // { text: '规格型号', value: 'sampleModel', align: 'center', required: false },
  // { text: '出厂编号', value: 'manufactureNo', align: 'center', required: false },
  // { text: '厂商', value: 'manufacturer', align: 'center', required: false },
  // { text: '辅助字段', value: 'helpInstruction', align: 'center', required: false },
  // // { text: '使用状态', value: 'usageStatusName', align: 'center', required: false },
  // { text: '附件', value: 'appendixDescn', align: 'center', required: false },
  // // { text: '外观和功能检查', value: 'appearanceInspect', align: 'center', required: false },
  // { text: '特殊要求', value: 'specialRequire', align: 'center', required: false },
  // { text: '接收状态', value: 'receiveStatusName', align: 'center', required: false },
  // { text: '接收状态说明', value: '1', align: 'center', required: false },
  // { text: '特殊要求', value: 'specialRequire', align: 'center', required: false },
  // // { text: '检校项目', value: 'measureContent', align: 'center', required: true },
  // // { text: '受检智能模型状态', value: 'sampleStatusName', align: 'center' },
  // // { text: '检测完成度', value: 'measureCompletePercent', align: 'center' },
  // { text: '检定结果', value: 'measureCompletePercent', align: 'center' },
  // { text: '检定完成时间', value: 'measureCompleteTime', align: 'center', width: '180' },
  // { text: '检定说明', value: 'measureCompleteTime', align: 'center', width: '180' },

  // { text: '统一编号', value: 'sampleNo', align: 'center', width: '240', disabled: true, required: true },
  { text: '智能模型名称', value: 'sampleName', align: 'center', width: '240', disabled: true, required: true },
  { text: '型号规格', value: 'sampleModel', align: 'center', required: false },
  { text: '出厂编号', value: 'manufactureNo', align: 'center', required: false },
  { text: '厂商', value: 'manufacturer', align: 'center', required: false },
  { text: '辅助字段', value: 'helpInstruction', align: 'center', required: false },
  // { text: '使用状态', value: 'usageStatusName', align: 'center', required: false },
  { text: '附件', value: 'appendixDescn', align: 'center', required: false },
  // { text: '外观和功能检查', value: 'appearanceInspect', align: 'center', required: false },
  { text: '特殊要求', value: 'specialRequire', align: 'center', required: false },
  // { text: '检校项目', value: 'measureContent', align: 'center', required: true },
  { text: '受检智能模型状态', value: 'sampleStatusName', align: 'center' },
  { text: '检测完成度', value: 'measureCompletePercent', align: 'center' },
  { text: '检定完成时间', value: 'measureCompleteTime', align: 'center', width: '180' },
])

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

// 点击选择
const selectEquipment = (index: number) => {
  isMulti.value = false
  selectIndex.value = index
  selectEquipmentRef.value.initDialog(isMulti.value, form.value.customerId)
}

// 点击批量添加
const multiAdd = () => {
  if (!form.value.customerId) {
    ElMessage.warning('请先选择委托方')
    return false
  }
  isMulti.value = true
  selectEquipmentRef.value.initDialog(isMulti.value, form.value.customerId)
}

// 增加行
const addRow = () => {
  if (!form.value.customerId) {
    ElMessage.warning('请先选择委托方')
    return false
  }
  const checkResult = useCheckList(list.value, columns.value, '任务单列表') // 检查表格
  if (checkResult) {
    // useSetAllRowReadable(list.value)
    list.value.push({
      id: '', // 主键
      sampleId: '', // 智能模型id
      sampleNo: '', // 统一编号\智能模型编号
      sampleName: '', // 智能模型名称
      sampleModel: '', // 规格型号
      manufactureNo: '', // 出厂编号
      manufacturer: '', // 厂商
      appendixDescn: '', // 附件
      appearanceInspect: '', // 外观和功能检查
      specialRequire: '', // 特殊要求
      measureContent: '', // 检校项目
      editable: true,
    })
  }
}

// 选好智能模型
const clickConfirmEquipment = (val: Array<IDetailTableList>) => {
  console.log(val[0])

  if (isMulti.value) { // 多选
    val.forEach((item: IDetailTableList) => {
      // 只添加列表里不存在的
      const index = list.value.findIndex((i: IDetailTableList) => item.id === i.sampleId)
      if (index === -1) {
        const param = {
          // ...item,
          id: '', // 主键
          sampleId: item.id!, // 智能模型id
          sampleNo: item.equipmentNo!, // 统一编号\智能模型编号
          sampleName: item.equipmentName!, // 智能模型名称
          sampleModel: item.model!, // 规格型号
          manufactureNo: item.manufactureNo, // 出厂编号
          manufacturer: item.manufacturer, // 厂商
          appendixDescn: '', // 附件
          appearanceInspect: '', // 外观和功能检查
          specialRequire: '', // 特殊要求
          measureContent: '', // 检校项目
          helpInstruction: item.helpInstruction, // 辅助字段
          editable: true,
        }
        list.value.push(param)
      }
    })
  }
  else { // 单选
    const getValue = val[0]
    const index = list.value.findIndex((i: IDetailTableList) => val[0].equipmentNo === i.sampleNo)
    if (index !== -1) {
      ElMessage.warning('此智能模型已添加过')
      return
    }
    const param = {
      id: '', // 主键
      sampleId: getValue.id!, // 智能模型id
      sampleNo: getValue.equipmentNo!, // 统一编号\智能模型编号
      sampleName: getValue.equipmentName!, // 智能模型名称
      sampleModel: getValue.model!, // 规格型号
      appendixDescn: '', // 附件
      appearanceInspect: '', // 外观和功能检查
      manufactureNo: getValue.manufactureNo, // 出厂编号
      manufacturer: getValue.manufacturer, // 厂商
      specialRequire: '', // 特殊要求
      measureContent: '', // 检校项目
      helpInstruction: getValue.helpInstruction, // 辅助字段
      editable: true,
    }
    list.value.splice(selectIndex.value, 1, param)
  }
}

// 删除行
const delRow = () => {
  if (checkoutList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutList.value.forEach((item: IDetailTableList) => {
      list.value.forEach((element, index) => {
        if (element.sampleNo === item.sampleNo) {
          list.value.splice(index, 1)
        }
      })
    })
  }
}

// =============================补送、退回========================
const replenishOrBackDialogRef = ref() // 补送和退回组件ref
// 补送
const replenish = () => {
  if (!checkoutList.value.length) {
    ElMessage({
      message: '请选中需要补送配件的智能模型',
      type: 'warning',
    })
    return false
  }
  replenishOrBackDialogRef.value.initDialog(checkoutList.value, infoId.value, '补送详情', '1')
}
// 退回
const back = () => {
  if (!checkoutList.value.length) {
    ElMessage({
      message: '请选中需要退回的智能模型',
      type: 'warning',
    })
    return false
  }
  replenishOrBackDialogRef.value.initDialog(checkoutList.value, infoId.value, '退回原因', '2')
}

// 补送、退回完成
const onSuccess = () => {
  pageType.value = 'detail'
}

// ===============================================================
// 双击表格
const dblclick = (row: any) => {
  if (pageType.value !== 'detail' && form.value.receiveStatus !== '2') {
    // useDoubleClickTableRow(row, list.value)
  }
}
// ------------------------------------------委托方-----------------------------------------------
const selectCustomerRef = ref() // 委托方组件ref
// 点击选择委托方
const selectCustomer = () => {
  selectCustomerRef.value.initDialog()
}
// 选好委托方
const clickConfirmCustomer = (val: any) => {
  // 委托方变化智能模型清空
  if (val[0].customerNo !== form.value.customerNo) {
    list.value = []
  }
  if (val && val.length) {
    form.value.customerNo = val[0].customerNo // 委托方代码
    form.value.customerId = val[0].deptId // 委托方id、deptId是受检智能模型系统里的委托方id
    form.value.customerName = val[0].customerName // 委托方名称
    form.value.customerPhone = val[0].mobile // 委托方电话
    form.value.customerAddress = val[0].address // 委托方地址
  }
}
// --------------------------------------------绑定现场审批单-------------------------------------------
const selectFieldTestApprovalRef = ref() // 选择现场测试、校准或检定审批 组件ref
// 点击选择现场审批单
const selectFieldTestApproval = () => {
  selectFieldTestApprovalRef.value.initDialog()
}

// 确定选择
const confirmSelectedFieldTestApproval = (val: any) => {
  form.value.siteExecutiveId = val[0].id
  form.value.siteExecutiveName = val[0].siteExecutiveName
  form.value.siteExecutiveNo = val[0].siteExecutiveNo
}
// ---------------------------------------------其他方法-------------------------------------------
const $router = useRouter()
// 关闭新增页面的回调
const close = () => {
  $router.back()
}
const isFold = ref(true) // 是否展开状态
// 点击展开折叠切换
const trigger = () => {
  isFold.value = !isFold.value
}

// 点击保存
const saveForm = (formEl: FormInstance | undefined) => {
  if (!list.value.length) {
    ElMessage.warning('要求任务单列表不能为空')
    return
  }
  // 检查表格是否存在增加行信息没有完善的情况
  const checkResult = useCheckList(list.value, columns.value, '任务单列表') // 检查表格
  if (!checkResult) {
    return
  }
  useSetAllRowReadable(list.value) // 所有行退出编辑模式
  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 = {
          ...form.value,
          customerPhone: form.value.customerPhone, // 委托方电话
          customerSampleInfoList: list.value,
          id: infoId.value,
        }
        if (pageType.value === 'edit') { // 编辑
          updateOrder(params).then(() => {
            ElMessage.success('已保存')
            loading.close()
            pageType.value = 'detail'
          }).catch(() => {
            loading.close()
          })
        }
        if (pageType.value === 'add') { // 新建
          addOrder(params).then((res) => {
            ElMessage.success('已保存')
            loading.close()
            form.value.orderNo = res.data.orderNo// 任务编号
            infoId.value = res.data.id
            receiveOrder({ id: res.data.id })
            pageType.value = 'detail'
          }).catch(() => {
            loading.close()
          })
        }
      })
    }
  })
}

// 确定选择送检人
const selctedDeliverer = (id: string) => {
  const index = userList.value.findIndex(item => item.id === id)
  if (index !== -1) {
    form.value.deliverer = userList.value[index].name
  }
}

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

// 获取详细信息
const getInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getOrderDetail({ id: infoId.value }).then((res) => {
    form.value = res.data.data
    form.value.isUrgent = `${res.data.data.isUrgent}` // 是否加急
    list.value = res.data.data.customerSampleInfoList.map((item: { editable: Boolean; sampleStatus: string | number; onSiteCheckTime: string }) => {
      return {
        ...item,
        editable: pageType.value === 'detail' ? false : !(pageType.value === 'edit' && form.value.receiveStatus === '2'),
        sampleStatusName: `${item.sampleStatus}` ? statusMap.value[item.sampleStatus] : item.sampleStatus,
      }
    })
    if (res.data.data.onSiteCheckTime) {
      onSiteCheckTimeRange.value = res.data.data.onSiteCheckTime.split(',')
    }
    loading.close()
  })
}

// 编辑
const edit = () => {
  if (form.value.receiveStatus !== '2') {
    list.value.forEach((item) => {
      item.editable = true
    })
  }

  pageType.value = 'edit'
}
watch(() => pageType.value, (newValue) => {
  if (newValue === 'add') {
    columns.value = columnsAdd.value
  }
  else {
    columns.value = detailColumns.value
  }
}, { immediate: true })

watch(onSiteCheckTimeRange, (val) => { // 监听现场检定时间
  if (val) {
    form.value.onSiteCheckTime = val.join(',')
  }
  else {
    form.value.onSiteCheckTime = ''
  }
})

// ==============================使用部门========================================
const deptList = ref([]) as any // 使用部门列表
// 监听委托方变化，请求使用部门
watch(() => form.value.customerId, (newVal) => {
  if (newVal) {
    // getDeptTreeList({ pid: newVal }).then((res) => {
    //   deptList.value = toTreeList(res.data.map((item: any) => ({ ...item, label: item.name, value: item.id }))) as any
    // })
    form.value.deptId = ''
    getAllDeptList({ pid: newVal }).then((res) => {
      deptList.value = toTreeList(res.data.map((item: any) => ({ ...item, label: item.name, value: item.id }))) as any
    })
  }
}, {
  deep: true,
  immediate: true,
})
// 选中使用部门触发
const nodeClick = (data: any) => {
  form.value.deptName = data.name // 使用部门名称
}
// =============================================================================

onMounted(async () => {
  getDict().then(() => {
    // 非添加页面获取详情
    if (pageType.value === 'edit' || pageType.value === 'detail') {
      getInfo()
    }
    else { // 新建
      form.value.createUserId = user.id// 创建人id
      form.value.createUserName = user.name // 创建人
      form.value.undertakerName = user.name // 承接人
      form.value.undertakerId = user.id // 承接id
      form.value.createTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 创建时间
      form.value.undertakeTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 承接时间
      form.value.measureCompany = user.bizLabCode === 'H' ? '海口实验室' : user.bizLabCode === 'X' ? '西昌实验室' : '' // 检定（校准）单位
      form.value.receiveStatus = '1' // 新建的时候就是接收
      form.value.dataSource = '计量业务系统' // 新建的时候就是接收
    }
    isFold.value = pageType.value === 'detail' // 详情折叠，编辑新建展开
  })
})
</script>

<template>
  <div class="order-detail">
    <app-container>
      <detail-page :title="`任务单管理(${textMap[pageType]})`">
        <template #btns>
          <!-- <el-button v-if="pageType === 'detail' && form.receiveStatus === '2'" type="primary" @click="print">
            打印
          </el-button> -->
          <el-button v-if="pageType === 'detail' && (form.receiveStatus === '1' || form.receiveStatus === '2')" type="primary" @click="edit">
            编辑
          </el-button>
          <el-button v-if="pageType === 'detail'" type="primary" @click="trigger">
            展开/折叠
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="saveForm(ruleFormRef)">
            保存
          </el-button>
          <el-button type="info" @click="close">
            关闭
          </el-button>
        </template>
        <el-form
          ref="ruleFormRef"
          :model="form"
          :label-width="130"
          label-position="right"
          :rules="rules"
        >
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="任务单编号:" prop="orderNo">
                <el-input
                  v-model="form.orderNo"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="送检人" prop="delivererId">
                <el-input
                  v-if="form.dataSource !== '计量业务系统'"
                  v-model="form.deliverer"
                  :placeholder="pageType === 'detail' ? ' ' : '送检人'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
                <el-select
                  v-if="form.dataSource === '计量业务系统'"
                  v-model="form.delivererId"
                  filterable
                  :placeholder="pageType === 'detail' ? '' : '请输入送检人'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail' || (pageType === 'edit' && form.receiveStatus === '2')"
                  @change="selctedDeliverer"
                >
                  <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="customerName">
                <el-input
                  v-model="form.customerName"
                  :placeholder="pageType === 'detail' ? '' : '请选择'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                >
                  <template v-if="form.dataSource !== '受检智能模型系统' && (!(pageType === 'detail' || (pageType === 'edit' && form.receiveStatus === '2')))" #append>
                    <el-button size="small" @click="selectCustomer">
                      选择
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="使用部门" prop="deptId">
                <el-input v-if="pageType === 'detail' || form.dataSource === '受检智能模型系统'" v-model.trim="form.deptName" disabled />
                <el-tree-select
                  v-if="pageType !== 'detail' && form.dataSource === '计量业务系统'"
                  v-model="form.deptId"
                  style="width: 100%;"
                  :data="deptList"
                  :render-after-expand="false"
                  check-strictly
                  placeholder="使用部门"
                  :disabled="!form.customerId"
                  @node-click="nodeClick"
                />
              </el-form-item>
            </el-col>
            <el-col v-show="!isFold" :span="6">
              <el-form-item label="送检人电话" prop="customerPhone">
                <el-input
                  v-model="form.customerPhone"
                  :placeholder="pageType === 'detail' ? '' : '请输入送检人电话'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail' || (pageType === 'edit' && form.receiveStatus === '2')"
                />
              </el-form-item>
            </el-col>

            <el-col v-show="!isFold" :span="6">
              <el-form-item label="是否现场检定:" prop="isOnSiteCheck">
                <el-radio-group v-model="form.isOnSiteCheck" :disabled="pageType === 'detail' || (pageType === 'edit' && form.receiveStatus === '2') || form.dataSource === '受检智能模型系统'">
                  <el-radio :label="1">
                    是
                  </el-radio>
                  <el-radio :label="0">
                    否
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col v-show="!isFold" v-if="form.isOnSiteCheck === 1" :span="12">
              <el-form-item label="现场检定时间:" prop="onSiteCheckTime">
                <el-date-picker
                  v-model="onSiteCheckTimeRange"
                  type="daterange"
                  range-separator="至"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  start-placeholder="现场检定时间(开始)"
                  end-placeholder="现场检定时间(结束)"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col v-show="!isFold" v-if="form.isOnSiteCheck === 1" :span="6">
              <el-form-item label="现场检定审批单">
                <el-input
                  v-model="form.siteExecutiveNo"
                  :placeholder="pageType === 'detail' ? '' : '请选择'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                >
                  <template v-if="pageType !== 'detail'" #append>
                    <el-button size="small" @click="selectFieldTestApproval">
                      选择
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col v-show="!isFold" v-if="form.isOnSiteCheck === 0" :span="6">
              <el-form-item label="预计送达时间:" prop="planDeliverTime">
                <el-date-picker
                  v-model="form.planDeliverTime"
                  type="datetime"
                  class="full-width-input"
                  :placeholder="pageType === 'detail' ? '' : '请输入预计送达时间'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail' || (pageType === 'edit' && form.receiveStatus === '2')"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col v-show="!isFold" v-if="form.isOnSiteCheck === 0" :span="6">
              <el-form-item label="要求检完时间:" prop="requireOverTime">
                <el-date-picker
                  v-model="form.requireOverTime"
                  type="datetime"
                  class="full-width-input"
                  :placeholder="pageType === 'detail' ? '' : '请输入要求检完时间'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail' || (pageType === 'edit' && form.receiveStatus === '2')"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col v-show="!isFold" :span="6">
              <el-form-item label="是否加急:" prop="isUrgent">
                <el-select v-model="form.isUrgent" :placeholder="pageType === 'detail' ? '' : '请选择是否加急'" :disabled="pageType === 'detail'" 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="maintainMajor">
                <el-input
                  v-model="form.maintainMajor"
                  :placeholder="pageType === 'detail' ? '' : '请输入检修专业'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail' || (pageType === 'edit' && form.receiveStatus === '2')"
                />
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row v-show="!isFold" :gutter="24">
            <el-col :span="6">
              <el-form-item label="创建人:">
                <el-input v-model="form.createUserName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建时间:">
                <el-date-picker
                  v-model="form.createTime"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  disabled
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="委托方地址:">
                <el-input
                  v-model="form.customerAddress"
                  type="textarea"
                  :placeholder="pageType === 'detail' ? ' ' : '委托方地址'"
                  autosize
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="检定（校准）单位:">
                <el-input
                  v-model="form.measureCompany"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="承接人:">
                <el-input v-model="form.undertakerName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="承接时间:">
                <el-date-picker
                  v-model="form.undertakeTime"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  disabled
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="接收状态:">
                <el-select v-model="form.receiveStatus" :placeholder="pageType === 'detail' ? '' : '接收状态'" disabled class="full-width-input">
                  <el-option
                    v-for="i in statusList"
                    :key="i.value"
                    :label="i.name"
                    :value="i.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="!isFold" :gutter="24" class="marg" prop="receiveIllustrate">
            <el-col :span="12">
              <el-form-item label="接收说明:">
                <el-input
                  v-model="form.receiveIllustrate"
                  type="textarea"
                  autosize
                  :placeholder="pageType === 'detail' ? '' : '请输入接收说明'"
                  :disabled="pageType === 'detail' || (pageType === 'edit' && form.receiveStatus === '2')"
                  :class="{ 'detail-input': pageType === 'detail' }"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </detail-page>
      <!-- 表格 -->
      <detail-block title="任务单列表">
        <template #btns>
          <el-button v-if="pageType === 'detail' && form.receiveStatus === '2'" type="warning" @click="replenish">
            补送
          </el-button>
          <el-button v-if="pageType === 'detail' && form.receiveStatus === '2'" type="warning" @click="back">
            退回
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="scan('scanner')">
            扫码枪扫描添加
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="scan('rfid')">
            RFID扫描添加
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="multiAdd">
            批量添加
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="addRow">
            增加行
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="info" @click="delRow">
            删除行
          </el-button>
        </template>
        <el-table
          :data="list"
          border
          style="width: 100%;"
          max-height="600"
          @selection-change="handleSelectionChange"
          @row-dblclick="dblclick"
        >
          <el-table-column v-if="(pageType === 'detail' && form.receiveStatus === '2') || (pageType !== 'detail')" type="selection" width="38" />
          <!-- <el-table-column v-if="(pageType === 'detail' && form.receiveStatus === '2') || (pageType !== 'detail' && form.receiveStatus !== '2')" 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 #default="scope">
              <el-input
                v-if="scope.row.editable && item.value === 'sampleName'"
                v-model="scope.row[item.value]"
                placeholder="请选择"
                :disabled="item.disabled"
              >
                <template #append>
                  <el-button size="small" @click="selectEquipment(scope.$index)">
                    选择
                  </el-button>
                </template>
              </el-input>
              <el-input
                v-if="scope.row.editable && item.value !== 'sampleNo' && item.value !== 'sampleName' && item.value !== 'sampleModel' && item.value !== 'manufactureNo' && item.value !== 'manufacturer'
                  && item.value !== 'helpInstruction' && item.value !== 'receiveStatus'"
                v-model="scope.row[item.value]"
                :placeholder="item.text"
              />
              <span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </detail-block>
      <!-- 选择委托方组件 -->
      <select-customer-dialog ref="selectCustomerRef" @confirm="clickConfirmCustomer" />
      <!-- 选择智能模型组件 -->
      <select-equipment-dialog ref="selectEquipmentRef" :is-multi="isMulti" @confirm="clickConfirmEquipment" />
      <!-- 扫描 -->
      <scan-sample-dialog ref="scanSampleRef" title="扫描添加智能模型" @confirm="scanOver" />
      <!-- 补送、退回组件 -->
      <replenish-or-back-dialog ref="replenishOrBackDialogRef" @on-success="onSuccess" />
      <!-- 选择现场测试、校准或检定审批 -->
      <select-field-test-approval-dialog ref="selectFieldTestApprovalRef" @confirm="confirmSelectedFieldTestApproval" />
      <!-- 扫码枪扫描收入  -->
      <q-rcode-device-dialog ref="QRcodeDeviceDialogRef" @confirm="scanOver" />
    </app-container>
  </div>
</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">
.order-detail {
  .el-radio__label {
    display: block !important;
  }
}
</style>