<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-row>
      <el-row :gutter="24" class="rows">
        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <span>运单号：{{ data.waybillNumber }} </span>
        </el-col>
        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <span>收货单位：{{ data.consigneeUnit }} </span>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="rows">
        <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-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-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
            :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]"
              :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>

          <!-- 列表模块 -->
          <tablecmt
            :columnList="columnListarrs.wrapoption"
            :tableData="packdata"
            :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="psizeChange"
              @current-change="pcurrentChange"
              :current-page="packpage.currentPage"
              :page-sizes="[30, 50, 80, 120]"
              :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
            :columnList="columnListarrs.inventoryoption"
            :tableData="inventorydata"
            :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="sizeInChange"
              @current-change="currentInChange"
              :current-page="inventorypage.currentPage"
              :page-sizes="[30, 50, 80, 120]"
              :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>
</template>

<script>
import {
  getDetail,
  add,
  update,
  remove,
  getPackDetail,
  getInventoryDetail,
  getViewDetailOwn,
  getBillLadingDetail,
  getOrderDetail,
} from '@/api/distribution/distrilbutionBillLading';
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} from "@/utils/util";
import {exportBlob} from "@/api/common";
import {dateNow} from "@/utils/date";
export default {
  data() {
    return {
      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: '150',
            checkarr: [],
            fixed: true,
            sortable: true,
            head: false,
          },
          {
            prop: 'totalNumber', //需要新增字段
            label: '订单总数',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },

          {
            prop: 'handQuantity', //需要新增字段
            label: '应提货件数',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
            head: false,
          },
          {
            prop: 'pickUpQuantity', //需要新增字段
            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: '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: 'handQuantity',
            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: 'stockupStatusName',
            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,
          },
        ],
        //库存品
        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,
            head: false,
          },
          {
            prop: 'preparedQuantity',
            label: '已备数量',
            type: 2,
            values: '',
            width: '150',
            checkarr: [],
            fixed: false,
            sortable: 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,
            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,
            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,
          },
        ],
        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: '150',
            checkarr: [],
            fixed: false,
            sortable: true,
          },

          {
            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: '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: '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,
          },
        ],
      },
      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: 40,
      },
      // 表单数据
      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: 'handQuantity',
            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: 40,
      },
      //包肩分页信息
      packpage: {
        currentPage: 1,
        pageSize: 30,
        total: 40,
      },
      ordpage: {
        currentPage: 1,
        pageSize: 30,
        total: 40,
      },
      inventorypage: {
        currentPage: 1,
        pageSize: 30,
        total: 40,
      },
      // 表单列表
      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();
  },
  created() {
    // //查询字典
    // this.queryDictionary();
  },
  computed: {
    ...mapGetters(['permission']),
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    },
  },
  methods: {
    // 订单导出
    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();
          })
        });
    },
    // 库存导出
    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;
      }
    },
    searchHide() {
      this.search = !this.search;
    },
    searchChange() {
      this.onLoad(this.page);
    },
    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;
    },
    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() {
      this.$confirm('确定签收吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        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.$router.back('-1');
        } catch (error) {
          console.log('error :>> ', error);
        } finally {
          this.pageLoading = false;
        }
      });
    },
    onLoad() {
      //查询详情
      if (!!this.$route.query.id) {
        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;
      }
    },
  },
};
</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>
