<script lang="ts" setup name="ReceiptList">
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import dayjs from 'dayjs'
import type { IReceiptDetail, ISampleList, dictType } from './receiptList-interface'
import selectOrder from './selectOrder.vue'
import selectCustomer from '@/views/customer/sample/list/selectCustomer.vue'
import selectSample from '@/views/business/schedule/order/selectSample.vue'
import userStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import type { ICustomer } from '@/views/customer/customerInfo/customer_interface'
import type { IOrderList } from '@/views/business/schedule/order/orderList_interface'
import BarCodeBind from '@/components/BarCodeBind/index.vue'
import type { queryType, typeofSign } from '@/views/system/tool/tool_interface'
import { listPageApi } from '@/api/system/tool'
import showPhoto from '@/views/system/tool/showPhoto.vue'

const user = userStore()
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // id
const customerVisible = ref(false) // 控制选择委托方对话框显隐
const sampleVisible = ref(false) // 控制选择样品对话框显隐
const orderVisible = ref(false) // 控制委托书对话框显隐
const customerInfoMap = ref<dictType[]>([]) // 系统字典--航天计量检测技术（江苏）有限公司基本信息
const mesureCategoryList = ref<dictType[]>([]) // 校检类别
const secrecyList = ref<dictType[]>([]) // 保密要求
const minioFileNameSignature = ref() // 签章图片
const minioFileNameAutograph = ref() // 签名图片
const ruleFormRef = ref() // 表单ref
// 表单
const dataForm: Ref<IReceiptDetail> = ref({
  interchangeCode: '', // 交接单编号
  orderCode: '', // 委托书编号
  certificationCompany: '', // 证书单位名称
  certificationCompanyFex: '', // 传真
  certificationCompanyEmail: '', // 邮编
  reciever: user.name, // 接收人
  recieverPhone: '', // 接收人电话
  certificationCompanyAddress: '', // 证书单位地址
  customerNo: '', // 委托方代码
  customerId: '', // 委托方id
  customerName: '', // 委托方名称
  fax: '', // 委托方传真
  postalCode: '', // 委托邮编
  customerAddress: '', // 委托方地址
  deliverer: '', // 送检人
  delivererTel: '', // 送样人联系方式
  orderTime: '', // 委托日期
  requireOverTime: '', // 完成时间
  deliverTime: '', // 交接时间
  measureCategory: '', // 检校类别
  secrecy: '', // 保密要求
  appearance: '', // 样品外观
  relyFile: '', // 依据文件
})
// 表单验证规则
const rules = reactive<FormRules>({
  orderCode: [{ required: true, message: '要求委托书编号不能为空', trigger: 'blur,change' }],
  certificationCompany: [{ required: true, message: '要求证书单位名称不能为空', trigger: 'blur' }],
  certificationCompanyFex: [{ required: true, message: '要求证书单位传真不能为空', trigger: 'blur' }],
  certificationCompanyEmail: [{ required: true, message: '要求证书单位邮编不能为空', trigger: 'blur' }],
  certificationCompanyAddress: [{ required: true, message: '要求证书单位地址不能为空', trigger: 'blur' }],
  reciever: [{ required: true, message: '要求接收人不能为空', trigger: 'blur' }],
  recieverPhone: [{ required: true, message: '要求接收人电话/手机不能为空', trigger: 'blur' }],
  customerNo: [{ required: true, message: '要求委托方代码不能为空', trigger: 'change' }],
  customerName: [{ required: true, message: '要求委托方名称不能为空', trigger: 'change' }],
  fax: [{ required: true, message: '要求委托方传真不能为空', trigger: 'change' }],
  postalCode: [{ required: true, message: '要求委托方邮编不能为空', trigger: 'change' }],
  customerAddress: [{ required: true, message: '要求委托方地址不能为空', trigger: 'change' }],
  deliverer: [{ required: true, message: '要求送检人不能为空', trigger: 'blur' }],
  delivererTel: [{ required: true, message: '要求送检人电话/手机不能为空', trigger: 'blur' }],
  orderTime: [{ type: 'date', required: true, message: '要求委托日期不能为空', trigger: 'change' }],
  requireOverTime: [{ type: 'date', required: true, message: '要求完成时间不能为空', trigger: 'change' }],
  deliverTime: [{ type: 'date', required: true, message: '要求交接时间不能为空', trigger: 'change' }],
  measureCategory: [{ required: true, message: '要求校检类别不能为空', trigger: 'change' }],
  secrecy: [{ required: true, message: '要求保密要求不能为空', trigger: 'change' }],
})
const list = ref<ISampleList[]>([])// 表格数据-样品
// 选中的内容
const checkoutList = ref([])
// 表头
const columns = ref([
  { text: '样品编号', value: 'sampleNo', align: 'center', width: '170', disabled: true },
  { text: '样品名称', value: 'sampleName', align: 'center', required: true },
  { text: '型号', value: 'sampleModel', align: 'center', required: true },
  { text: '出厂编号', value: 'manufacturingNo', align: 'center', required: true },
  { text: '附件说明', value: 'appendixDescn', align: 'center' },
  { text: '外观', value: 'appearance', align: 'center' },
  { text: '检定要求', value: 'specialRequire', align: 'center' },
])

// 签章查询数据
const searchQuerySignature = reactive<queryType>({
  signNo: 'qmqz202212050009', // 编号
  signName: '', // 名称
  signDirector: '', // 负责人
  createEndTime: '',
  createStartTime: '',
  ids: [],
  limit: 20,
  offset: 1,
  signType: '', // 1签名、2签章
})
// 签名查询数据
const searchQueryAutograph = reactive<queryType>({
  signNo: '', // 编号
  signName: '', // 名称
  signDirector: '', // 负责人
  createStartTime: '',
  createEndTime: '',
  limit: 20,
  offset: 1,
  signType: '',
  ids: [],
})

// 获取字典值
async function getDict() {
  // 校检类别
  getDictByCode('measureCategory').then((response) => {
    mesureCategoryList.value = response.data
  })
  // 系统字典
  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 = '电话'
      }
      else if (item.value === 'fax') {
        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
  })
  // 保密要求
  getDictByCode('secrecy').then((response) => {
    secrecyList.value = response.data
  })
  // 获取类型（签名、签章）
  const res = await getDictByCode('signType')
  searchQuerySignature.signType = res.data.filter((item: typeofSign) => item.name === '签章')[0].value
  searchQueryAutograph.signType = res.data.filter((item: typeofSign) => item.name === '签名')[0].value
  console.log(res.data.filter((item: typeofSign) => item.name === '签章')[0].value)
  console.log(searchQuerySignature.signType)
  console.log(searchQueryAutograph.signType)
}

// 获取签章数据
const getSignatureList = () => {
  listPageApi(searchQuerySignature).then((res) => {
    if (res.code === 200) {
      minioFileNameSignature.value = res.data.rows[0].minioFileName
    }
  })
}
// 获取签名数据
const getAutographList = () => {
  listPageApi(searchQueryAutograph).then((res) => {
    if (res.code === 200) {
      minioFileNameAutograph.value = res.data.rows[0].minioFileName
    }
  })
}

// 从路由中获取页面类型参数
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
  }
}

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

// 点击提交
const submit = () => {}

// ------------------------委托书-----------------------------
// 点击选择委托书编号
const handleClickOrder = () => {
  orderVisible.value = true
}
// 修改委托书对话框显隐
const changeOrderVisible = (val: boolean) => {
  orderVisible.value = val
}
// 选好委托书
const confirmCheckoutOrder = (val: Array<IOrderList>) => {
  if (val && val.length) {
    dataForm.value.orderCode = val[0].orderCode // 委托书编号
    dataForm.value.orderTime = val[0].orderTime // 委托日期
    dataForm.value.requireOverTime = val[0].requireOverTime // 完成时间
  }
}

// ------------------------委托方-----------------------------
// 点击选择委托方编号
const handleClickCustomer = () => {
  customerVisible.value = true
}
// 修改委托方对话框显隐
const changeCustomerVisible = (val: boolean) => {
  customerVisible.value = val
}
// 选好委托方
const confirmCheckoutCustomer = (val: Array<ICustomer>) => {
  if (val && val.length) {
    list.value = [] // 切换委托方时把样品清单置空
    const getValue = val[0]
    dataForm.value.customerNo = getValue.customerNo // 委托方代码
    dataForm.value.customerId = getValue.id // 委托方id
    dataForm.value.customerName = getValue.customerName // 委托方名称
    dataForm.value.postalCode = getValue.postalCode // 委托方邮编
    dataForm.value.fax = getValue.fax // 委托方传真
    dataForm.value.customerAddress = getValue.fullAddress // 委托方地址
  }
}

// ------------------------样品-----------------------------
// 点击批量增加
const multiAdd = () => {
  if (!dataForm.value.customerNo) {
    ElMessage.warning('请先选择委托方')
    return
  }
  sampleVisible.value = true
}
// 修改委托方对话框显隐
const changeSampleVisible = (val: boolean) => {
  sampleVisible.value = val
}
// 选好样品
const clickConfirmSample = (val: Array<ISampleList>) => {
  if (val && val.length) {
    val.forEach((item: ISampleList) => {
    // 只添加列表里不存在的
      const index = list.value.findIndex((i: ISampleList) => item.sampleNo === i.sampleNo)
      if (index === -1) {
        list.value.push({
          ...item,
        })
      }
    })
  }
}
// 多选发生改变时
function handleSelectionChange(e: any) {
  checkoutList.value = e
}
// 删除行
const delRow = () => {
  checkoutList.value.forEach((item: ISampleList) => {
    const index = list.value.findIndex((i: ISampleList) => item.sampleNo === i.sampleNo)
    if (index !== -1) {
      list.value.splice(index, 1)
    }
  })
}

// 点击保存
const saveForm = (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  formEl.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        if (pageType.value === 'edit') { // 编辑
          // updateOrder(params).then(() => {
          //   ElMessage.success('已保存')
          //   $router.go(-1)
          // })
        }
        if (pageType.value === 'add') { // 新建
          // addOrder(params).then(() => {
          //   ElMessage.success('已保存')
          //   $router.go(-1)
          // })
        }
      })
    }
  })
}

// 点击扫描添加
const barCodeBind = ref()
const scanAdd = () => {
  barCodeBind.value.initDialog('')
}
// 扫描完成
const bindLabelOver = () => {
  // 逻辑
}

// 接收人表单失去焦点--调用签名管理数据
const receiverBlur = () => {
  getAutographList()
}

// 表格双击行
const rowDblclick = (row: ISampleList) => {
  row.isEdit = true
}

onMounted(async () => {
  if (pageType.value === 'add') {
    dataForm.value.deliverTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') // 交接时间
  }
  await getDict()
  getSignatureList()
})
</script>

<template>
  <app-container>
    <div id="main">
      <div v-if="dataForm.interchangeCode" class="orderNo-title">
        <span>交接单编号：</span>
        <span>{{ dataForm.interchangeCode }}</span>
      </div>
      <div class="customer-title">
        <img src="@/assets/images/logo.png" class="img">
        <div class="title">
          航天计量检测技术（江苏）有限公司
        </div>
      </div>
      <detail-page title="设备交接单">
        <template #btns>
          <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="6">
                <el-form-item label="委托书编号:" prop="orderCode">
                  <el-input
                    v-model="dataForm.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="6">
                <el-form-item label="证书单位名称:" prop="certificationCompany">
                  <el-input
                    v-model="dataForm.certificationCompany"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                    :placeholder="pageType === 'detail' ? '' : '请输入证书单位名称'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="传真:" prop="certificationCompanyFex">
                  <el-input
                    v-model="dataForm.certificationCompanyFex"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                    :placeholder="pageType === 'detail' ? '' : '请输入证书单位传真'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="邮编:" prop="certificationCompanyEmail">
                  <el-input
                    v-model="dataForm.certificationCompanyEmail"
                    :placeholder="pageType === 'detail' ? '' : '请输入证书单位邮编'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <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'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="接收人:" prop="reciever">
                  <el-input
                    v-model="dataForm.reciever"
                    :placeholder="pageType === 'detail' ? '' : '请输入接收人'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                    @blur="receiverBlur"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="电话/手机:" prop="recieverPhone">
                  <el-input
                    v-model="dataForm.recieverPhone"
                    :placeholder="pageType === 'detail' ? '' : '请输入接收人电话/手机'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="6">
                <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'" #append>
                      <el-button size="small" @click="handleClickCustomer">
                        选择
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <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="6">
                <el-form-item label="传真:" prop="fax">
                  <el-input
                    v-model="dataForm.fax"
                    :placeholder="pageType === 'detail' ? '' : '请输入委托方传真'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <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-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="委托方地址:" prop="customerAddress">
                  <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="6">
                <el-form-item label="送检人" prop="deliverer">
                  <el-input
                    v-model="dataForm.deliverer"
                    :placeholder="pageType === 'detail' ? '' : '请输入送检人'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="电话/手机" prop="delivererTel">
                  <el-input
                    v-model="dataForm.delivererTel"
                    :placeholder="pageType === 'detail' ? '' : '请输入送检人电话/手机'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="6">
                <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
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="完成时间:" prop="requireOverTime">
                  <el-date-picker
                    v-model="dataForm.requireOverTime"
                    type="datetime"
                    class="full-width-input"
                    :placeholder="pageType === 'detail' ? '' : '请选择完成时间'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="交接时间:" prop="deliverTime">
                  <el-date-picker
                    v-model="dataForm.deliverTime"
                    type="datetime"
                    class="full-width-input"
                    :placeholder="pageType === 'detail' ? '' : '请选择交接时间'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="校检类别:" prop="measureCategory">
                  <el-select
                    v-model="dataForm.measureCategory"
                    :placeholder="pageType === 'detail' ? '' : '请选择校检类别'"
                    :disabled="pageType === 'detail'"
                    class="full-width-input"
                  >
                    <el-option v-for="item of mesureCategoryList" :key="item.value" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="保密要求:" prop="secrecy">
                  <el-select
                    v-model="dataForm.secrecy"
                    :placeholder="pageType === 'detail' ? '' : '请选择保密要求'"
                    :disabled="pageType === 'detail'"
                    class="full-width-input"
                  >
                    <el-option v-for="item of secrecyList" :key="item.value" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- <el-row :gutter="24" class="marg">
              <el-col :span="12">
                <el-form-item label="样品外观:">
                  <el-input
                    v-model="dataForm.appearance"
                    type="textarea"
                    autosize
                    :placeholder="pageType === 'detail' ? '' : '请输入样品外观'"
                    :disabled="pageType === 'detail'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                  />
                </el-form-item>
              </el-col>
            </el-row> -->
            <el-row :gutter="24" class="marg">
              <el-col :span="12">
                <el-form-item label="依据文件:">
                  <el-input
                    v-model="dataForm.relyFile"
                    type="textarea"
                    autosize
                    :placeholder="pageType === 'detail' ? '' : '请输入依据文件'"
                    :disabled="pageType === 'detail'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </detail-page>
      <!-- 表格 -->
      <detail-block title="被测样品列表">
        <template #btns>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="scanAdd">
            扫描添加
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="multiAdd">
            批量添加
          </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="rowDblclick"
        >
          <el-table-column v-if="pageType !== 'detail'" type="selection" width="38" />
          <el-table-column align="center" label="序号" width="80" type="index" />
          <el-table-column
            v-for="item in columns"
            :key="item.value"
            :prop="item.value"
            :label="item.text"
            :width="item.width"
            show-overflow-tooltip
            align="center"
          >
            <template v-if="item.value === 'specialRequire' && (pageType === 'add' || pageType === 'edit')" #default="scope">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.specialRequire"
                placeholder="请输入检定要求"
                class="input"
              />
              <span v-else>{{ scope.row.specialRequire }}</span>
            </template>
          </el-table-column>
        </el-table>
      </detail-block>
      <!-- 签章部分 -->
      <div class="receipt-signature">
        <div class="content">
          <span class="title">甲方</span>
          <div class="deliverer-time">
            <span class="text-title">送检人:</span>
            <span class="time">时ㅤ间:</span>
          </div>
        </div>
        <div class="content">
          <span class="title">乙方</span>

          <div class="deliverer-time">
            <div class="img">
              <show-photo height="111px" width="183px" :minio-file-name="minioFileNameSignature" />
            </div>
            <div class="img-name">
              <show-photo height="100px" width="200px" :minio-file-name="minioFileNameAutograph" />
            </div>

            <span class="text-title">接收人:</span>
            <div style="margin-top: 30px;">
              <span class="time" style="margin-top: 20px;">时ㅤ间: </span>
              <span class="text">{{ dataForm.deliverTime }}</span>
            </div>
          </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' || item.value === 'fax'" class="title">
            {{ item.label }}:
          </div>
          <div v-if="item.value === 'address' || item.value === 'postalCode' || item.value === 'tel' || item.value === 'fax'" class="value">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <!-- 选择委托方组件 -->
    <select-customer v-model:visible="customerVisible" @confirmCheckout="confirmCheckoutCustomer" @changeVisible="changeCustomerVisible" />
    <!-- 选择样品组件 -->
    <select-sample v-model:visible="sampleVisible" :customer-no="dataForm.customerNo" @clickConfirmSample="clickConfirmSample" @changeVisible="changeSampleVisible" />
    <!-- 选择委托书组件 -->
    <select-order v-model:visible="orderVisible" @confirmCheckout="confirmCheckoutOrder" @changeVisible="changeOrderVisible" />
    <!-- 标签绑定 -->
    <bar-code-bind ref="barCodeBind" @confirm="bindLabelOver" />
  </app-container>
</template>

<style lang="scss" scoped>
.orderNo-title {
  font-size: 13px;
  color: #606266;
}

.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;
    }
  }
}

.receipt-signature {
  display: flex;
  justify-content: space-around;
  // 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>