<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>当前签收单状态</span>
      </div>
      <el-steps :active="active" finish-status="success">
        <el-step title="待签收" />
        <el-step title="司机签收" />
        <el-step title="文员审核" />
      </el-steps>
    </template>

    <!-- 基础信息 -->
    <el-divider content-position="left"> 基本信息</el-divider>
    <div class="Basic-information">
      <div class="el-txt">
        <el-icon><List /></el-icon>
        <span class="title-name">预约单号:</span>
        <el-tooltip
          :content="form.reservationCode ? form.reservationCode : '暂无商场名称'"
          placement="top"
        >
          <el-input v-model="form.reservationCode" disabled placeholder="预约单号" />
        </el-tooltip>
      </div>
      <div class="el-txt">
        <el-icon><School /></el-icon>
        <span class="title-name">商场名称:</span>
        <el-tooltip :content="form.mallName ? form.mallName : '暂无商场名称'" placement="top">
          <el-input v-model="form.mallName" disabled placeholder="商场名称" />
        </el-tooltip>
      </div>
      <div class="el-txt">
        <el-icon><Calendar /></el-icon>
        <span class="title-name"> 预约时间:</span>
        <el-tooltip
          :content="form.reservationDate ? form.reservationDate : '暂无预约时间'"
          placement="top"
        >
          <el-input v-model="form.reservationDate" disabled placeholder="预约时间" />
        </el-tooltip>
      </div>
    </div>

    <!-- 配送信息 -->
    <el-divider content-position="left">配送信息</el-divider>
    <div class="Basic-information">
      <div class="el-txt">
        <el-icon><Van /></el-icon>
        <span class="title-name">配送车次:</span>
        <el-tooltip :content="form.trainNumber ? form.trainNumber : '暂无司机姓名'" placement="top">
          <el-input v-model="form.trainNumber" disabled placeholder="配送车次" />
        </el-tooltip>
      </div>
      <div class="el-txt">
        <el-icon><User /></el-icon>
        <span class="title-name">司机姓名:</span>
        <el-tooltip :content="form.driverName ? form.driverName : '暂无司机姓名'" placement="top">
          <el-input v-model="form.driverName" disabled placeholder="司机姓名" />
        </el-tooltip>
      </div>
      <div class="el-txt">
        <el-icon><Postcard /></el-icon>
        <span class="title-name"> 车辆牌照:</span>
        <el-tooltip :content="form.vehicleName ? form.vehicleName : '暂无车辆牌照'" placement="top">
          <el-input v-model="form.vehicleName" disabled placeholder="车辆牌照" />
        </el-tooltip>
      </div>
      <div class="el-txt">
        <el-icon><Van /></el-icon>
        <span class="title-name"> 装车班组:</span>
        <el-tooltip
          :content="form.loadingTeamName ? form.loadingTeamName : '暂无装车班组'"
          placement="top"
        >
          <el-input v-model="form.loadingTeamName" disabled placeholder="装车班组" />
        </el-tooltip>
      </div>
      <div class="el-txt" style="margin-top: 20px">
        <el-icon><Van /></el-icon>
        <span class="title-name"> 卸车班组:</span>
        <el-tooltip
          :content="form.unLoadingTeamName ? form.unLoadingTeamName : '暂无卸车班组'"
          placement="top"
        >
          <el-input v-model="form.unLoadingTeamName" disabled placeholder="卸车班组" />
        </el-tooltip>
      </div>
    </div>

    <!-- 收货人信息 -->
    <el-divider content-position="left">收货人信息</el-divider>
    <div class="Basic-information">
      <div class="el-txt">
        <el-icon><User /></el-icon>
        <span class="title-name">收货人姓名:</span>
        <el-tooltip :content="form.consignee ? form.consignee : '暂无收货人姓名'" placement="top">
          <el-input v-model="form.consignee" disabled placeholder="收货人姓名" />
        </el-tooltip>
      </div>
      <div class="el-txt">
        <el-icon><User /></el-icon>
        <span class="title-name">收货人号码:</span>
        <el-tooltip
          :content="form.deliveryPhone ? form.deliveryPhone : '暂无收货人号码'"
          placement="top"
        >
          <el-input v-model="form.deliveryPhone" disabled placeholder="收货人号码" />
        </el-tooltip>
      </div>
      <div class="el-txt">
        <el-icon><Postcard /></el-icon>
        <span class="title-name"> 收货人地址:</span>
        <el-tooltip
          :content="form.deliveryAddress ? form.deliveryAddress : '暂无收货人地址'"
          placement="top"
        >
          <el-input v-model="form.deliveryAddress" disabled placeholder="收货人地址" />
        </el-tooltip>
      </div>
      <div class="el-txt">
        <el-icon><Van /></el-icon>
        <span class="title-name"> 是否加急:</span>
        <el-tooltip :content="form.isUrgent ? form.isUrgent : '暂无加急信息'" placement="top">
          <el-input v-model="form.isUrgent" disabled placeholder="是否加急" />
        </el-tooltip>
      </div>
      <div class="el-txt notes">
        <el-icon><Edit /></el-icon>
        <span class="title-name title-notes"> 客户备注:</span>
        <el-tooltip :content="form.remarks ? form.remarks : '暂无备注信息'" placement="top">
          <el-input v-model="form.remarks" disabled placeholder="客户备注" />
        </el-tooltip>
      </div>
    </div>
    <!-- 签收信息 -->
    <el-divider content-position="left">签收信息</el-divider>
    <div class="Basic-information">
      <div class="el-txt">
        <el-icon><Star /></el-icon>
        <span class="title-name">签收类型:</span>
        <el-radio-group v-model="form.signingType" disabled>
          <el-radio label="1" size="large" border>签收</el-radio>
          <el-radio label="2" size="large" border>待签收</el-radio>
        </el-radio-group>
      </div>
      <div class="el-txt el-positioning">
        <el-icon><LocationInformation /></el-icon>
        <span class="title-name">定位打卡:</span>
        <el-tooltip
          :content="form.positioningAdr ? form.positioningAdr : '暂无定位打卡'"
          placement="top"
        >
          <el-input
            class="positioning"
            v-model="form.positioningAdr"
            disabled
            placeholder="定位打卡位置"
          />
        </el-tooltip>
      </div>
      <div class="el-sw">
        <div class="el-box">
          <div class="icon-tit">
            <el-icon><LocationInformation /></el-icon>
            <span class="title-name">文员备注:</span>
          </div>
          <el-tooltip
            :content="form.clerkSignRemarks ? form.clerkSignRemarks : '暂无文员备注'"
            placement="top"
          >
            <el-input
              class="positioning"
              v-model="form.clerkSignRemarks"
              disabled
              placeholder="文员备注"
            />
          </el-tooltip>
        </div>

        <div class="el-box">
          <div class="icon-tit">
            <el-icon><LocationInformation /></el-icon>
            <span class="title-name">司机备注:</span>
          </div>
          <el-tooltip
            :content="form.driverRemarks ? form.driverRemarks : '暂无司机备注'"
            placement="top"
          >
            <el-input
              class="positioning"
              v-model="form.driverRemarks"
              disabled
              placeholder="司机备注"
            />
          </el-tooltip>
        </div>
      </div>
    </div>

    <div class="FImg">
      <div class="imgName">
        <span
          ><el-icon><PictureFilled /></el-icon>上门照</span
        >
        <!-- DoorstepPhoto -->
        <el-upload
          v-model:file-list="DoorstepPhoto"
          :action="doubledCount"
          list-type="picture-card"
          :on-preview="EnlargeTheTmageA"
          :on-remove="handleRemove"
          :on-success="ImgSuccessA"
          :headers="headers"
          disabled
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisibleA">
          <!-- <img w-full :src="dialogImageUrlA" alt="IMG" /> -->
          <el-image
            style="width: 100px; height: 100px"
            :src="dialogImageUrlA"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="srcListA"
            :initial-index="1"
            fit="cover"
          />
        </el-dialog>
      </div>

      <div class="imgName">
        <span
          ><el-icon><PictureFilled /></el-icon>堆码照</span
        >
        <!-- StackingPhoto -->
        <el-upload
          v-model:file-list="StackingPhoto"
          :action="doubledCount"
          list-type="picture-card"
          :on-preview="EnlargeTheTmageB"
          :on-remove="handleRemove"
          :on-success="ImgSuccessB"
          :headers="headers"
          disabled
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisibleB">
          <div class="tc-img">
            <!-- <img w-full :src="dialogImageUrlB" alt="IMG" /> -->
            <el-image
              style="width: 100px; height: 100px"
              :src="dialogImageUrlB"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcListB"
              :initial-index="1"
              fit="cover"
            />
          </div>
        </el-dialog>
      </div>

      <div class="imgName">
        <span
          ><el-icon><PictureFilled /></el-icon>易碎照</span
        >
        <!-- FragilePhotos -->
        <el-upload
          v-model:file-list="FragilePhotos"
          :action="doubledCount"
          list-type="picture-card"
          :on-preview="EnlargeTheTmageC"
          :on-remove="handleRemove"
          :on-success="ImgSuccessC"
          :headers="headers"
          disabled
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisibleC">
          <!-- <img w-full :src="dialogImageUrlC" alt="IMG" /> -->
          <el-image
            style="width: 100px; height: 100px"
            :src="dialogImageUrlC"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="srcListC"
            :initial-index="1"
            fit="cover"
          />
        </el-dialog>
      </div>

      <div class="imgName">
        <span
          ><el-icon><PictureFilled /></el-icon>家配照</span
        >
        <!-- HomePhotos -->
        <el-upload
          v-model:file-list="HomePhotos"
          :action="doubledCount"
          list-type="picture-card"
          :on-preview="EnlargeTheTmageD"
          :on-remove="handleRemove"
          :on-success="ImgSuccessD"
          :headers="headers"
          disabled
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisibleD">
          <!-- <img w-full :src="dialogImageUrlD" alt="IMG" />
                  <el-dialog v-model="dialogVisibleC"> -->
          <el-image
            style="width: 100px; height: 100px"
            :src="dialogImageUrlD"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="srcListD"
            :initial-index="1"
            fit="cover"
          />
        </el-dialog>
      </div>

      <div class="imgName">
        <span
          ><el-icon><PictureFilled /></el-icon>签收照</span
        >
        <!-- SignForPhotos  -->
        <el-upload
          v-model:file-list="SignForPhotos"
          :action="doubledCount"
          list-type="picture-card"
          :on-preview="EnlargeTheTmageE"
          :on-remove="handleRemove"
          :on-success="ImgSuccessE"
          :headers="headers"
          disabled
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisibleE">
          <!-- <img w-full :src="dialogImageUrlE" alt="IMG" /> -->
          <el-image
            style="width: 100px; height: 100px"
            :src="dialogImageUrlE"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="srcListE"
            :initial-index="1"
            fit="cover"
          />
        </el-dialog>
      </div>
    </div>

    <!-- 签收信息 -->

    <el-collapse v-model="activeNames" style="margin-top: 10px">
      <el-collapse-item title="商品信息" name="1">
        <el-tabs
          v-loading="editLoading"
          element-loading-text="数据正在更新中..."
          type="border-card"
          @tab-click="tabClick"
        >
          <template v-for="item in Tabs" :key="item.name">
            <el-tab-pane :label="item.label" :name="item.name">
              <div class="el-Cart">
                <tablecmt
                  class="goodsTable"
                  :columnList="item.columnList"
                  :tableData="item.data"
                  :loading="false"
                  @inputTxt="(value, row) => inputsc(value, row, item.type)"
                >
                </tablecmt>

                <!-- 表格列开始 -->
                <!-- <el-table
                  :data="data"
                  row-key="name"
                  border
                  height="500"
                  style="width: 100%"
                  ref="tableRef"
                  @select-all="qsselectAll"
                  @select="qsselectChange"
                >
                  <el-table-column type="selection" width="55" fixed />
                  <el-table-column
                    type="index"
                    fixed
                    width="50"
                    height="100"
                    label="#"
                    align="center"
                  /> -->

                <!--
            Type ===1 普通文本
            Type ===2 图片显示
            Type ===3 操作功能
            label:    标题
            width:    宽度
            prop:     数据字段
           -->
                <!-- <el-table-column
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    :fixed="item.fixed"
                    align="center"
                    v-for="(item, index) in menuData"
                    :key="item.label"
                  >
                    <template #default="props">
                      <img :src="props.row[item.prop]" class="el-Img" v-if="item.type === 2" />

                      <span v-else>{{
                        props.row[item.prop] != null ? props.row[item.prop] : '/'
                      }}</span>
                    </template>
                  </el-table-column>

                  <template>
                    <el-table-column
                      v-if="item.head"
                      fixed="right"
                      label="操作"
                      width="280"
                      align="center"
                    >
                    </el-table-column>
                  </template>
                </el-table> -->
              </div>
            </el-tab-pane>
          </template>
        </el-tabs>
        <!-- <span class="gx_num">勾选数量：{{ sptemp.length }}</span> -->
      </el-collapse-item>
    </el-collapse>

    <!-- 增值服务信息 -->
    <el-collapse @change="ServiceChange" style="margin-top: 10px">
      <el-collapse-item title="增值服务信息" name="2">
        <el-tabs
          v-loading="ZCeditLoading"
          element-loading-text="数据正在更新中..."
          type="border-card"
          @tab-click="tabClickB"
        >
          <template v-for="item in TabB" :key="item.name">
            <el-tab-pane :label="item.label" :name="item.name">
              <div class="tab-title">
                <div class="BatchDelete">
                  <el-button type="primary" @click="newlyAdded(item.name)"> 新增 </el-button>
                  <el-button
                    v-if="ZCTableData.length > 0"
                    type="primary"
                    @click="BatchDelete(item.name)"
                  >
                    批量移除
                  </el-button>
                  <!--                  :disabled="ZcBtnDis"-->
                </div>
                <template v-for="(item, index) in TabTitle" :key="index">
                  <span>
                    <el-icon><component :is="item.icon" /></el-icon> {{ item.name }}
                    {{ item.value }}
                    {{ item.tap }}
                  </span>
                </template>
              </div>
              <div class="el-Cart">
                <!-- 表格列开始 -->
                <el-table
                  :data="dataAdded"
                  row-key="name"
                  border
                  height="500"
                  style="width: 100%"
                  ref="tableRef"
                  @select-all="DataSelectAll"
                  @select="ZcSelectChange"
                >
                  <el-table-column type="selection" width="55" fixed />
                  <el-table-column
                    type="index"
                    fixed
                    width="50"
                    height="100"
                    label="#"
                    align="center"
                  />

                  <!--
            Type ===1 普通文本
            Type ===2 图片显示
            Type ===3 操作功能
            label:    标题
            width:    宽度
            prop:     数据字段
           -->
                  <el-table-column
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    :fixed="item.fixed"
                    align="center"
                    v-for="(item, index) in menuDataB"
                    :key="item.label"
                  >
                    <template #default="props">
                      <!--                      <div :class="ElBtnClass" v-if="item.type === 3">-->
                      <!--&lt;!&ndash;                        <span>aaa</span>&ndash;&gt;-->
                      <!--                        <el-button-->
                      <!--                          :disabled="props.row.checkbox"-->
                      <!--                          :link="ElButtonS[0].link"-->
                      <!--                          :class="ElButtonS[0].class"-->
                      <!--                          :auto-insert-space="ElButtonS[0].space"-->
                      <!--                          :size="ElButtonS[0].size"-->
                      <!--                          :icon="ElButtonS[0].icon"-->
                      <!--                          @click="DeleteEvent(props.row)"-->
                      <!--                          >移除</el-button-->
                      <!--                        >-->
                      <!--                      </div>-->
                      <span v-if="item.type == 6">{{
                        props.row[item.prop] == 1
                          ? '定制品'
                          : props.row[item.prop] == 2
                          ? '库存品'
                          : props.row[item.prop] == 3
                          ? '零担'
                          : '/'
                      }}</span>

                      <span v-if="item.type == 4">{{
                        props.row[item.prop] ? props.row[item.prop] : '/'
                      }}</span>
                    </template>
                  </el-table-column>
                </el-table>

                <!-- 表格翻页功能 -->
                <!-- <div class="demo-pagination-block">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="pageList"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="PageSizeChange"
                @current-change="SizeChange"
              />
            </div> -->
              </div>
            </el-tab-pane>
          </template>
        </el-tabs>
        <span class="gx_num">勾选数量:{{ ZCTableData.length }}</span>
      </el-collapse-item>
    </el-collapse>
    <!-- 增值服务弹窗信息 -->

    <el-dialog @close="TzClose" v-model="dialogBatchDelete" :title="TcServices" width="80%">
      <!-- 搜索功能 -->
      <el-form v-if="tcSo" :inline="true" :model="TcSoInput" style="display: flex">
        <el-form-item label="订单自编号:">
          <el-input v-model="TcSoInput.orderCode" placeholder="请输入订单自编号" clearable />
        </el-form-item>

        <el-form-item label="包条码:">
          <el-input v-model="TcSoInput.orderPackageCode" placeholder="请输入包条码" clearable />
        </el-form-item>

        <el-form-item label="物料名称:">
          <el-input v-model="TcSoInput.materialName" placeholder="请输入物料名称" clearable />
        </el-form-item>

        <el-form-item label="物料编码:">
          <el-input v-model="TcSoInput.materialCode" placeholder="请输入物料名称" clearable />
        </el-form-item>

        <el-form-item class="el-BtnSoInput">
          <el-button @click="ServiceReset">重置</el-button>
          <el-button type="primary" @click="serviceSearch">搜索</el-button>
        </el-form-item>
      </el-form>

      <!-- 头部右侧按钮模块 -->
      <div class="avue-crud__right">
        <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
        <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
      </div>
      <!-- 表格列开始 -->
      <el-table
        :data="TcDataAdded"
        border
        height="500"
        style="width: 100%"
        ref="tableRefs"
        v-loading="TCeditLoading"
        element-loading-text="数据正在更新中..."
        @select-all="selectAll"
        @select="selectChange"
      >
        <el-table-column type="selection" width="55" fixed />
        <el-table-column type="index" fixed width="50" height="100" label="#" align="center" />

        <!--
            Type ===1 普通文本
            Type ===2 图片显示
            Type ===3 操作功能
            label:    标题
            width:    宽度
            prop:     数据字段
           -->
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :fixed="item.fixed"
          align="center"
          v-for="(item, index) in menuDataB"
          :key="item.label"
        >
          <template #default="props">
            <span v-if="item.type == 6">{{
              props.row[item.prop] == 1
                ? '定制品'
                : props.row[item.prop] == 2
                ? '库存品'
                : props.row[item.prop] == 3
                ? '零担'
                : '/'
            }}</span>
            <span v-if="item.type == 7 && props.row.conditions == 3">
              <el-input-number
                :placeholder="'请输入' + props.row.firsts + '数量'"
                v-model="props.row.zeroQuantity"
                :disabled="props.row.checkbox"
                :min="0"
                :max="props.row.maxQuantity"
              />
            </span>
            <span v-if="item.type == 4">{{
              props.row[item.prop] ? props.row[item.prop] : '/'
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <span class="gx_num">勾选数量:{{ TcTemp.length }}</span>
      <template #footer>
        <!-- 表格翻页功能 -->
        <div class="demo-pagination-block">
          <!-- <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="pageList"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="PageSizeChange"
            @current-change="SizeChange"
          /> -->
          <span></span>
          <span class="dialog-footer">
            <el-button @click="TCdialogBatchDelete">取消</el-button>
            <el-button type="primary" @click="addedSubmission"> 提交 </el-button>
          </span>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="ConfirmationInformation" title="数据确认" width="50%">
      <el-form :inline="true" :model="TcZcInput" style="display: flex" class="tcSoInput">
        <el-form-item label="包件总数:">
          <el-input v-model="TcTemp.length" disabled placeholder="已选择包件总数" />
        </el-form-item>

        <el-form-item :label="TcServices == '上楼' ? TcServices : '距离'">
          <el-input
            v-if="TcServices == '上楼'"
            v-model="TcZcInput.floolNum"
            placeholder="请输入楼层"
            style="width: 200px"
          />
          <el-input
            v-if="TcServices == '超区'"
            v-model="TcZcInput.distance"
            placeholder="请输入距离&emsp;单位:公里"
            style="width: 200px"
          />

          <el-input
            v-if="TcServices == '平移'"
            v-model="TcZcInput.distance"
            placeholder="请输入距离&emsp;单位:米"
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="费用:" width="200px">
          <el-input v-model="TcZcInput.fee" placeholder="请输入费用" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="TCancellation">取消</el-button>
          <el-button type="primary" @click="ConfirmSubmission"> 确认提交 </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  getDetail,
  signforPackageList,
  signforInventoryList,
  addvalueInfoList,
  $_checkAddValuePackageList,
  $_saveSignAddValuePackage,
  $_cancelSignAddValuePackage,
  $_updateSignAddValuePackage,
} from '@/api/distribution/distributionSignfor';
import { getToken } from '@/utils/auth';
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';
import { setNodeHeight } from '@/utils/util';
import { onMounted } from 'vue';
const form = ref({}); //基础信息
const RouterId = ref(null); //编辑ID
const RouterReservationId = ref(null); //编辑参数
const DoorstepPhoto = ref([]); // 上门照
const StackingPhoto = ref([]); // 堆门照
const sptemp = ref([]); //签收表格选中的
const FragilePhotos = ref([]); // 易碎照
const HomePhotos = ref([]); // 家配照
const SignForPhotos = ref([]); //签收照
const data = ref([]); //表格数据展示切换
const InitializeTable = ref([]); //初始化展示信息（不可被修改）
const menuData = ref([]); //表格头部
const menuDataB = ref([]); //增值服务表格头部
const editLoading = ref(false); //表格切换加载
const tableRefs = ref(null); //增值服务表格实例
const currentPage = ref(1); // 默认页码
const pageSize = ref(30); // 默认每一页几条
const total = ref(0); //页码总页数
const pageList = ref([5, 10, 50, 100, 200]); // 选择每页显示多少条
const background = ref(true); // 是否开启背景颜色
const disabled = ref(false); // 是否禁止使用页码功能
const dialogImageUrlA = ref('');
const dialogImageUrlB = ref('');
const dialogImageUrlC = ref('');
const dialogImageUrlD = ref('');
const dialogImageUrlE = ref('');
const dialogVisibleA = ref(false); //是否显放大图片
const dialogVisibleB = ref(false);
const dialogVisibleC = ref(false);
const dialogVisibleD = ref(false);
const dialogVisibleE = ref(false);
const activeNames = ref(['1']);
const ElBtnClass = ref('el-Btn-link'); //按钮样式风格类名
const active = ref(1); //签收状态
const route = useRoute();
const router = useRouter(); //参数ID
const dataAdded = ref([]); //增值服务表格渲染参数
const ZCeditLoading = ref(false); //增值表格渲染
const TcDataAdded = ref([]); //弹窗表格渲染的数据
// const TabIndex = ref(0); //增值服务标题默认显示
const TCeditLoading = ref(false); //弹窗的加载Load
const dialogBatchDelete = ref(false);
const TcSoInput = ref({}); //增值服务弹窗搜索表单
const TcServices = ref('上楼'); //增值服务弹窗标题
const TcIndex = ref(1); //Tab栏下标，用于重新渲染表格展示数据
const tcSo = ref(false); //搜索框
const ZcBtnDis = ref(true); //增值服务按钮禁止
const ConfirmationInformation = ref(false); //增值服务确认框
const TcZcInput = ref({}); //增值服务距离费用包间确认信息
const TcTemp = ref([]); //弹窗临时存储
const TcData = ref([]); //弹窗要提交的数据
const state = ref(false); //状态表格勾选
const ZCTableData = ref([]); //增值服务表格数据
const ServiceRadioSelection = ref([]); //增值服务单选删除
const TabInfo = ref(null); //标题栏切换的参数
const addvalueDetailId = ref(null); //增值服务新增必要参数
const TcBtn = ref(false); //增值服务弹窗去掉操作栏
const enlargeImage = (dialogImageUrl, dialogVisible) => {
  return uploadFile => {
    console.log(uploadFile, '点击放大的内容');
    dialogImageUrl.value = uploadFile.url;
    dialogVisible.value = true;
  };
};
// 点击放大图片
const EnlargeTheTmageA = enlargeImage(dialogImageUrlA, dialogVisibleA);
const EnlargeTheTmageB = enlargeImage(dialogImageUrlB, dialogVisibleB);
const EnlargeTheTmageC = enlargeImage(dialogImageUrlC, dialogVisibleC);
const EnlargeTheTmageD = enlargeImage(dialogImageUrlD, dialogVisibleD);
const EnlargeTheTmageE = enlargeImage(dialogImageUrlE, dialogVisibleE);
const srcListA = ref([]);
const srcListB = ref([]);
const srcListC = ref([]);
const srcListD = ref([]);
const srcListE = ref([]);
const srcList = [];
const TabTitle = ref([
  { name: '公里数:', value: '暂无数据', tap: '公里', icon: 'Van', btn: '新增' },
  { name: '费用:', value: '暂无数据', tap: '￥', icon: 'Coin', btn: '新增' },
  { name: '楼层:', value: '暂无数据', tap: '层', icon: 'School', btn: '新增' },
  { name: '件数:', value: '暂无数据', tap: '件', icon: 'Box', btn: '新增' },
]);
// 订单列表
const menuData1 = ref([
  {
    prop: 'orderCode',
    label: '订单自编号',
    type: 1,
    values: '',
    width: '130',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'serviceNumber',
    label: '服务号',
    type: 1,
    values: '',
    width: '250',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'waybillNumber',
    label: '运单号',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'warehouse',
    label: '仓库',
    type: 1,
    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: 'reservationNum',
    label: '计划数量',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    isshowSummary: true,
    head: false,
  },
  {
    prop: 'loadingNumber',
    label: '装车数量',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    isshowSummary: true,
    head: false,
  },
  {
    prop: 'signingNumber',
    label: '签收数量',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    isshowSummary: true,
    head: false,
  },

  {
    prop: 'brand',
    label: '品牌',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'mallName',
    label: '商场名称',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'storeName',
    label: '门店名称',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },

  {
    prop: 'descriptionGoods',
    label: '货物名称',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'reservationNum',
    label: '计划包件数',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    isshowSummary: true,
    head: false,
  },
  {
    prop: 'consigneeUnit',
    label: '收获单位',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'consigneePerson',
    label: '运单收货人',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'consigneeAddress',
    label: '运单收货地址',
    type: 1,
    values: '',
    width: '250',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'consigneeMobile',
    label: '运单收获电话',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'customerName',
    label: '终端收货人',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'customerAddress',
    label: '终端收获地址',
    type: 1,
    values: '',
    width: '400',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'customerTelephone',
    label: '终端收获电话',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
]);
// 包件列表
// 包件列表
// 包件列表
// 包件列表
// 包件列表
// 包件列表
// 包件列表
// 包件列表
const menuData2 = ref([
  {
    prop: 'waybillNumber',
    label: '运单号',
    type: 2,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'serviceNumber',
    label: '服务号',
    type: 2,
    values: '',
    width: '250',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'orderCode',
    label: '订单自编号',
    type: 2,
    values: '',
    width: '280',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'orderPackageCode',
    label: '包条码',
    type: 2,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'warehouse',
    label: '仓库',
    type: 2,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'sendWarehouseName',
    label: '发站仓',
    type: 2,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'acceptWarehouseName',
    label: '目的地',
    type: 2,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },

  // {
  //   prop: 'waybillNumber',
  //   label: '发货时间',
  //   type: 1,
  //   values: '',
  //   width: '150',
  //   checkarr: [],
  //   fixed: false,
  //   sortable: true,
  //   head: false,
  // },
  {
    prop: 'warehouseEntryTimeEnd',
    label: '入库时间',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'trainNumber',
    label: '进库车次',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'trainNumber',
    label: '包件类型',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'reservationNum',
    label: '计划数量',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
    isshowSummary: true,
  },
  {
    prop: 'loadingNub',
    label: '装车数量',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    isshowSummary: true,
    head: false,
  },
  {
    prop: 'signingNub',
    label: '签收数量',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    isshowSummary: true,
    head: false,
  },
  {
    prop: 'firsts',
    label: '一级品类',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'second',
    label: '二级品类',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'thirdProduct',
    label: '三级品类',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'orderPackageStatusName',
    label: '包件状态',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'orderPackageFreezeStatusName',
    label: '冻结状态',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  // {
  //   prop: 'orderPackageGroundingStatusName',
  //   label: '上架状态',
  //   type: 1,
  //   values: '',
  //   width: '200',
  //   checkarr: [],
  //   fixed: false,
  //   sortable: true,
  //   head: false,
  // },
  {
    prop: 'orderPackageStockupStatusName',
    label: '备货状态',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'orderPackageReservationStatusName',
    label: '预约状态',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'orderPackageLoadingStatusName',
    label: '装车状态 ',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'scanStatus',
    label: '装车方式',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'driverName',
    label: '计划装车人',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'scanUser',
    label: '实际装车人',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'signingTime',
    label: '签收扫描时间',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
]);
// 库存品列表
const menuData3 = ref([
  {
    prop: 'sku',
    label: 'sku',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'descriptionGoods',
    label: '物料名称',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'cargoNumber',
    label: '物料编号',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'cargoNorms',
    label: '物料规格',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'cargoUnit',
    label: '物料单位',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'category',
    label: '品分类',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'reservationNum',
    label: '计划出库数',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    isshowSummary: true,
    head: false,
  },
  {
    prop: 'loadedinNumber',
    label: '实际出库数',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    isshowSummary: true,
    head: false,
  },
  {
    prop: 'loadingStatusName',
    label: '装车状态',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'signingStatusName',
    label: '签收状态',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'signUser',
    label: '签收人',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
]);
const ElButtonS = ref([
  // 1.class   按钮样式名(用于切换按钮样式)
  // 2.space   是否开启按钮文子直接间距(true开启 ,false关闭)
  // 3.size    按钮尺寸默认小尺寸('large'| 'default'| 'small')
  // 4.icon    按钮图标
  // 5.table   按钮名称
  {
    class: 'el-btn-danger',
    space: true,
    size: 'small',
    icon: 'el-icon-delete',
    table: '删除',
  },
  {
    class: 'el-btn-view',
    space: true,
    size: 'small',
    icon: 'el-icon-view',
    table: '查看',
  },
  {
    class: 'el-btn-success',
    space: true,
    size: 'small',
    icon: 'Edit',
    table: '编辑',
  },
]);

// menuDataB 增值服务公共表头

const menuDataB1 = ref([
  {
    prop: 'orderCode',
    label: '订单自编号',
    type: 1,
    values: '',
    width: '300',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'materialName',
    label: '货物名称',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'firsts',
    label: '一级品',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'second',
    label: '二级品',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'thirdProduct',
    label: '二级品',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'orderPackageCode',
    label: '包条码',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'quantity',
    label: '数量',
    type: 7,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'conditions',
    label: '包条类型',
    type: 6,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'sku',
    label: 'SKU',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  {
    prop: 'materialCode',
    label: '物料编码',
    type: 1,
    values: '',
    width: '200',
    checkarr: [],
    fixed: false,
    sortable: true,
    head: false,
  },
  // {
  //   prop: '',
  //   label: '操作',
  //   type: 3,
  //   values: '',
  //   width: '200',
  //   checkarr: [],
  //   fixed: 'right',
  //   sortable: true,
  //   head: false,
  // },
]);

const Tabs = ref([
  {
    label: '订单列表',
    name: '0',
    columnList: menuData1.value,
    type: 'order',
    query: {},
    data: [],
  },
  {
    label: '包件列表',
    name: '1',
    columnList: menuData2.value,
    type: 'package',
    query: {},
    data: [],
  },
  {
    label: '库存品列表',
    name: '2',
    columnList: menuData3.value,
    type: 'inventory',
    query: {},
    data: [],
  },
]);
// 增值服务标题栏
const TabB = ref([
  {
    label: '上楼',
    name: '0',
  },
  {
    label: '超区',
    name: '1',
  },
  {
    label: '平移',
    name: '2',
  },
  {
    label: '搬运',
    name: '3',
  },
  {
    label: '分拣',
    name: '4',
  },
  {
    label: '专车',
    name: '5',
  },
]);

// 按钮样式风格切换
const btnClass = type => {
  // 切换链接样式风格
  if (type == 1) {
    ElBtnClass.value = 'el-Btn-link';
  }
  // 切换按钮样式风格
  if (type == 2) {
    ElBtnClass.value = 'el-Btn-btn';
  }
};
// 页面初始化需要请求的参数
const onLoad = () => {
  menuData.value = menuData1.value; //页面初始化默认显示第一个表格
  data.value = InitializeTable.value; //默认显示第一个表格数据
};
// RouterId.value = '1721707916601487362';
// RouterReservationId.value = '1721707896171032578';
// 获取路由必要参数
RouterId.value = route.query.id; //获取当前路由参数ID
RouterReservationId.value = route.query.reservationId; //获取当前路由的参数
console.log(route.query.id, '当前路由参数');
console.log(route.query.RouterReservationId, '当前路由参数');
// 图片上传必须携带TOKEN
const headers = computed(() => {
  return { 'Blade-Auth': 'Bearer ' + getToken() };
});
// 图片上传接口
const doubledCount = computed(() => {
  return '/api/blade-resource/oss/endpoint/put-file';
});

const setTableHeight = () => {
  const node = document.querySelectorAll('.goodsTable');

  setNodeHeight(node, '500px');
};

onMounted(async () => {
  // 等待子组件渲染完成
  await nextTick();

  setTableHeight();
});

const findIndexById = (A, B) => {
  const indexArray = [];
  for (const itemA of A) {
    const matchingItem = B.find(itemB => itemB.packageId === itemA.packageId);
    if (matchingItem) {
      indexArray.push(B.indexOf(matchingItem));
    }
  }
  return indexArray;
};
// 增值服务请求函数
const ValueAddedFunction = val => {
  TCeditLoading.value = true; //开启load加载效果
  $_checkAddValuePackageList(val).then(res => {
    TCeditLoading.value = false; //关闭load加载效果
    TcDataAdded.value = res.data.records;
    console.log(res, '新增返回的信息');
    total.value = res.data.total; //总条数
    res.data.records.forEach(item => {
      item.checkbox = true; //添加标识用于处理零担数量修改
      item.zeroQuantity = 0; //设置默认值
    });
    // 数据回显
    // const setIn = setTimeout(() => {
    //   let dataX = findIndexById(dataAdded.value, TcDataAdded.value);
    //   console.log(dataX, '返回的对应下标');
    //   // 对有的数据进行勾选
    //   TcDataAdded.value.forEach((row, i) => {
    //     const dataIndex = dataX[i];
    //     if (typeof dataIndex !== 'undefined') {
    //       TcDataAdded.value[i] = TcDataAdded.value[dataIndex];
    //       tableRefs.value.toggleRowSelection(TcDataAdded.value[i], true);
    //       TcDataAdded.value[i].checkbox = false; //禁止修改
    //       console.log(row, '要处理的数据');
    //     }
    //   });
    //   clearTimeout(setIn);
    // }, 0);
  });
};
// 增值服务是否禁用勾选
const selectable = (row, index) => {
  // if (!row.checkbox) {
  //   return false; //禁用状态
  // } else {
  //   return true; //非禁用状态
  // }
};
// 新增按钮展开增值服务弹窗
const newlyAdded = val => {
  TcTemp.value = []; //新增之前先重置勾选的数量防止累加
  let menData = menuDataB1.value.slice(0, -1); //移除menuDataB1.value数组最后一个下标的值
  menuDataB.value = menData; //字段切换
  dialogBatchDelete.value = true; //开启弹窗
  // 调用增值服务请求接口函数
  ValueAddedFunction({
    reservationId: RouterReservationId.value,
    current: currentPage.value,
    size: pageSize.value,
  });
};
// 增值服务清空
const ServiceReset = val => {
  console.log('增值服务清空');
  TcSoInput.value = {}; //重置搜索表单
  TcDataAdded.value = []; //重置增值服务表格
  ValueAddedFunction({
    reservationId: RouterReservationId.value,
  });
};
// 增值服务取消
const TCdialogBatchDelete = () => {
  dialogBatchDelete.value = false; //关闭弹窗
};
// 增值服务
const addedSubmission = val => {
  if (!TcTemp.value.length) {
    ElMessage({
      message: '暂未选择包件',
      type: 'warning',
    });
    return;
  }
  ConfirmationInformation.value = true; //开启确认信息
};

const qsselectAll = select => {
  console.log(select, '商品全选');
  sptemp.value = select;
};
const qsselectChange = select => {
  console.log(select, '商品单选');
  sptemp.value = select;
};
// 取消增值服务包件函数
const cancellation = val => {
  if (!Array.isArray(val)) {
    // 判断是单选删除，还是全选删除
    let Read = [];
    console.log(Read, 'Read');
    Read.push(val);
    console.log(Read);
    TcData.value = Read; // 表格临时数据放入正式提交里面
  } else {
    TcData.value = val; // 表格临时数据放入正式提交里面
  }
  let data = JSON.parse(JSON.stringify(TcData.value));
  let DataInfo = {}; //创建一个空对象用于存放请求参数
  DataInfo.reservationId = RouterReservationId.value; //预约客户ID
  DataInfo.addvalueDetailId = addvalueDetailId.value; //增值服务详情ID
  DataInfo.packageEntityList = data; //取消包件列表
  DataInfo.addvalueType = TcIndex.value; //增值服务项类型 （必带参数）
  $_cancelSignAddValuePackage(DataInfo).then(res => {
    console.log(res, '删除之后的返回值');
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
      valueAddedServices(TcIndex.value);
      ZcBtnDis.value = true; //禁止使用批量删除按钮
      // 删除成功重置表单结构
      TcData.value = []; //正式结构
      ZCTableData.value = []; //临时存储
    }
  });
};

// 取消增值服务包件(批量删除)
const BatchDelete = row => {
  ElMessageBox.confirm('是否取消包件数?')
    .then(() => {
      cancellation(ZCTableData.value);
    })
    .catch(() => {
      // catch error
    });
};
// 增值服务弹窗关闭回调
const TzClose = () => {
  menuDataB.value = menuDataB1.value; //字段切换
  TcZcInput.value = {}; //清空搜索框数据
};
// 增值服务单选删除
const DeleteEvent = row => {
  cancellation(row); //单选删除，把当前行的数据传入
  TitleBarSwitch(TabInfo.value);
};
// 增值服务表格全选触发
const DataSelectAll = (select, val) => {
  if (!select.length) {
    //表示当前没有数据
    dataAdded.value.forEach(item => {
      item.checkbox = true;
    });
    ZcBtnDis.value = true; //禁用批量删除
  } else {
    select.forEach(item => {
      item.checkbox = false; //让删除按钮处于激活状态
    });
    ZcBtnDis.value = false; //启用批量删除
  }
  ZCTableData.value = select; //把勾选的数据存临时存放表格地方
  console.log(select, val);
};
// 增值服务表格单选触发
const ZcSelectChange = (select, val) => {
  val.checkbox = !val.checkbox;
  ZCTableData.value = select; //把勾选的数据存临时存放表格地方
  if (select.length > 0) {
    ZcBtnDis.value = false; //可以使用批量删除按钮
  } else {
    ZcBtnDis.value = true; //禁止用批量删除按钮
  }
  console.log(select, val);
};
// 重置函数
const TcIReset = () => {
  TcData.value = []; //重置表格数据
  TcTemp.value = []; //重置表格临时数据
  ConfirmationInformation.value = false; //关闭弹窗
  dialogBatchDelete.value = false; //关闭弹窗
  TcZcInput.value = {};
  ElMessage({
    message: '操作成功',
    type: 'success',
  });
  menuDataB.value = menuDataB1.value; //移除menuDataB1.value数组最后一个下标的值
};
// 增值服务确认提交
const ConfirmSubmission = () => {
  // 判断零担是否已经输入数量
  let state = true;
  TcTemp.value.forEach(item => {
    console.log(item, '零担数据处理');
    if (item.conditions == 3) {
      //表示当前是零担数据
      item.quantity = item.zeroQuantity; //把输入的值给quantity
      if (!item.zeroQuantity) {
        ElMessage({
          message: item.firsts + '没有输入数量',
          type: 'warning',
        });
        state = false;
      }
    }
  });
  // 没有输入数量不继续走流程
  if (!state) {
    return;
  }
  TcData.value = TcTemp.value; //临时存储的数据给到正式提交的表格
  TcZcInput.value.num = TcTemp.value.length; //增加的包件总数
  let data = JSON.parse(JSON.stringify(TcData.value));

  let DataInfo = {
    ...TcZcInput.value, //弹窗信息
  };
  DataInfo.reservationId = RouterReservationId.value; //预约客户ID（必带参数）
  DataInfo.deliveryId = RouterId.value; //配送任务ID（必带参数）
  DataInfo.addvalueType = TcIndex.value; //增值服务项类型 （必带参数）
  DataInfo.packageEntityList = data; //选中的所有包件信息
  console.log(DataInfo, '最后要提交的值');

  // 如果增值服务表格有参数就走下面新增接口
  // addvalueDetailId存在表示增值服务列表有值，说明不是新增，是修改
  if (addvalueDetailId.value) {
    //修改接口
    DataInfo.addvalueDetailId = addvalueDetailId.value; //增值服务详情ID
    $_updateSignAddValuePackage(DataInfo).then(res => {
      TcIReset();
      valueAddedServices(TcIndex.value);
    });
  } else {
    // 新增接口
    $_saveSignAddValuePackage(DataInfo).then(res => {
      TcIReset();

      valueAddedServices(TcIndex.value);
    });
  }
};
// 增值服务取消
const TCancellation = () => {
  TcZcInput.value = {}; //重置
  ConfirmationInformation.value = false; //关闭表单弹窗
  console.log(TcZcInput.value, '表单数据');
};
// 刷新按钮
const searchChange = () => {
  ValueAddedFunction({
    reservationId: RouterReservationId.value,
  });
};
// 搜索按钮
const searchHide = () => {
  tcSo.value = !tcSo.value; //搜索框显示/隐藏
};
// 增值服务弹窗搜索
const serviceSearch = val => {
  console.log('增值服务搜索');
  ValueAddedFunction({
    reservationId: RouterReservationId.value,
    ...TcSoInput.value,
  });
};
// 获取基础信息
editLoading.value = true; //表格开始加载
getDetail(RouterId.value).then(res => {
  editLoading.value = false; //表格加载结束
  console.log(res, '基础信息');
  // 当前订单状态
  if (res.data.data.sijiSigningStatus == '2') {
    active.value = 2; //司机已签收
  }
  // if (res.data.data.sijiSigningStatus == && res.data.data.wenyuanSigningStatus) {
  //   active.value = 3; //文员已签收
  // }

  // 文员签收单独判断
  if (res.data.data.wenyuanSigningStatus == '2') {
    active.value = 3; //文员已签收
  }
  form.value = res.data.data; //基础信息
  InitializeTable.value = res.data.data.orderInfo; //表格数据(订单列表)
  onLoad();
  // 照片回显分类
  DoorstepPhoto.value = [];
  StackingPhoto.value = [];
  FragilePhotos.value = [];
  HomePhotos.value = [];
  SignForPhotos.value = [];
  const photoTypes = {
    photo_1: DoorstepPhoto.value,
    photo_2: StackingPhoto.value,
    photo_3: FragilePhotos.value,
    photo_4: HomePhotos.value,
    photo_5: SignForPhotos.value,
  };

  const photoTypesList = {
    photo_1: srcListA.value,
    photo_2: srcListB.value,
    photo_3: srcListC.value,
    photo_4: srcListD.value,
    photo_5: srcListE.value,
  };

  if (res.data.data.printVOList) {
    res.data.data.printVOList.forEach(item => {
      const { type, name, urlRoute } = item;
      if (type in photoTypes) {
        photoTypes[type].push({ name, url: urlRoute });
      }
      // 图片预览处理
      if (type in photoTypesList) {
        photoTypesList[type].push(urlRoute);
      }
    });
  }
  console.log(srcListC.value, 'srcListC');
});
const handleRemove = () => {
  console.log('图片移除事件');
};
// 包件列表
function PackageList() {
  editLoading.value = true; //表格加载开启
  data.value = [];
  signforPackageList(RouterId.value).then(res => {
    const { code } = res.data;
    if (code !== 200) return;
    console.log(res.data.data, '包件列表');
    data.value = res.data.data || [];
    Tabs.value[1].data = res.data.data;
    editLoading.value = false; //表格加载结束
  });
}
// 库存品列表
function InventoryList() {
  editLoading.value = true; //表格加载开启
  data.value = [];
  signforInventoryList(RouterId.value).then(res => {
    console.log(res, '库存品列表');
    data.value = res.data.data || [];
    Tabs.value[2].data = data;
    editLoading.value = false; //表格加载结束
  });
}
//商品信息切换
const tabClick = val => {
  sptemp.value = []; //切换表头重置选中数组
  switch (val.props.name) {
    case '0':
      console.log(data.value, 'datavalue');
      switchTableFields(menuData1.value);
      data.value = InitializeTable.value;
      break;
    case '1':
      switchTableFields(menuData2.value);
      PackageList();
      break;
    case '2':
      switchTableFields(menuData3.value);
      InventoryList();
      console.log(menuData.value, '当前表格参数');
      break;
    default:
      break;
  }
};
// 增值服务切换查询函数
const valueAddedServices = val => {
  dataAdded.value = []; //清空展示表单
  addvalueDetailId.value = null; //清空新增标识
  console.log(addvalueDetailId.value, '当前是否为新增还是编辑');
  TabTitle.value[0].value = '暂无数据'; //距离
  TabTitle.value[1].value = '暂无数据'; //费用
  TabTitle.value[2].value = '暂无数据'; //楼层
  TabTitle.value[3].value = '暂无数据'; //件数
  ZCeditLoading.value = true; //开启加载
  addvalueInfoList({
    addvalueId: val,
    signforId: RouterId.value,
    reservationId: RouterReservationId.value,
  }).then(res => {
    ZCeditLoading.value = false; //关闭加载效果
    console.log(res, '增值服务上楼的返回值');
    if (res.data.data) {
      if (res.data.data.addvalueDetailId) {
        addvalueDetailId.value = res.data.data.addvalueDetailId;
        console.log('当前不是第一次，为新增操作');
      }
      res.data.data.packageEntityList.forEach(item => {
        item.checkbox = true;
        console.log(item);
      });
      const packageList = res.data.data ? res.data.data.packageEntityList : [];
      dataAdded.value = packageList;
      TabTitle.value[0].value = res.data.data?.distance ?? '暂无数据'; //距离
      TabTitle.value[1].value = res.data.data?.fee ?? '暂无数据'; //费用
      TabTitle.value[2].value = res.data.data?.floolNum ?? '暂无数据'; //楼层
      TabTitle.value[3].value = packageList.length ? packageList.length : '暂无数据'; //件数
    }
  });
};
// 展开增值服务默认加载第一项
const ServiceChange = val => {
  menuDataB.value = menuDataB1.value;
  setTimeout(() => {
    valueAddedServices(1);
  }, 0);
};
// 增值服务标题栏切换函数
const TitleBarSwitch = data => {
  ZCTableData.value = []; //切换标签重置勾选数量（重置勾选的内容）
  TcServices.value = data.props.label; //增值服务弹窗标题
  TcIndex.value = Number(data.props.name); //存储tab栏下标用于重新渲染参数
  TcIndex.value++;
  console.log(TcIndex.value, '当前的tab下标');
  ZCeditLoading.value = true; //开启加载效果
  if (data.props.name == 0) {
    menuDataB.value = menuDataB1.value;
    valueAddedServices(1);
  }
  if (data.props.name == 1) {
    menuDataB.value = menuDataB1.value;
    valueAddedServices(2);
  }
  if (data.props.name == 2) {
    menuDataB.value = menuDataB1.value;
    valueAddedServices(3);
  }
  if (data.props.name == 3) {
    menuDataB.value = menuDataB1.value;
    valueAddedServices(4);
  }
  if (data.props.name == 4) {
    menuDataB.value = menuDataB1.value;
    valueAddedServices(5);
  }
  if (data.props.name == 5) {
    menuDataB.value = menuDataB1.value;
    valueAddedServices(6);
  }
};
// 增值服务信息tab切换
const tabClickB = val => {
  TabInfo.value = val; //把当前信息保存起来
  TitleBarSwitch(val);
};
//商品信息切换
const switchTableFields = fields => {
  menuData.value = fields; //切换表格展示字段
};
// 表格全选功能触发
const selectAll = val => {
  console.log(val);
  TcTemp.value = val; //吧选中的信息放到准备提交的地方
  console.log(TcTemp.value, '准备提交的数据');
};
// 表格单个选中触发事件
const selectChange = (selection, row) => {
  console.log(row, '表格单选触发');
  row.checkbox = !row.checkbox;
  // 1.selection 选中的数组
  // 2.row 选中的当前行
  TcTemp.value = selection; //吧选中的信息放到准备提交的地方
};
// 每页多少条触发
const PageSizeChange = val => {
  console.log('每一页', val, '条');
  // 调用增值服务请求接口函数
  ValueAddedFunction({
    reservationId: RouterReservationId.value,
    current: currentPage.value,
    size: pageSize.value,
  });
};
// 页码翻页触发
const SizeChange = val => {
  console.log('当前是第', val, '页');
  // 调用增值服务请求接口函数
  ValueAddedFunction({
    reservationId: RouterReservationId.value,
    current: currentPage.value,
    size: pageSize.value,
  });
};
// 上门照图片上传成功
const ImgSuccessA = (response, uploadFile) => {
  if (response.success == true) {
    console.log(response, '上门图片上传成功');
    DoorstepPhoto.value[DoorstepPhoto.value.length - 1].url = response.data.link;
  }
};
// 堆门图片上传成功
const ImgSuccessB = (response, uploadFile) => {
  if (response.success == true) {
    console.log(response, '堆门图片上传成功');
    StackingPhoto.value[StackingPhoto.value.length - 1].url = response.data.link;
  }
};
// 易碎图片上传成功
const ImgSuccessC = (response, uploadFile) => {
  if (response.success == true) {
    console.log(response, '易碎图片上传成功');
    FragilePhotos.value[FragilePhotos.value.length - 1].url = response.data.link;
  }
};
// 家配图片上传成功
const ImgSuccessD = (response, uploadFile) => {
  if (response.success == true) {
    console.log(response, '家配图片上传成功');
    HomePhotos.value[HomePhotos.value.length - 1].url = response.data.link;
  }
};
// 签收图片上传成功
const ImgSuccessE = (response, uploadFile) => {
  if (response.success == true) {
    console.log(response, '签收图片上传成功');
    SignForPhotos.value[SignForPhotos.value.length - 1].url = response.data.link;
  }
};

/** 输入框筛选 */
const inputsc = (value, row, type) => {
  console.log('value :>> ', value);
  console.log('row :>> ', row);
  console.log('type :>> ', type);
  const _item = Tabs.value.find(val => val.type === type);

  const reg = new RegExp(value, 'i');
  _item.query[row.prop] = reg;
  if (value === '') delete _item.query[row.prop];

  console.log('reg :>> ', reg);

  if (Object.keys(_item.query).length === 0) return (_item.data = data.value);

  const _data = data.value.filter(value => {
    let _flag = true;
    for (let key in _item.query) {
      console.log('_item.query[key].test(value[key]) :>> ', _item.query[key].test(value[key]));
      if (!_item.query[key].test(value[key])) _flag = false;
      if (!_flag) break;
    }

    return _flag;
  });

  console.log('_data :>> ', _data);
  _item.data = _data;
};
</script>

<style lang="scss" scoped>
.el-card {
  .el-card__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .el-steps {
      width: 100%;
      margin-top: 25px;
    }
  }

  .card-header {
    font-size: 18px;
    font-weight: 500;
  }
  :deep(.el-divider__text) {
    font-weight: bold;
    font-size: 16px;
  }
  .Basic-information {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 50px;
    flex-wrap: wrap;
  }
  .el-txt:first-of-type {
    /* 样式 */
    // margin-top: 0;
  }
  .title-name {
    min-width: 120px;
    font-weight: 500;
    font-size: 16px;
  }
  .el-txt {
    min-width: 280px;
    margin-right: 1%;
    display: flex;
    align-items: center;
    i {
      margin-right: 5px;
    }

    .el-cont {
      font-weight: 400;
      padding: 0 10px;
    }
  }
  .notes {
    width: 100%;
    margin-top: 30px;
    margin-right: 0;
  }
  .title-notes {
    width: 90px;
  }
  .el-positioning {
    margin-left: auto;
    width: 59%;
  }
  .FImg {
    display: flex;
  }
  .imgName {
    width: 30%;
    span {
      font-size: 16px;
      position: relative;
      font-weight: 500;
      color: #958d8d;
      display: inline-block;
      border: 1px solid #ccc;
      padding: 0 10px;
      border-radius: 4px;
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      width: fit-content;
    }
  }
}
:deep(.el-dialog__body) {
  img {
    width: 100%;
  }
}
.tab-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  span {
    display: flex;
    align-items: center;
  }
}
.el-sw {
  width: 100%;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  min-height: 82px;
  justify-content: space-between;
}
.icon-tit {
  display: flex;
  min-width: 138px;
  align-items: center;
}
.el-box {
  display: flex;
}
.el-BtnSoInput {
  margin-left: auto;
  margin-right: 0;
}
.avue-crud__right {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
:deep(.el-dialog__body) {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.demo-pagination-block {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
:deep(.el-input-number) {
  width: 100%;
}
.tcSoInput {
  :deep(.el-input__wrapper) {
    width: 120px;
  }
}
:deep(.el-image) {
  width: 100% !important;
  height: 100% !important;
}
.gx_num {
  font-size: 14px;
  margin-top: 20px;
  display: block;
}
</style>
