<template>
  <basic-container v-loading="loadingObj.pageLoading">
    <div class="avue-crud">
      <el-row :gutter="24" class="rows">
        <el-col :xl="7" :lg="7" :md="8" :sm="24">
          <el-steps :active="stepActive" finish-status="success" process-status="finish">
            <!-- 步骤条 -->
            <el-step
              v-for="step in stepsList"
              :key="step.title"
              :icon="step.icon"
              :title="step.title"
            />
          </el-steps>
        </el-col>
      </el-row>
      <el-divider>基本信息</el-divider>
      <el-row :gutter="24" class="rows">
        <el-col :xl="7" :lg="7" :md="10" :sm="24">
          <span>预约单号：{{ reservationData.reservationCode }} </span>
        </el-col>
        <!--                <el-col :xl="5" :lg="7" :md="8" :sm="24">-->
        <!--                    <span>商场名称：{{reservationData.mallName}} </span>-->
        <!--                </el-col>-->
        <el-col :xl="7" :lg="7" :md="10" :sm="24">
          <span>预约时间：{{ reservationData.reservationDate }} </span>
        </el-col>
        <el-col :xl="7" :lg="7" :md="10" :sm="24">
          <!--                    <span>服务类型：{{reservationData.deliveryType}}</span>-->
          <span>服务类型：市配</span>
        </el-col>
      </el-row>
      <el-divider>收货人信息</el-divider>
      <el-row :gutter="24" class="rows">
        <el-col :xl="7" :lg="7" :md="10" :sm="24">
          <span>收货人：{{ reservationData.consignee }} </span>
        </el-col>
        <el-col :xl="7" :lg="7" :md="10" :sm="24">
          <span>手机号码：{{ reservationData.deliveryPhone }} </span>
        </el-col>
        <el-col :xl="7" :lg="7" :md="10" :sm="24">
          <span>收货地址：{{ reservationData.deliveryAddress }} </span>
        </el-col>
      </el-row>
      <!--      <el-divider>服务内容</el-divider>-->
      <!--      <div class="topbox">-->
      <!--        <div class="titlxbx">-->
      <!--          <div>-->
      <!--            <div>上楼</div>-->
      <!--            <div>2178501088045989849</div>-->
      <!--          </div>-->
      <!--          <div>-->
      <!--            <div>货物件数：</div>-->
      <!--            <div>预估费用：500.00</div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="titlxbx">-->
      <!--          <div>-->
      <!--            <div>超区</div>-->
      <!--            <div>超区公里：10KM</div>-->
      <!--          </div>-->
      <!--          <div>-->
      <!--            <div></div>-->
      <!--            <div>预估费用：500.00</div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="titlxbx">-->
      <!--          <div>-->
      <!--            <div>拆样</div>-->
      <!--            <div>货物件数：10件</div>-->
      <!--          </div>-->
      <!--          <div>-->
      <!--            <div></div>-->
      <!--            <div>预估费用：500.00</div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="titlxbx">-->
      <!--          <div>-->
      <!--            <div>返货</div>-->
      <!--            <div>货物件数：10件</div>-->
      <!--          </div>-->
      <!--          <div>-->
      <!--            <div></div>-->
      <!--            <div>预估费用：500.00</div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="titlxbx">-->
      <!--          <div>-->
      <!--            <div>搬运</div>-->
      <!--            <div>人员：张三，李四</div>-->
      <!--          </div>-->
      <!--          <div>-->
      <!--            <div></div>-->
      <!--            <div></div>-->
      <!--          </div>-->
      <!--        </div>-->

      <!--        <div class="titlxbx">-->
      <!--          <div>-->
      <!--            <div>返货</div>-->
      <!--            <div>货物件数：10件</div>-->
      <!--          </div>-->
      <!--          <div>-->
      <!--            <div></div>-->
      <!--            <div>预估费用：500.00</div>-->
      <!--          </div>-->
      <!--        </div>-->

      <!--        <div class="titlxbx">-->
      <!--          <div>-->
      <!--            <div>到付运费</div>-->
      <!--            <div></div>-->
      <!--          </div>-->
      <!--          <div>-->
      <!--            <div></div>-->
      <!--            <div>费用：500.00</div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="titlxbx">-->
      <!--          <div>-->
      <!--            <div>代收货款</div>-->
      <!--            <div></div>-->
      <!--          </div>-->
      <!--          <div>-->
      <!--            <div></div>-->
      <!--            <div>费用：500.00</div>-->
      <!--          </div>-->
      <!--        </div>-->

      <!--      </div>-->
      <el-divider>预约详情</el-divider>
      <el-row :gutter="24" class="rows">
        <el-col :xl="7" :lg="7" :md="10" :sm="24">
          <span>备注：{{ reservationData.remarks }} </span>
        </el-col>
      </el-row>
      <div>
        <el-tabs type="border-card" @tab-click="handleClick">
          <el-tab-pane label="订单信息">
            <el-button type="danger" icon="el-icon-download" @click="handleExportInfo('1')" plain
              >导出
            </el-button>

            <tablecmt
              :columnList="stockArticleColumnList"
              :tableData="stockArticleData"
              :loading="loading"
              @inputTxt="inputsc"
              @timeCheck="timesc"
              @btnCheck="btnsc"
              @selectCheck="selectsc"
              @selection="selectionsc"
            >
              <template #default="slotProps">
                <el-text size="small" @click="checkPackage(slotProps.scope)">查看包件</el-text>
                <!--                                <el-button size="small" @click="checkAddValue(slotProps.scope)">增 值 服 务</el-button>-->
              </template>
            </tablecmt>
          </el-tab-pane>
          <el-tab-pane label="包件信息">
            <el-button type="danger" icon="el-icon-download" @click="handleExportInfo('2')" plain
              >导出
            </el-button>
            <tablecmt
              :columnList="packageColumnList"
              :tableData="parcelList"
              :loading="loading"
              @inputTxt="inputsc"
              @timeCheck="timesc"
              @btnCheck="btnsc"
              @selectCheck="selectsc"
              @selection="selectionsc"
            >
              <template #default="slotProps">
                <el-text size="small" @click="handleQRCode(slotProps.scope)">查看二维码</el-text>
              </template>
            </tablecmt>
          </el-tab-pane>
          <el-tab-pane label="库存品信息">
            <el-button type="danger" icon="el-icon-download" @click="handleExportInfo('3')" plain
              >导出
            </el-button>
            <tablecmt
              :columnList="stockListColumnList"
              :tableData="stockList"
              :loading="loading"
              @inputTxt="inputsc"
              @timeCheck="timesc"
              @btnCheck="btnsc"
              @selectCheck="selectsc"
              @selection="selectionsc"
            >
              <template #default="slotProps">
                <el-text size="small" @click="handleInventoryQRCode(slotProps.scope)"
                  >查看二维码</el-text
                >
              </template>
            </tablecmt>
          </el-tab-pane>
        </el-tabs>
      </div>

      <el-dialog v-model="isaddvalue" title="包件信息" width="100%" :before-close="handleClose">
        <!-- 列表模块 -->
        <el-table
          ref="table"
          v-loading="loading"
          @selection-change="selectionChange"
          :data="packageData"
          :height="height"
          style="width: 100%"
          :border="option.border"
        >
          <!--              <el-table-column type="selection" v-if="option.selection" width="55"-->
          <!--                               align="center"></el-table-column>-->
          <!--              <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>-->
          <el-table-column v-if="option.index" label="序号" type="index" width="60" align="center">
          </el-table-column>
          <template v-for="(item, index) in option.columnParcels">
            <!-- table字段 -->
            <el-table-column
              v-if="item.hide !== true"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :key="index"
            >
            </el-table-column>
          </template>
          <!-- 操作栏模块 -->
          <!--              <el-table-column prop="menu" label="操作" :width="220" align="center">-->
          <!--                <template #="{row}">-->
          <!--&lt;!&ndash;                                <el-button type="primary" text icon="el-icon-view" @click="handleView(row)">查看</el-button>&ndash;&gt;-->
          <!--&lt;!&ndash;                                <el-button type="primary" text icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>&ndash;&gt;-->
          <!--                        <el-button type="primary" text icon="el-icon-delete" @click="rowDel(row)">移除</el-button>-->
          <!--                </template>-->
          <!--              </el-table-column>-->
        </el-table>
        <el-form-item style="margin-left: 45%; margin-top: 5px">
          <!--              <el-button type="primary" icon="el-icon-circle-close" @click="onSubmitPackage">提交(包件)</el-button>-->
          <el-button icon="el-icon-circle-close" @click="isaddvalue = false">关 闭</el-button>
        </el-form-item>
      </el-dialog>
      <el-dialog
        title="二维码"
        :visible.sync="dialogVisibleF"
        width="780px"
        v-model="dialogVisibleF"
      >
        <div>
          <div v-html="html"></div>
        </div>
        <span slot="footer" class="dialog-footer">
          <!--    <el-button type="primary" @click="ddd">导 出</el-button>-->
          <el-button type="primary" @click="printTemplate">打 印</el-button>
          <el-button @click="dialogVisibleF = false">取 消</el-button>
        </span>
      </el-dialog>

      <el-dialog v-model="dialogVisible" title="增值服务" width="30%">
        <!--                :before-close="handleClose"-->
        <el-form-item label="增值服务" prop="freightMark">
          <el-checkbox-group v-model="form.addvalueType" @change="handleCheckedCitiesChange">
            <el-checkbox
              style="width: 100%; margin-bottom: 3%"
              :disabled="true"
              v-for="(item, index) in addvalueServeTypeData"
              :key="item.dictKey"
              :label="item.dictKey"
              >{{ item.dictValue }}
              <span v-if="index === 0 || index === 6 || index === 2 || index === 4"
                >&nbsp;件数:
                <el-input
                  v-model="item.f"
                  :disabled="true"
                  style="width: 10%; border: none; border-bottom: 2px solid #eee"
                />
              </span>
              <span v-if="index === 1"
                >公里:
                <el-input
                  v-model="item.a"
                  :disabled="true"
                  style="width: 10%; border: none; border-bottom: 2px solid #eee"
                />
              </span>
              <span v-if="index === 3"
                >距离:
                <el-input
                  v-model="item.b"
                  :disabled="true"
                  style="width: 10%; border: none; border-bottom: 2px solid #eee"
                />
              </span>
              <span v-if="index === 5"
                >人数:
                <el-input
                  v-model="item.c"
                  :disabled="true"
                  style="width: 10%; border: none; border-bottom: 2px solid #eee"
                />
              </span>
              <span v-if="index === 0"
                >楼层:
                <el-input
                  v-model="item.d"
                  :disabled="true"
                  style="width: 10%; border: none; border-bottom: 2px solid #eee"
                />
              </span>
              <span v-if="item"
                >预计费用:
                <el-input
                  v-model="item.e"
                  :disabled="true"
                  style="width: 20%; border: none; border-bottom: 2px solid #eee"
                />
              </span>
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
            <!--        <el-button type="primary" @click="dialogVisible = false">-->
            <!--          确定(增值服务)-->
            <!--        </el-button>-->
          </span>
        </template>
      </el-dialog>
    </div>
    <el-form-item style="margin-left: 45%; margin-top: 5px">
      <el-button icon="el-icon-circle-close" @click="$router.go(-1)">返 回</el-button>
    </el-form-item>
  </basic-container>
</template>

<script>
import {
  getList,
  getDetail,
  add,
  update,
  remove,
  getDetailById,
} from '@/api/distribution/distributionSignfor';
import {
  getReservationDetail,
  getReservationPackageList,
  getReservationStockListInfo,
  reservationInfoPackageExport,
  reservationInfoStockArticleExport,
  reservationInfoStockListExport,
} from '@/api/distribution/distributionReservation';
import { getStockAddValue, showOrderPackgeCode } from '@/api/distribution/distributionStockArticle';
import { showInventoryPackgeCode } from '@/api/distribution/distributionStockList';
import option from '@/option/distribution/distributionReservationDetails';

import { mapGetters } from 'vuex';
import { getDictionaryBiz } from '@/api/system/dict';
import { downloadXls } from '@/utils/util';

export default {
  data() {
    return {
      html: '',
      height: 300,
      // 弹框标题
      title: '',
      // 是否展示弹框
      box: false,
      dataForm: {},
      dialogVisibleF: false,
      // 是否显示查询
      search: true,
      // 是否显示新增
      isadd: false,
      reservationData: {},
      // 加载中
      loading: true,
      // 查看按钮
      edt: false,
      // 查看pda
      padview: false,
      // 是否为查看模式。。
      view: false,
      // 查询信息
      query: {},
      inputTypeData: [],
      option: option,
      orderData: [],
      stockArticleData: [],
      packageData: [],
      parcelList: [],
      addvalueServeTypeData: [],
      dialogVisible: false,
      // 步骤条
      stepsList: [
        {
          title: '待确认',
          icon: 'Loading',
        },
        {
          title: '已确认',
          icon: 'CircleCheckFilled',
        },
      ],
      // 步骤条激活步骤
      stepActive: 0,
      packageColumnList: [
        {
          prop: 'waybillNumber',
          label: '运单号',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: true,
          sortable: true,
          head: false,
          // head: true,
        },
        {
          prop: 'serviceNumber',
          label: '服务号',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: true,
          sortable: true,
          head: false,
          // head: true,
        },
        {
          prop: 'orderCode',
          label: '订单自编号',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: true,
          sortable: true,
          head: false,
          // head: true,
        },
        {
          label: '仓库',
          prop: 'warehouse',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: true,
          sortable: true,
        },
        {
          label: '包条码',
          prop: 'orderPackageCode',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '发站仓',
          prop: 'sendWarehouseName',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '目的仓',
          prop: 'acceptWarehouseName',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        // {
        //   label: '发货时间',
        //   prop: 'acceptWarehouseName',
        //   type: 2,
        //   values: '',
        //   width: '150',
        //   checkarr: [],
        //   fixed: false,
        //   sortable: true,
        // },
        {
          label: '入库时间',
          prop: 'warehouseEntryTimeEnd',
          type: 5,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '入库车次',
          prop: 'trainNumber',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '一级品',
          prop: 'firsts',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '二级品',
          prop: 'second',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '三级品',
          prop: 'thirdProduct',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '物料名称',
          prop: 'materialName',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '数量',
          prop: 'quantity',
          type: 1,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '计划数量',
          prop: 'reservationNum',
          type: 1,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '车次号',
          prop: 'trainNumber',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '货位信息',
          prop: 'goodsAllocation',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '所在托盘',
          prop: 'pallet',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: '',
          label: '操作',
          type: 6,
          values: '',
          width: '150',
          checkarr: [],
          fixed: 'right',
          sortable: false,
        },
      ],
      stockArticleColumnList: [
        {
          prop: 'waybillNumber',
          label: '运单号',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: true,
        },
        {
          prop: 'orderCode',
          label: '订单自编号',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: true,
          sortable: true,
          head: false,
        },
        {
          label: '商场名称',
          prop: 'mallName',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '门店名称',
          prop: 'storeName',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '货物名称',
          prop: 'descriptionGoods',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '品牌',
          prop: 'brand',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          label: '收货单位',
          prop: 'consigneeUnit',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },

        {
          label: '订单来源',
          prop: 'resource',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        // {
        //   label: '服务类型',
        //   prop: 'typeService',
        //   type: 1,
        //   values: '',
        //   width: '160',
        //   checkarr: [],
        //   fixed: false,
        //   sortable: true
        // },
        {
          label: '包件数量',
          prop: 'reservationNum',
          type: 1,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        // {
        //   label: '增值服务费',
        //   prop: 'fee',
        //   type: 1,
        //   values: '',
        //   width: '150',
        //   checkarr: [],
        //   fixed: false,
        //   sortable: true
        // },
        {
          prop: '',
          label: '操作',
          type: 6,
          values: '',
          width: '150',
          checkarr: [],
          fixed: 'right',
          sortable: false,
        },
      ],
      stockListColumnList: [
        {
          prop: 'incomingBatch',
          label: '入库批次号',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: true,
          sortable: true,
          head: false,
        },
        {
          prop: 'orderCode',
          label: '订单自编号',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: true,
          sortable: true,
          head: false,
        },
        {
          prop: 'serviceNumber',
          label: '服务号',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'sku',
          label: 'SKU码',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: true,
          sortable: true,
          head: false,
        },
        {
          prop: 'marketName',
          label: '商场名称',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'cargoNumber',
          label: '物料编码',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'cargoUnit',
          label: '单位',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'descriptionGoods',
          label: '物料名称',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'brandName',
          label: '品牌',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },

        {
          prop: 'reservationNum',
          label: '预约数量',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'stockupNum',
          label: '已备件数',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        // {
        //   prop: 'orderCode',
        //   label: '备货时间',
        //   type: 2,
        //   values: '',
        //   width: '160',
        //   checkarr: [],
        //   fixed: false,
        //   sortable: true
        // },
        {
          prop: 'stockupArea',
          label: '备货区',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: '',
          label: '托盘码',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: '',
          label: '库位信息',
          type: 2,
          values: '',
          width: '160',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: '',
          label: '操作',
          type: 6,
          values: '',
          width: '150',
          checkarr: [],
          fixed: 'right',
          sortable: false,
        },
      ],
      // 分页信息
      page: {
        currentPage: 1,
        pageSize: 30,
        total: 40,
      },
      // 表单数据
      form: {},
      // 选择行
      selectionList: [],
      isLiabilityData: [],
      //状态列表
      stateData: [],
      // 表单配置
      wrapoption: {
        expand: false,
        index: true,
        border: true,
        selection: true,
        column: [],
      },
      // 表单列表
      stockList: [],
      // 基本信息表单列表
      basicdata: {},
      //
      wrapdata: [],
      //预约单ID
      reservationId: '',
      deliveryTypeData: [],
      isaddvalue: false,
      loadingObj: {
        pageLoading: false,
      },
    };
  },
  watch: {
    '$route.query.id': {
      handler(newVal, oldVal) {
        if (this.$route.path !== '/distribution/reservation/reservationDetails') return;
        console.log('this.$route :>> ', this.$route);
        console.log(newVal, oldVal);
        this.fetchData();
        this.onLoad(this.page);
      },
      deep: false,
      immediate: true,
    },
  },
  // 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 {
  //     }
  //   }
  // },
  mounted() {
    this.init();
    this.onLoad();
    this.queryDictionary();
  },
  created() {
    this.$watch(
      () => this.$route.params,
      () => {
        this.fetchData();
      },
      // 组件创建完后获取数据，
      // 此时 data 已经被 observed 了
      { immediate: true }
    );
  },
  computed: {
    ...mapGetters(['permission']),
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    },
  },
  methods: {
    //导出
    handleExportInfo(type) {
      let row = {};
      row.reservationId = this.$route.query.id;
      let nulName;
      switch (type) {
        case '1':
          nulName = '预约单订单数据.xlsx';
          reservationInfoStockArticleExport(row).then(res => {
            console.log(res.data);
            downloadXls(res.data, nulName);
          });
          break;
        case '2':
          nulName = '预约单包件数据.xlsx';
          reservationInfoPackageExport(row).then(res => {
            console.log(res.data);
            downloadXls(res.data, nulName);
          });
          break;
        case '3':
          nulName = '预约单库存品数据.xlsx';
          reservationInfoStockListExport(row).then(res => {
            console.log(res.data);
            downloadXls(res.data, nulName);
          });

          break;
      }
    },
    //修改
    rowUpdate() {},
    handleClick(tab, event) {
      console.log('$$$$$$$$$', tab, event);
    },
    fetchData() {
      this.error = this.post = null;
      this.loading = true;
      if (this.$route.query.id) {
        this.reservationId = this.$route.query.id;
      }
    },
    queryDictionary() {
      getDictionaryBiz('yes_no').then(res => {
        this.isLiabilityData = res.data.data;
      });
      getDictionaryBiz('basic_in_type').then(res => {
        this.inputTypeData = res.data.data;
      });
      getDictionaryBiz('distribution_type').then(res => {
        this.deliveryTypeData = res.data.data;
      });
      getDictionaryBiz('addvalue_serve_type').then(res => {
        this.addvalueServeTypeData = res.data.data;
      });
    },
    //返回
    handleViewpda() {},
    init() {
      this.height = this.setPx(document.body.clientHeight - 340);
    },
    searchHide() {
      this.search = !this.search;
    },

    searchChange() {
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    checkAddValue(scope) {
      const { row } = scope;
      this.dialogVisible = true;
      let id = row.id;
      getStockAddValue(id).then(res => {
        let data = res.data.data.data;
        //存在多种增值服务项
        let a = [];
        data.forEach((item, index) => {
          if (item.addvalueId === '1') {
            this.addvalueServeTypeData[0].f = item.number;
            this.addvalueServeTypeData[0].e = item.fee;
            this.addvalueServeTypeData[0].d = item.floor;
          }

          if (item.addvalueId === '2') {
            this.addvalueServeTypeData[1].a = item.kilometer;
            this.addvalueServeTypeData[1].e = item.fee;
          }
          if (item.addvalueId === '3') {
            this.addvalueServeTypeData[2].f = item.number;
            this.addvalueServeTypeData[2].e = item.fee;
          }
          if (item.addvalueId === '4') {
            this.addvalueServeTypeData[3].b = item.distance;
            this.addvalueServeTypeData[3].e = item.fee;
          }
          if (item.addvalueId === '5') {
            this.addvalueServeTypeData[4].f = item.number;
            this.addvalueServeTypeData[4].e = item.fee;
          }
          if (item.addvalueId === '6') {
            this.addvalueServeTypeData[5].c = item.peopleNum;
            this.addvalueServeTypeData[5].e = item.fee;
          }
          if (item.addvalueId === '7') {
            this.addvalueServeTypeData[6].f = item.number;
            this.addvalueServeTypeData[6].e = item.fee;
          }
          a.push(item.addvalueId);
          console.log('<<<<<<<<<<', a);
        });
        this.form.addvalueType = a;

        console.log('>>>>>>>>>>>>>>>>>>>>>>>>>', res);
      });
    },
    selectionsc(value) {
      console.log('进来了>>>>>>>>>>>>>', value);
    },
    delectsolt(scope) {
      const { row } = scope;
      console.log(row);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    async handleQRCode(scope) {
      try {
        this.loadingObj.pageLoading = true;

        const { row } = scope;
        console.log('执行查看二维码');
        this.materialQRCode = row;
        console.log('---------------->', row);
        let qr = {
          ids: row.id,
        };
        this.html = '';
        const res = await showOrderPackgeCode(qr);

        const { code, data } = res.data;

        if (code !== 200) return;

        for (let i = 0; i < data.moldList.length; i++) {
          const element = data.moldList[i];
          this.html += element;
        }
        this.dialogVisibleF = true;
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        this.loadingObj.pageLoading = false;
      }
    },
    printTemplate() {},
    handleInventoryQRCode(scope) {
      const { row } = scope;
      console.log('执行查看二维码------------>row:', row);

      this.materialQRCode = row;
      console.log('---------------->', row);
      let qr = {
        ids: row.id,
      };
      this.html = '';
      showInventoryPackgeCode(row.reservationId, row.id).then(res => {
        // this.orderPackageCode = res.data
        console.log(res.data);
        this.html = this.getHtmls(res.data.data.dataList, res.data.data.templateHtml);
      });

      this.dialogVisibleF = true;
    },
    checkPackage(scope) {
      const { row } = scope;
      console.log(row);

      if (row.packageList) {
        this.packageData = row.packageList;
      }
      // getReservationPackage(this.reservationId,row.id).then(res=>{
      //   console.log("@@@@@@@",res);
      // });
      this.isaddvalue = true;
      //
    },
    btnsc(index, row) {
      console.log(index, row);
    },
    selectsc(index, row) {
      this.query[row.prop] = index;
      if (!index) {
        delete this.query[row.prop];
      }
      this.onLoad(this.page);
    },
    timesc(index, row) {
      console.log(index, row);
    },
    inputsc(index, row) {
      this.query[row.prop] = index;
      if (!index) {
        delete this.query[row.prop];
      }
      this.onLoad(this.page);
    },
    handleCheckedCitiesChange(value) {
      if (value) {
        this.form.addvalueType = value;
      }
      console.log('>>>>>', this.form);
      if (value.length < 1) {
        this.costList = [];
        this.costListName = [];
      }
      this.deliveryWayData.forEach(i => {
        if (value.includes(i.dictKey)) {
          console.log(i);
          i.pitch = true;
          this.costListName = value;
        }
      });
    },
    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;
        }
      });
    },
    handleAdd() {
      this.title = '新增';
      this.form = {};
      this.box = true;
    },
    handleEdit(row) {
      this.title = '编辑';
      this.box = true;
      getDetail(row.id).then(res => {
        this.form = res.data.data;
      });
    },
    handleView(row) {
      console.log('查看>>>>>>>>>>', row);
      this.title = '查看';
      this.view = true;
      this.box = true;
      getWrapdetail(row.id).then(res => {
        console.log('查看>>>>>>>', res.data.data);
      });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.selectionClear();
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    beforeClose(done) {
      done();
      this.form = {};
      this.view = false;
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.table.clearSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },
    onLoad(page) {
      //查询详情
      let id = this.reservationId;
      getReservationDetail(id).then(res => {
        let data = res.data.data.data;
        if (data.stockArticleList) {
          let stockArticleList = data.stockArticleList;
          stockArticleList.forEach(s => {
            this.deliveryTypeData.forEach(item => {
              if (s.typeService.toString() === item.dictKey) {
                s.typeService = item.dictValue;
              }
            });
          });
          this.stockArticleData = data.stockArticleList;
          console.log('this.stockArticleData-------------->', this.stockArticleData);
        }
        this.deliveryTypeData.forEach(item => {
          if (data.deliveryType === item.dictKey) {
            data.typeService = item.dictValue;
          }
        });
        console.log('data', data);
        this.stepActive =
          this.stepsList.findIndex(item => item.title === data.reservationStatusName) + 1;
        this.reservationData = data;
      });
      //查询预约包件信息
      getReservationPackageList(id).then(res => {
        this.parcelList = res.data.data;
      });
      //TODO 这里还需要对预约单的库存品信息进行查询
      getReservationStockListInfo(id).then(res => {
        console.log('<<<<<<<<<', res.data.data);
        this.stockList = res.data.data;
      });

      this.loading = false;
    },
  },
};
</script>

<style lang="scss">
.btsbx {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

  > button {
    width: 120px;
    height: 40px;
  }
}

.maxitembxlist {
  display: flex;
  flex-direction: column;
  // padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;

  > .items {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fcfcfc;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #e2e0e0;
    border-radius: 2px;
    margin-bottom: 20px;

    &:nth-last-child(1) {
      margin-bottom: 0;
    }

    > .contbx {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-top: 10px;

      > .tabitem {
        display: flex;
        align-items: center;

        > div {
          flex: 1;
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #f3f3f3;
          border: 1px solid #e2e0e0;
          margin-bottom: -2px;
          margin-right: -2px;
        }
      }

      > .contentitem {
        display: flex;
        align-items: center;

        > div {
          flex: 1;
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #ffffff;
          border: 1px solid #e2e0e0;
          margin-bottom: -2px;
          margin-right: -2px;
        }
      }
    }

    > .titltophead {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .icons {
        font-size: 27px;

        &:nth-of-type(1) {
          margin-right: 8px;
        }
      }
    }

    > .editinput {
      display: flex;
      flex-direction: column;
      padding: 20px 0;

      > .inputitem {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 10px;

        &:nth-last-child(1) {
          margin-bottom: 0;
        }

        .inpts {
          display: flex;
          align-items: flex-start;

          flex: 1;
          padding-right: 10px;

          > span {
            width: 90px;
          }

          > div:nth-of-type(1) {
            flex: 1;
          }
        }
      }
    }
  }
}

.topbox {
  display: flex;
  flex-direction: column;

  > .titlxbx {
    font-size: 16px;
    display: flex;
    align-items: center;

    > div {
      flex: 1;
      display: flex;
      align-items: center;

      > div {
        flex: 1;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e2e0e0;
        margin-bottom: -1px;
        margin-right: -1px;
        word-break: break-all;

        &:nth-of-type(1) {
          background-color: #f3f3f3;
        }
      }
    }
  }
}
</style>
