<template>
  <basic-container>
    <div class="avue-crud" v-loading="pageLoading">
      <el-divider>基本信息</el-divider>
      <!--      <avue-form :option="propertyoption"  ref="myForm" v-model="dataForm"  @row-update="rowUpdate" >-->
      <!--        <template #input="{row}">-->
      <!--          <el-tag>序号:{{row.$index}}-数据:{{row.input}}</el-tag>-->
      <!--        </template>-->
      <!--      </avue-form>-->
      <el-row :gutter="24" class="rows">
        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <span>提货批次：{{ data.pickupBatch }} </span>
        </el-col>
        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <span>服务号：{{ data.serviceNumber }} </span>
        </el-col>
        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <span>运单号：{{ data.waybillNumber }} </span>
        </el-col>
      </el-row>

      <el-row :gutter="24" class="rows">
        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <span>收货单位：{{ data.consigneeUnit }} </span>
        </el-col>
        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <span>收货人：{{ data.customerName }} </span>
        </el-col>
        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <!--          <span>{{deliverydata.loadingTeamType}} </span> -->
          <span>联系电话： {{ data.customerTelephone }} </span>
        </el-col>
      </el-row>

      <el-row :gutter="24" class="rows">
        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <!--          <span>{{deliverydata.loadingTeamType}} </span> -->
          <span>计划件数： {{ data.planNum }} </span>
        </el-col>
        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <span>实提件数：{{ data.realNum }} </span>
        </el-col>
        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <!--          <span>{{deliverydata.loadingTeamType}} </span> -->
          <span>签收人： {{ data.signforUserName || '暂无' }} </span>
        </el-col>
      </el-row>

      <el-row :gutter="24" class="rows">
        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <!--          <span>{{deliverydata.loadingTeamType}} </span> -->
          <span>审核人： {{ data.examineUserName || '暂无' }} </span>
        </el-col>

        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <span>审核时间：{{ data.examineTime || '暂无' }} </span>
        </el-col>
      </el-row>
      <el-divider>签收图片</el-divider>

      <div class="siginImg_container">
        <div v-for="item in siginImgList" :key="item.dictValue">
          <div class="siginImg_title">{{ item.dictValue }}：</div>

          <el-image
            v-for="(value, index) in item.imgList"
            class="siginImg"
            style="width: 100px; height: 100px"
            :src="value.urlRoute"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="item.imgList.map(val => val.urlRoute)"
            :initial-index="4"
            fit="cover"
          />
        </div>
      </div>

      <el-divider>订单列表</el-divider>

      <el-button style="margin-bottom: 10px" type="primary" icon="Position" @click="Listexport"
        >导出</el-button
      >
      <el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="订 单 列 表" name="tab2">
          <!-- <el-button type="primary" icon="Position" @click="Orderexport">订单导出</el-button> -->
          <!-- 列表模块 -->
          <tablecmt
            isNotSave
            ref="tableNodeOrderRef"
            :columnList="columnListarrs.ordoption"
            :tableData="orddata"
            :loading="loading"
            @inputTxt="inputsc"
            @timeCheck="timesc"
            @btnCheck="btnsc"
            @selectCheck="selectsc"
            @selection="selectionChange"
          >
            <template #default="slotProps"> </template>
          </tablecmt>
          <div class="avue-crud__pagination" style="width: 100%">
            <!-- 分页模块 -->
            <el-pagination
              align="right"
              background
              @size-change="sizeOrderChange"
              @current-change="currentOrderChange"
              :current-page="ordpage.currentPage"
              :page-sizes="[30, 50, 80, 120, 200]"
              :page-size="ordpage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="ordpage.total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="包 件 列 表" name="tab3">
          <!-- <el-button type="primary" icon="Position" @click="Packageexport">包件导出</el-button> -->
          <el-button type="warning" plain icon="el-icon-camera" @click="handleqr('')"
            >批量查看二维码
          </el-button>
          <el-button
            type="warning"
            plain
            v-if="permission.Self_pickup_receipt"
            @click="Selfpickupreceipt"
            ><el-icon><EditPen /></el-icon>批量签收
          </el-button>
          <!-- 列表模块 -->
          <tablecmt
            isNotSave
            ref="tableNodePackageRef"
            :columnList="columnListarrs.wrapoption"
            :tableData="packdata"
            :loading="loading"
            @inputTxt="inputsc"
            @timeCheck="timesc"
            @btnCheck="btnsc"
            @selectCheck="selectsc"
            @selection="selectionChange"
          >
            <template #default="slotProps">
              <el-text size="small" @click="ViewingTrajectories(slotProps.scope.row)"
                >查看轨迹</el-text
              >
              <el-text size="small" @click="handleqr(slotProps.scope.row)">查看二维码</el-text>
            </template>
          </tablecmt>
          <div class="avue-crud__pagination" style="width: 100%">
            <!-- 分页模块 -->
            <el-pagination
              align="right"
              background
              @size-change="psizeChange"
              @current-change="pcurrentChange"
              :current-page="packpage.currentPage"
              :page-sizes="[30, 50, 80, 120, 200]"
              :page-size="packpage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="packpage.total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="库 存 品 列 表" name="tab4">
          <!-- <el-button type="primary" icon="Position" @click="Inventoryexport">库存品导出</el-button> -->

          <!-- 列表模块 -->
          <tablecmt
            isNotSave
            ref="tableNodeInventoryRef"
            :columnList="columnListarrs.inventoryoption"
            :tableData="inventorydata"
            :loading="loading"
            @inputTxt="inputsc"
            @timeCheck="timesc"
            @btnCheck="btnsc"
            @selectCheck="selectsc"
            @selection="selectionChange"
          >
            <template #default="slotProps">
              <el-text
                v-if="slotProps.scope.row.stockStatus == '备货完成'"
                @click="handleInventoryQRCode(slotProps.scope.row)"
                >查看二维码</el-text
              >
            </template>
          </tablecmt>
          <div class="avue-crud__pagination" style="width: 100%">
            <!-- 分页模块 -->
            <el-pagination
              align="right"
              background
              @size-change="sizeInChange"
              @current-change="currentInChange"
              :current-page="inventorypage.currentPage"
              :page-sizes="[30, 50, 80, 120, 200]"
              :page-size="inventorypage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="inventorypage.total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="footer_container" v-if="$route.query.type === 'sigin'">
      <el-button type="primary" icon="Position" @click="handleSigin">确认提货</el-button>
    </div>
  </basic-container>

  <!-- 二维码打印 -->
  <!-- <el-dialog title="二维码" :visible.sync="dialogVisible" width="780px" v-model="dialogVisible">
    <div>
      <div v-html="html"></div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="printTemplate">打 印</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog> -->
  <MyPrint :html="html" v-model="dialogVisible" :isShowExport="false" type="titlePrint"></MyPrint>
</template>

<script>
import {
  getDetail,
  add,
  update,
  remove,
  getPackDetail,
  getInventoryDetail,
  getViewDetailOwn,
  getBillLadingDetail,
  getOrderDetail,
  $_checkBillLadingIsRelease,
  $_batchSign,
} from '@/api/distribution/distrilbutionBillLading';
import { showOrderPackgeCode } from '@/api/distribution/distributionStockArticle';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getLodop } from '@/utils/LodopFuncs.js';

import { getPrintTemplate } from '@/api/basicdata/basicdataGoodsAllocation';
import { showInventoryPackgeCode } from '@/api/distribution/distributionStockList';
import option from '@/option/basic/basicPdarecords';
import { mapGetters } from 'vuex';
import { getDictionaryBiz } from '@/api/system/dict';
import dayjs from 'dayjs';
import { getToken } from '@/utils/auth';
import NProgress from 'nprogress';
import { downloadXls, hanleTextLineFeed, setNodeHeight } from '@/utils/util';
import { exportBlob } from '@/api/common';
import { dateNow } from '@/utils/date';
import print from '@/utils/print';
export default {
  data() {
    return {
      materialQRCode: '',
      allselectionList: [], //选择的订单

      columnListarrs: {
        // 订单列表
        ordoption: [
          {
            prop: 'serviceNumber',
            label: '服务号',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false,
          },
          {
            prop: 'waybillNumber',
            label: '运单号',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false,
          },

          // {
          //   prop: 'trainNumber',
          //   label: '客户车次号',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: true,
          //   sortable: true,
          //   head: false,
          // },
          {
            prop: 'sendWarehouseName',
            label: '始发仓',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
          },
          {
            prop: 'orderCode',
            label: '订单自编号',
            type: 2,
            values: '',
            width: '200',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false,
          },
          {
            prop: 'descriptionGoods',
            label: '货物名称',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'materialName',
            label: '物料名称',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'totalNumber', //需要新增字段
            label: '订单总数',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            isshowSummary: true,
            head: false,
          },

          {
            prop: 'handQuantity', //需要新增字段
            label: '计划件数',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            isshowSummary: true,
            head: false,
          },
          {
            prop: 'preparedQuantity',
            label: '备货件数',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            isshowSummary: true,
            head: false,
          },
          {
            prop: 'pickUpQuantity', //需要新增字段
            label: '实提件数',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            isshowSummary: true,
            head: false,
          },
          {
            prop: 'stockupStatusName',
            label: '备货状态',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'conditionsName', //需要新增字段
            label: '提货状态',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },

          // {
          //   prop: 'preparedQuantity',
          //   label: '已备数量',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: false,
          //   sortable: true,
          //   head: false,
          // },

          {
            prop: 'signingTime',
            label: '签收时间',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'scanUser',
            label: '签收人',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'pallet',
            label: '托盘码',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },

          {
            prop: 'goodsAllocation',
            label: '货位信息',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
        ],
        //库存品
        inventoryoption: [
          // {
          //   prop: '',
          //   label: '序号',
          //   type: 0,
          //   values: '',
          //   width: 55,
          //   checkarr: [],
          //   fixed: true,
          // },
          {
            prop: 'sku',
            label: 'sku',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false,
          },
          {
            prop: 'descriptionGoods',
            label: '物料名称',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'quantity',
            label: '备货数',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            isshowSummary: true,
            head: false,
          },
          {
            prop: 'preparedQuantity',
            label: '已备数量',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            isshowSummary: true,
            head: false,
          },
          {
            prop: 'cargoNumber',
            label: '物料编号',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'quantity', //需要新增字段
            label: '应提件数',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            isshowSummary: true,
            sortable: true,
            head: false,
          },
          {
            prop: 'stockStatus', //需要新增字段
            label: '备货状态',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'pickUpQuantity', //需要新增字段
            label: '提货件数',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            isshowSummary: true,
            sortable: true,
            head: false,
          },
          {
            prop: 'pickupStatusName', //需要新增字段
            label: '提货状态',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },

          {
            prop: 'cargoUnit',
            label: '单位',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'pallet',
            label: '托盘码',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'goodsAllocation',
            label: '库位信息',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: '',
            label: '操作',
            type: 6,
            values: '',
            width: '220',
            checkarr: [],
            fixed: 'right',
            sortable: true,
            head: false,
          },
        ],
        wrapoption: [
          {
            prop: '',
            label: '序号',
            type: 0,
            values: '',
            width: 55,
            checkarr: [],
            fixed: true,
          },
          {
            prop: 'serviceNumber',
            label: '服务号',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false,
          },
          {
            prop: 'waybillNumber',
            label: '运单号',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false,
          },
          {
            prop: 'orderCode',
            label: '订单自编号',
            type: 2,
            values: '',
            width: '200',
            checkarr: [],
            fixed: false,
            sortable: true,
          },

          {
            prop: 'orderPackageCode',
            label: '包条码',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false,
          },
          // {
          //   prop: 'orderPackageStatusName',
          //   label: '包件状态',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: false,
          //   sortable: true,
          //   head: false,
          // },
          // {
          //   prop: 'orderPackageCode',//需要新增字段
          //   label: '备货状态',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: true,
          //   sortable: true,
          //   head: false,
          // },

          // {
          //   prop: 'orderPackageCode',//需要新增字段
          //   label: '备货人',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: true,
          //   sortable: true,
          //   head: false,
          // },

          // {
          //   prop: 'orderPackageCode',//需要新增字段
          //   label: '备货时间',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: true,
          //   sortable: true,
          //   head: false,
          // },
          // {
          //   prop: 'orderPackageCode',//需要新增字段
          //   label: '提货车牌号',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: true,
          //   sortable: true,
          //   head: false,
          // },
          // {
          //   prop: 'orderPackageCode',//需要新增字段
          //   label: '提货状态',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: true,
          //   sortable: true,
          //   head: false,
          // },
          // {
          //   prop: 'orderPackageCode',//需要新增字段
          //   label: '提货人',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: true,
          //   sortable: true,
          //   head: false,
          // },
          // {
          //   prop: 'orderPackageCode',//需要新增字段
          //   label: '提货时间',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: true,
          //   sortable: true,
          //   head: false,
          // },
          // {
          //   prop: 'orderPackageCode',//需要新增字段
          //   label: '签收人',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: true,
          //   sortable: true,
          //   head: false,
          // },
          // {
          //   prop: 'orderPackageCode',//需要新增字段
          //   label: '签收时间',
          //   type: 2,
          //   values: '',
          //   width: '150',
          //   checkarr: [],
          //   fixed: true,
          //   sortable: true,
          //   head: false,
          // },
          {
            prop: 'warehouse',
            label: '仓库',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'orderStatusName',
            label: '包件状态',
            type: 1,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'firsts',
            label: '一级品类',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'second',
            label: '二级品类',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'thirdProduct',
            label: '三级品类',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'materialCode',
            label: '物料编号',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'materialName',
            label: '物料名称',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'pallet',
            label: '托盘码',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'goodsAllocation',
            label: '库位号',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'trainNumber',
            label: '自提批次号',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false,
          },
          {
            prop: 'stockupCreateUser',
            label: '扫描人',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'signForCreateTime',
            label: '扫描时间',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: '',
            label: '操作',
            type: 6,
            values: '',
            width: '220',
            checkarr: [],
            fixed: 'right',
            sortable: true,
            head: false,
          },
        ],
      },
      height: 300,
      // 弹框标题
      title: '',
      signtitle: '',
      // 是否展示弹框
      box: false,
      //签收是否显示
      signBox: false,
      //签收类型
      signBoxO: false,
      dataForm: {},
      // 是否显示查询
      search: true,
      //是否显示新增
      isadd: false,
      deliverydata: {
        reservationList: [],
      },
      dialogVisible: false, //二维码控制
      // 加载中
      loading: false,
      //查看按钮
      edt: false,
      activeTab: 'tab2',
      previousTab: null,
      //隐藏
      pake: false,
      cus: true,
      ord: false,
      inventory: false,
      //查看pda
      padview: false,
      // 是否为查看模式。。
      view: false,
      // 签收。。
      signView: false,
      // 查询信息
      query: {},
      inputTypeData: [],
      // 分页信息
      page: {
        currentPage: 1,
        pageSize: 30,
        total: 0,
      },
      // 表单数据
      form: {},
      // 签收表单数据
      signform: {},
      // 选择行
      selectionList: [],
      isLiabilityData: [],
      //状态列表
      stateData: [],
      // 表单配置
      option: {
        expand: false,
        index: true,
        border: true,
        selection: true,
        column: [
          {
            label: '配送车次号',
            prop: 'trainNumber',
            search: true,
            width: '100px',
          },
          {
            label: '收货人',
            prop: 'consignee',
            search: true,
            width: '100px',
          },
          {
            label: '收货电话',
            prop: 'deliveryPhone',
            search: true,
            width: '100px',
          },
          {
            label: '收货地址',
            prop: 'deliveryAddress',
            search: true,
            width: '100px',
          },
          {
            label: '订单自编号',
            prop: 'orderIds',
            search: true,
            width: '100px',
          },

          {
            label: '配送件数',
            prop: 'packageNub',
            search: true,
            width: '100px',
          },
          {
            label: '配送库存品数',
            prop: 'reservationStockListNum',
            search: true,
            width: '100px',
          },
          {
            label: '扫描件数',
            prop: 'loadedNub',
            search: true,
            width: '100px',
          },
          {
            label: '是否加急',
            prop: 'businessDepartment',
            search: true,
            width: '100px',
          },
          {
            label: '签收件数',
            prop: 'receivedQuantity',
            search: true,
            width: '100px',
          },
          {
            label: '签收状态',
            prop: 'signingStatus',
            search: true,
            width: '100px',
          },
        ],
      },

      // 表单配置
      signoption: {
        height: 'auto',
        width: '40px',
        calcHeight: 30,
        tip: false,
        searchShow: false,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        dialogClickModal: false,
        emptyBtn: false, //隐藏清空按钮
        submitBtn: false, //隐藏提交按钮
        column: [
          {
            label: '收货人姓名',
            labelWidth: '150',
            span: 11,
            prop: 'consignee',
            type: 'input',
            width: '150px',
            align: 'center',
            disabled: true,
            // rules: [{
            //   required: true,
            //   message: "输入承运商编号",
            //   trigger: "blur"
            // }],
          },
          {
            label: '收货人电话',
            prop: 'deliveryPhone',
            labelWidth: '150',
            span: 11,
            type: 'input',
            width: '150px',
            align: 'center',
            disabled: true,
          },
          {
            label: '收货地址',
            prop: 'deliveryAddress',
            labelWidth: '150',
            span: 11,
            type: 'input',
            width: '150px',
            align: 'center',
            disabled: true,
          },
          {
            label: '签收类型',
            prop: 'signingType',
            labelWidth: '150',
            span: 11,
            type: 'radio',
            width: '150px',
            align: 'center',
            disabled: false,
            dicData: [
              {
                label: '签收',
                value: '1',
              },
              {
                label: '代签收',
                value: '2',
              },
            ],
          },
          {
            label: '签收图片',
            prop: 'deliverySignPictures',
            labelWidth: '150',
            type: 'upload',
            listType: 'picture-card',
            width: '150px',
            span: 15,
            multiple: true,
            align: 'left',
            action: '/blade-resource/oss/endpoint/put-file',
            limit: 5,
            propsHttp: {
              res: 'data',
              url: 'link',
            },
            disabled: false,
          },
          // {
          //   label: "复核图片",
          //   prop: "clerkSignPictures",
          //   type: 'upload',
          //   listType: 'picture-card',
          //   dataType: 'string',
          //   labelWidth:'150',
          //   span:15,
          //   multiple:true,
          //   width:"200px",
          //   align:'left',
          //   action: '/blade-resource/oss/endpoint/put-file',
          //   limit: 15,
          //   propsHttp: {
          //     res: 'data',
          //     url: 'link',
          //   },
          //   rules: [{
          //     required: true,
          //     message: "请上传图片",
          //     trigger: "blur"
          //   }],
          // },

          {
            label: '备注',
            prop: 'clerkSignRemarks',
            labelWidth: '150',
            span: 15,
            type: 'input',
            width: '150px',
            align: 'center',
          },
        ],
      },

      // 表单配置
      wrapoption: {
        expand: false,
        index: true,
        border: true,
        selection: true,
        column: [
          {
            label: '包条码',
            prop: 'orderPackageCode',
            search: true,
            width: '100px',
          },
          {
            label: '仓库',
            prop: 'warehouse',
            search: true,
            width: '100px',
          },
          {
            label: '一级品类',
            prop: 'firsts',
            search: true,
            width: '100px',
          },
          {
            label: '二级品类',
            prop: 'second',
            search: true,
            width: '100px',
          },
          {
            label: '三级品类',
            prop: 'thirdProduct',
            search: true,
            width: '100px',
          },
          {
            label: '物料编号',
            prop: 'materialCode',
            search: true,
            width: '100px',
          },
          {
            label: '物料名称',
            prop: 'materialName',
            search: true,
            width: '100px',
          },
          {
            label: '托盘码',
            prop: 'pallet',
            width: '100px',
          },
          {
            label: '库位号',
            prop: 'goodsAllocation',

            width: '100px',
          },
        ],
      },
      // 库存品表单配置
      inventoryoption: {
        expand: false,
        index: true,
        border: true,
        selection: true,
        column: [
          {
            label: 'sku',
            prop: 'sku',
            search: true,
            width: '100px',
          },
          // {
          //   label: "订单自编号",
          //   prop: "orderCode",
          //   search: true,
          //   width:"100px"
          // },
          {
            label: '物料名称',
            prop: 'descriptionGoods',
            search: true,
            width: '100px',
          },
          // {
          //   label: "单位",
          //   prop: "cargoUnit",
          //   search: true,
          //   width:"100px"
          // },
          {
            label: '备货数',
            prop: 'deliveryNumber',
            search: true,
            width: '100px',
          },
          {
            label: '已备数量',
            prop: 'readyStock',
            search: true,
            width: '100px',
          },
          {
            label: '物料编号',
            prop: 'cargoNumber',
            search: true,
            width: '100px',
          },
          {
            label: '单位',
            prop: 'cargoUnit',
            search: true,
            width: '100px',
          },
          {
            label: '托盘码',
            prop: 'pallet',
            width: '100px',
          },
          {
            label: '库位信息',
            prop: 'goodsAllocation',
            width: '100px',
          },
        ],
      },
      // 订单表单配置
      ordoption: {
        expand: false,
        index: true,
        border: true,
        selection: true,
        column: [
          {
            label: '订单自编号',
            prop: 'orderCode',
            search: true,
            width: '100px',
          },
          {
            label: '货物名称',
            prop: 'descriptionGoods',
            search: true,
            width: '100px',
          },
          {
            label: '物料名称',
            prop: 'materialName',
            search: true,
            width: '100px',
          },
          {
            label: '备货件数',
            prop: 'preparedQuantity',
            search: true,
            width: '100px',
          },
          {
            label: '已备数量',
            prop: 'preparedQuantity',
            search: true,
            width: '100px',
          },
          {
            label: '备货状态',
            prop: 'stockupStatusName',
            search: true,
            width: '100px',
          },
          {
            label: '托盘码',
            prop: 'pallet',
            search: true,
            width: '100px',
          },
          {
            label: '货位信息',
            prop: 'goodsAllocation',
            search: true,
            width: '100px',
          },
        ],
      },
      //包肩分页信息
      wpage: {
        currentPage: 1,
        pageSize: 30,
        total: 0,
      },
      //包肩分页信息
      packpage: {
        currentPage: 1,
        pageSize: 30,
        total: 0,
      },
      ordpage: {
        currentPage: 1,
        pageSize: 30,
        total: 0,
      },
      inventorypage: {
        currentPage: 1,
        pageSize: 30,
        total: 0,
      },
      // 表单列表
      data: [],
      // 签收列表
      signdata: [],
      //客户id
      wid: null,
      //客户详情
      wrapdata: [],
      //包条列表
      packdata: [],
      //订单列表
      orddata: [],
      //库存品列表
      inventorydata: [],
      siginImgList: [
        {
          state: 1,
          dictValue: '提货证件',
          imgList: [],
        },
        {
          state: 2,
          dictValue: '文员确认',
          imgList: [],
        },
        {
          state: 3,
          dictValue: '库管签收',
          imgList: [],
        },
      ],
      /** 页面Loading */
      pageLoading: false,
    };
  },
  watch: {
    // eslint-disable-next-line no-unused-vars
    $route(to, from) {
      // this.isadd =false;
      // this.query.masterId = null;
      // this.masterId = null;
      // if (!!this.$route.query.data) {
      //   //   //做一些路由变化的响应
      //   //   //   this.isadd =true;
      //   //   this.query.masterId = this.$route.query.data;
      //   //   this.masterId = this.$route.query.data;
      //   //重新获取数据
      //   this.onLoad(this.page);
      // } else {
      // }
    },
    '$route.query.id': {
      handler: function (val, oldVal) {
        console.log(val);
        this.onLoad();
        console.log(' this.$route.query.id', this.$route.query.id);
      },
      // 深度观察监听
      deep: false,
    },
  },
  mounted() {
    this.init();
    this.onLoad();
    this.handleSetTableHeight();
  },
  created() {
    // //查询字典
    // this.queryDictionary();
  },
  computed: {
    ...mapGetters(['permission']),

    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    },
  },
  methods: {
    // 清单导出(全部导出)
    Listexport() {
      let downloadUrl = `/logpm-distribution/distrilbutionBillLading/export-distributionBillLadingDetail?${
        this.website.tokenHeader
      }=${getToken()}`;

      let values = {
        id: this.$route.query.id,
      };
      this.$confirm('是否导出数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        NProgress.start();
        exportBlob(downloadUrl, values).then(res => {
          downloadXls(res.data, `清单数据${dateNow()}.xlsx`);
          NProgress.done();
        });
      });
    },
    // 订单导出
    Orderexport() {
      let downloadUrl = `/logpm-distribution/distrilbutionBillStock/billOrderDetailExcel?${
        this.website.tokenHeader
      }=${getToken()}`;

      let values = {
        billLadingId: this.$route.query.id,
      };
      this.$confirm('是否导出数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        NProgress.start();
        exportBlob(downloadUrl, values).then(res => {
          downloadXls(res.data, `订单列表${dateNow()}.xlsx`);
          NProgress.done();
        });
      });
    },
    // 包件导出
    Packageexport() {
      let downloadUrl = `/logpm-distribution/distrilbutionBillStock/billOrderPackExcel?${
        this.website.tokenHeader
      }=${getToken()}`;

      let values = {
        billLadingId: this.$route.query.id,
      };
      this.$confirm('是否导出数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        NProgress.start();
        exportBlob(downloadUrl, values).then(res => {
          downloadXls(res.data, `包件导出${dateNow()}.xlsx`);
          NProgress.done();
        });
      });
    },
    async handleInventoryQRCode(row) {
      console.log(row, 'row');

      try {
        this.pageLoading = true;
        this.materialQRCode = row;
        console.log('row------------>', row);
        this.html = '';
        const res = await showInventoryPackgeCode(this.$route.query.id, row.stockListId);
        const { code, data } = res.data;
        if (code !== 200) return;
        // this.orderPackageCode = res.data
        console.log(res.data);
        this.html = this.getHtmls(res.data.data.dataList, res.data.data.templateHtml);

        this.dialogVisible = true;
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        this.pageLoading = false;
      }
    },
    // 库存导出
    Inventoryexport() {
      let downloadUrl = `/logpm-distribution/distributionDeliveryDetails/billOrderInventoryExcel?${
        this.website.tokenHeader
      }=${getToken()}`;

      let values = {
        billLadingId: this.$route.query.id,
      };
      this.$confirm('是否导出数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        NProgress.start();
        exportBlob(downloadUrl, values).then(res => {
          downloadXls(res.data, `库存品导出${dateNow()}.xlsx`);
          NProgress.done();
        });
      });
    },
    beforeOpen(done, type) {
      if (['edit', 'view'].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    //修改
    rowUpdate(row, index, done, loading) {
      console.log('row>>>>>>>>', row);
    },
    queryDictionary() {
      getDictionaryBiz('yes_no').then(res => {
        this.isLiabilityData = res.data.data;
      });
      getDictionaryBiz('basic_in_type').then(res => {
        this.inputTypeData = res.data.data;
      });
    },
    //返回
    handleViewpda() {},
    //取消
    cancellation() {
      this.signBox = false;
    },
    init() {
      this.height = this.setPx(document.body.clientHeight - 340);
    },
    handleTabClick(tab, event) {
      console.log('tab>>>>>>>>', tab.paneName);
      let tabName = tab.paneName;
      switch (tabName) {
        case 'tab2':
          console.log('ssss');
          this.handleOrder(this.ordpage);
          break;
        case 'tab3':
          this.handlePackage(this.packpage);
          break;
        case 'tab4':
          console.log('ssss');
          this.handleInventory(this.inventorypage);
          break;
      }
      this.handleSetTableHeight();
    },

    searchHide() {
      this.search = !this.search;
    },
    searchChange() {
      this.onLoad(this.page);
    },
    // 自提包件签收
    Selfpickupreceipt() {
      if (!this.selectionList.length) {
        ElMessage({
          message: '请勾选要签收的数据',
          type: 'warning',
        });
        return;
      }
      console.log(this.selectionList, 'this.selectionList');
      ElMessageBox.confirm('是否确认操作自提批量签收?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let orderStatusName = this.selectionList.every(obj => obj.orderStatusName === '已签收');
          if (orderStatusName) {
            ElMessage({
              message: '该订单已签收',
              type: 'warning',
            });
            return;
          }
          this.loading = true;
          let data = {
            id: this.$route.query.id,
            packageIds: this.selectionList.map(item => item.id).join(','),
          };
          $_batchSign(data)
            .then(res => {
              console.log(res, '自提签收成返回值');
              if (res.data.code === 200) {
                this.handlePackage(this.packpage);
                ElMessage({
                  message: res.data.msg,
                  type: 'success',
                });
              }
            })
            .catch(error => {
              console.log(error, '自提签收失败返回值');
            })
            .finally(() => {
              this.loading = false;
            });
          console.log(this.selectionList, '');
          // handlePackage(this.packpage)
        })
        .catch(() => {});
    },

    // 查看二维码
    async handleqr(val) {
      console.log(val, 'val');
      let qr = '';
      let checkcode = [];
      if (val) {
        qr = val.id;
      } else {
        if (!this.selectionList.length) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        this.selectionList.map(item => {
          checkcode.push(item.id);
          // checkcode.push(item.orderPackageCode)
        });

        qr = checkcode.join(',');
      }
      try {
        this.pageLoading = true;

        this.html = '';
        const res = await showOrderPackgeCode({
          ids: qr,
        });
        const { code, data } = res.data;
        if (code !== 200) return;

        console.log(res.data);
        // this.html = this.getHtmls(data.dataList, data.templateHtml);

        for (let i = 0; i < data.moldList.length; i++) {
          const element = data.moldList[i];
          this.html += element;
        }
        this.dialogVisible = true;

        await this.$nextTick();

        hanleTextLineFeed('category', 14);
        hanleTextLineFeed('materialName', 14);
        hanleTextLineFeed('qrCode', 18);
        hanleTextLineFeed('customer', 45);
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        this.pageLoading = false;
      }
    },

    searchReset() {
      this.query = {};
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.stringValue = jsonString;
          if (!this.form.id) {
            this.form.masterId = this.propertyformdata.id;
            add(this.form).then(() => {
              this.box = false;
              this.onLoad(this.page);
              this.$message({
                type: 'success',
                message: '操作成功!',
              });
              let str = {
                val: false,
              };
              this.$emit('returnproperty', str);
            });
          } else {
            update(this.form).then(() => {
              this.box = false;
              this.onLoad(this.page);
              this.$message({
                type: 'success',
                message: '操作成功!',
              });
              let str = {
                val: false,
              };
              this.$emit('returnproperty', str);
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //订单列表
    handleOrder(page) {
      let params = {};
      params.billLadingId = this.$route.query.id;
      getOrderDetail(page.currentPage, page.pageSize, Object.assign(params)).then(res => {
        console.log('查看>>>>>订单>>', res.data.data);
        const data = res.data.data;
        this.orddata = data.records;
        this.ordpage.total = data.total;
      });
    },
    //包件列表
    handlePackage(page) {
      let params = {};
      params.billLadingId = this.$route.query.id;
      getPackDetail(page.currentPage, page.pageSize, Object.assign(params)).then(res => {
        console.log('查看>>>>>包间>>', res.data.data);
        const data = res.data.data;
        this.packdata = data.records;
        this.packpage.total = data.total;
      });
    },
    //库存列表
    handleInventory(page) {
      let params = {};
      params.billLadingId = this.$route.query.id;
      getInventoryDetail(page.currentPage, page.pageSize, Object.assign(params)).then(res => {
        console.log('查看>>>>>库存>>', res.data.data);
        const data = res.data.data;
        this.inventorydata = data.records;
        data.records.forEach(item => {
          // 备货状态 1 待备货 2 备货中  3 备货完成
          if (item.stockStatus == 1) {
            item.stockStatus = '待备货';
          } else if (item.stockStatus == 2) {
            item.stockStatus = '备货中';
          } else if (item.stockStatus == 3) {
            item.stockStatus = '备货完成';
          }
        });
        this.inventorypage.total = data.total;
      });
    },

    beforeClose(done) {
      done();
      this.form = {};
      this.view = false;
    },
    selectionChange(list) {
      console.log('sllsls');
      this.selectionList = list;
    },
    // 查看轨迹
    ViewingTrajectories(scope) {
      console.log('查看>>>>>轨迹>>', scope);
      this.$router.push({
        path: '/distribution/signdetail/packageNodeSearch',
        query: {
          orderPackageCode: scope.orderPackageCode,
        },
      });
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.table.clearSelection();
    },
    currentOrderChange(currentPage) {
      this.ordpage.currentPage = currentPage;
      this.handleOrder(this.ordpage);
    },
    sizeOrderChange(pageSize) {
      this.ordpage.pageSize = pageSize;
      this.handleOrder(this.ordpage);
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },
    currentInChange(currentPage) {
      this.inventorypage.currentPage = currentPage;
      this.handleInventory(this.inventorypage);
    },
    sizeInChange(pageSize) {
      this.inventorypage.pageSize = pageSize;
      this.handleInventory(this.inventorypage);
    },
    pcurrentChange(currentPage) {
      this.packpage.currentPage = currentPage;
      this.handlePackage(this.packpage);
    },
    psizeChange(pageSize) {
      this.packpage.pageSize = pageSize;
      this.handlePackage(this.packpage);
    },
    /** 确认提货 */
    handleSigin() {
      let data = {
        billLadingId: this.$route.query.id,
      };

      $_checkBillLadingIsRelease(data).then(async res => {
        console.log(res, 're====?');
        if (!res.data) {
          ElMessageBox.confirm('包件未扫描完成，此操作会释放此类包件！是否继续操作?', '操作提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.pageLoading = true;
              getBillLadingDetail(this.$route.query.id)
                .then(res => {
                  const { code } = res.data;
                  if (code !== 200) return;
                  this.$message.success('签收成功');
                  this.$store.commit('DEL_TAG_CURRENT');
                  this.$store.commit('EDIT_REFRESHITEM', {
                    title: 'distrilbutionBillLadingList',
                    status: true,
                  });
                  this.$router.back('-1');
                })
                .catch(() => {})
                .finally(() => {
                  this.pageLoading = false;
                });
            })
            .catch(() => {});
        } else {
          try {
            this.pageLoading = true;
            const res = await getBillLadingDetail(this.$route.query.id);
            const { code } = res.data;
            if (code !== 200) return;
            this.$message.success('签收成功');
            this.$store.commit('DEL_TAG_CURRENT');
            this.$store.commit('EDIT_REFRESHITEM', {
              title: 'distrilbutionBillLadingList',
              status: true,
            });
            this.$router.back('-1');
          } catch (error) {
            console.log('error :>> ', error);
          } finally {
            this.pageLoading = false;
          }
        }
      });
      return;
    },
    onLoad() {
      //查询详情
      if (!!this.$route.query.id) {
        if (this.siginImgList?.length) {
          this.siginImgList.forEach(item => {
            if (item.imgList?.length) {
              item.imgList = [];
            }
          });
        }

        this.loading = true;
        let id = this.$route.query.id;
        getViewDetailOwn(id).then(res => {
          console.log('res.data>>>>>>>>>>>>', res.data.data);
          const data = res.data.data[0];
          //this.deliverydata = data
          this.data = data;
          for (let item of data.printList) {
            this.siginImgList
              .find(val => val.state === Number(item.genre))
              .imgList.push({ ...item, urlRoute: item.site });
          }
          console.log('this.siginImgList :>> ', this.siginImgList);
        });
        this.handleOrder(this.ordpage);
        /*this.handlePackage(this.packpage);
        this.handleInventory(this.packpage);*/
        this.loading = false;
      }
    },
    handleSetTableHeight() {
      setNodeHeight(this.$refs.tableNodeOrderRef.$el, '48vh');
      setNodeHeight(this.$refs.tableNodePackageRef.$el, '48vh');
      setNodeHeight(this.$refs.tableNodeInventoryRef.$el, '48vh');
    },
  },
};
</script>

<style lang="scss" scoped>
// 标题
:deep(.el-divider__text.is-center) {
  font-size: 20px;
  font-weight: bold;
  color: var(--el-color-primary);
}

// 签收图片列表
.siginImg_container {
  display: flex;

  > div {
    flex: 1;
  }
}

.siginImg_title {
  color: var(--el-color-primary);
}

// 签收图片
.siginImg {
  margin: 5px;
  border-radius: 5px;
  margin-left: 0px;
}

.footer_container {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
}
</style>
