<template>
  <div>
    <div class="main">
      <div class="maintop">
        <div class="mainbtn">
          <el-button
            size="small"
            class="thebtn2"
            :disabled="multiple"
            v-hasButtons="['DeliveryHandledPrint']"
            @click="getPrintCheck"
            >{{ '生成打印' }}</el-button
          >
          <!-- <el-button
            size="small"
            class="thebtn3"
            :disabled="multiple"
            v-hasButtons="['DeliveryHandledBind']"
            @click="codeBind(true)"
            >{{ '绑定追溯' }}</el-button
          >
          <el-button
            size="small"
            class="thebtn3"
            :disabled="multiple"
            v-hasButtons="['DeliveryHandledUnBind']"
            @click="codeBind(false)"
            >{{ '解绑追溯' }}</el-button
          > -->
          <el-button
            size="small"
            class="thebtn4"
            :disabled="multiple"
            @click="deleteDelivery"
            v-hasButtons="['DeliveryHandledDelete']"
            >{{ '批量删除' }}</el-button
          >
          <el-button
            size="small"
            v-hasButtons="['DeliveryHandledExport']"
            @click="handleExport"
            class="thebtn1"
            >{{ '导出' }}</el-button
          >
        </div>
      </div>
      <el-table
        :data="tableData"
        height="540px"
        style="width: 100%"
        :header-cell-style="{ background: '#EEEEEE' }"
        @selection-change="handleSelectionChange"
        :span-method="objectSpanMethod"
      >
        <!-- :row-class-name="tableRowClassName"
         -->
        <el-table-column prop="colsele" type="selection" width="55">
        </el-table-column>

        <el-table-column
          align="center"
          width="80px"
          prop="dayBatch"
          label="批次"
        >
        </el-table-column>
        <el-table-column
          align="center"
          width="60px"
          prop="batchNumber"
          label="序号"
        >
        </el-table-column>

        <el-table-column
          align="center"
          width="180px"
          prop="deliverCode"
          :label="'发货单号'"
        >
        </el-table-column>
        <el-table-column
          width="180px"
          align="center"
          prop="orderCode"
          :label="'订单编号'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="orderTypeVal"
          :label="'订单类型'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="orderStatusVal"
          :label="'订单状态'"
          width="120px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.orderStatusVal }}</span>
            <span
              @click="deleteOrderRow(scope.row)"
              style="font-size: 18px; cursor: pointer; margin-left: 10px"
              ><i class="el-icon-delete"></i
            ></span>
          </template>
        </el-table-column>
        <el-table-column
          width="150px"
          align="center"
          prop="memberCode"
          :label="'会员编号'"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="memberName"
          :label="'会员姓名'"
        >
        </el-table-column>
        <el-table-column
          width="150px"
          align="center"
          prop="phone"
          :label="'联系方式'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="120px"
          prop="productCode"
          :label="'产品编号'"
        >
        </el-table-column>
        <el-table-column
          width="150px"
          align="center"
          prop="productName"
          :label="'产品名称'"
        >
        </el-table-column>

        <el-table-column
          width="150px"
          align="center"
          prop="specsName"
          :label="'产品规格'"
        >
        </el-table-column>
        <el-table-column align="center" prop="unitName" :label="'产品单位'">
        </el-table-column>

        <el-table-column align="center" prop="quantity" :label="'产品数量'">
        </el-table-column>
        <!-- <el-table-column align="center" prop="isBarCodeVal" label="是否追溯">
        </el-table-column>
        <el-table-column align="center" prop="barCode" :label="'追溯编号'">
        </el-table-column>
        <el-table-column align="center" prop="scanTime" :label="'扫码日期'">
        </el-table-column> -->

        <el-table-column align="center" prop="recName" :label="'收货人'">
        </el-table-column>
        <el-table-column
          width="150px"
          align="center"
          prop="recPhone"
          :label="'收货电话'"
        >
        </el-table-column>
        <el-table-column
          width="180px"
          align="center"
          prop="recAddress"
          :formatter="formatAddress"
          :label="'收货地址'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="shippingChannelVal"
          :label="'发货类型'"
        >
        </el-table-column>
        <el-table-column
          min-width="100px"
          align="center"
          prop="storehouseName"
          :label="'发货仓库'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="printStatusVal"
          :label="'打印状态'"
        >
        </el-table-column>
        <el-table-column
          width="150px"
          align="center"
          prop="payTime"
          :label="'支付日期'"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="deliveryWayVal"
          :label="'发货方式'"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="operateScopeVal"
          :label="'供应方式'"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="tranTypeVal"
          :label="'运输方式'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="preSaleStatusVal"
          :label="'预售状态'"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="logisticsCompany"
          :label="'物流公司'"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="logisticsCode"
          :label="'物流单号'"
        >
        </el-table-column>
        <el-table-column align="center" prop="remark" :label="'备注'">
        </el-table-column>
        <el-table-column
          align="center"
          prop="vertexName"
          :label="$t('隶属体系')"
        >
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="systemType"
          :label="$t('系统类型')"
        >
          <template slot-scope="scope">
            <div
              v-for="item in systemTypes"
              :key="item.value"
              v-if="scope.row.systemType == item.value"
            >
              {{ item.label }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          width="150px"
          align="center"
          prop="creationTime"
          :label="'创建日期'"
        >
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="params.pageNum"
      :limit.sync="params.pageSize"
      @pagination="getList"
      :pageSizes="pageSizes"
    />

    <!-- 打印货单1版 -->
    <!-- <el-dialog
      :close-on-click-modal="false"
      :visible.sync="scdyShow2"
      width="800px"
      center
      append-to-body
      class="fhd_dialog"
    >
      <div class="fhdbox" v-for="(item, index) in dyhdData" :key="index">
        <div class="fhdtop">
          <el-row>
            <el-col :span="12">
              <div>【条形码】</div>
            </el-col>
            <el-col :span="12">
              <span class="col_title">打印时间</span>
              <span class="col-content">2022-11-03 12:12:00</span>
            </el-col>
          </el-row>
          <el-row class="mainrow">
            <el-col :span="12">
              <span class="col_title">发货单号</span>
              <span class="col-content">{{ item.deliverCode }}</span>
            </el-col>
          </el-row>
        </div>
        <div class="fhdtop">
          <el-row>
            <el-col :span="12">
              <span class="col_title">收货人</span>
              <span class="col-content">{{ item.recName }}</span>
            </el-col>
            <el-col :span="12">
              <span class="col_title">收货电话</span>
              <span>{{ item.recPhone }}</span>
            </el-col>
          </el-row>
          <el-row class="mainrow">
            <el-col :span="10">
              <div class="fhd_flex">
                <span class="col_title">收货地址</span>
                <span class="col-content">
                  <el-input v-model="item.recAddress" disabled></el-input>
                </span>
              </div>
            </el-col>
            <el-col :span="14">
              <el-input type="textarea" :rows="3"></el-input>
            </el-col>
          </el-row>
        </div>

        <el-table
          :data="item.itemList"
          :header-cell-style="{ background: '#EEEEEE' }"
          border
        >
          <el-table-column align="center" prop="productName" :label="'产品名称'">
          </el-table-column>
          <el-table-column align="center" prop="specsName" :label="'产品规格'">
          </el-table-column>
          <el-table-column align="center" prop="quantity" :label="'产品数量'">
          </el-table-column>
          <el-table-column align="center" prop="price" :label="'订单金额'">
          </el-table-column>
        </el-table>
      </div>
    </el-dialog> -->

    <el-dialog
      :title="zsTitle"
      :close-on-click-modal="false"
      :visible.sync="bdzsShow"
      width="70%"
      append-to-body
      ><div>
        <el-table
          :data="codeData"
          height="500px"
          style="width: 100%"
          :header-cell-style="{ background: '#EEEEEE' }"
          border
          ref="singleTable"
          @current-change="handleCurrentChange"
        >
          <el-table-column
            align="center"
            prop="orderCode"
            :label="'订单编号'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="productName"
            :label="'产品名称'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="specsName"
            :label="'产品规格'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="productNum"
            :label="'产品数量'"
          >
          </el-table-column>
          <el-table-column align="center" prop="barCode" :label="'追溯编号'">
            <template slot-scope="scope">
              <el-input
                :disabled="!ifcodebind"
                v-model="scope.row.barCode"
                tabindex="1"
                :ref="'mark' + scope.$index"
                @keydown.enter.native="nextFocus"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="" :label="'操作'">
            <template slot-scope="scope">
              <div
                v-if="ifcodebind"
                @click="reCz(scope.row)"
                style="cursor: pointer; color: #409eff"
              >
                {{ '重置' }}
              </div>
              <div
                @click="handleDelete(scope.row, scope.$index, codeData)"
                style="color: #c73030; cursor: pointer"
              >
                {{ '删除' }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="footer" style="text-align: center; margin-top: 20px">
          <el-button @click="bdzsShow = false">
            {{ '取消' }}</el-button
          >
          <el-button type="primary" @click="sureBd">{{
            '确定'
          }}</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 国内打印 -->
    <div id="print-content" v-show="false">
      <div class="fhdbox2" v-for="(item, index) in dyhdData" :key="index">
        <div>
          <div
            class="fhdTitle"
            style="
              font-weight: 600;
              font-size: 16px;
              margin-bottom: 5px;
              text-align: center;
            "
          >
            出库单汇总
          </div>

          <div
            class="mainrow2"
            style="
              font-weight: 400;
              font-size: 14px;
              margin-bottom: 5px;
              margin-right: 20px;
              text-align: right;
            "
          >
            序号：{{ item.batchNumber }} / {{ item.batchCount }}
          </div>

          <div style="padding-right: 20px">
            <img :id="'barcode' + index" />
          </div>
          <div
            class="mainrow2"
            style="
              padding: 5px 0;
              display: flex;
              align-items: center;
              font-size: 12px;
            "
          >
            <div class="rowcontent" style="width: 400px">
              发货单编号：{{ item.deliverCode }}
            </div>
            <div class="rowcontent" style="width: 400px">
              <!-- 出货仓库：{{ item.houseName }} -->
            </div>
            <div class="rowcontent" style="width: 400px">
              {{ '支付时间' }}：{{ item.payTime }}
            </div>
          </div>
          <div
            class="mainrow2"
            style="
              padding: 5px 0;
              display: flex;
              align-items: center;
              font-size: 12px;
            "
          >
            <div class="rowcontent" style="width: 400px">
              收货人：{{ item.recName }}
            </div>
            <div class="rowcontent" style="width: 400px">
              收货电话：{{ item.recPhone }}
            </div>
            <div class="rowcontent" style="width: 400px">
              {{ '打印时间' }}：{{ item.printTime }}
            </div>
          </div>

          <div class="mainrow2" style="font-size: 12px">
            <div>
              <span> {{ '收货地址' }}:</span>
              <span>
                {{ item.recProvinceVal }}{{ item.recCityVal
                }}{{ item.recCountyVal || "" }}{{ item.recAddress }}</span
              >
            </div>
          </div>

          <table
            class="tables"
            style="
              margin-top: 10px;
              width: 100%;
              background: #fff;
              border-collapse: collapse;
              border: 1px solid #cccccc;
              border-spacing: 0;
              table-layout: fixed;
              font-size:12px;!important
              border-collapse: collapse;
            "
            border
            :data="item.itemList"
          >
            <tr>
              <td colspan="3">{{ '产品编码' }}</td>
              <td colspan="5">{{ '产品名称' }}</td>
              <td colspan="4">{{ '产品规格' }}</td>
              <td colspan="1">{{ '单位' }}</td>
              <td colspan="1">{{ '数量' }}</td>
              <td colspan="2">{{ '金额' }}</td>
              <!-- <td colspan="2">{{ '金额' }}</td> -->
              <!-- <td colspan="2">{{ '备注' }}</td> -->
            </tr>
            <tr v-for="(aitem, aindex) in item.itemList" :key="aindex">
              <td colspan="3">{{ aitem.productCode }}</td>
              <td colspan="5">{{ aitem.productName }}</td>
              <td colspan="4">{{ aitem.specsName }}</td>
              <td colspan="1">{{ aitem.unitTransactionVal }}</td>
              <td colspan="1">{{ aitem.quantity }}</td>
              <td colspan="2">{{ aitem.price | decimalFormat }}</td>
              <!-- <td colspan="2">{{ aitem.price * aitem.quantity }}</td> -->
              <!-- <td colspan="2">{{ aitem.remarks }}</td> -->
            </tr>
          </table>
          <div
            class="mainrow2"
            style="
              padding: 5px 0;
              display: flex;
              align-items: center;
              margin-top: 20px;
              font-size: 12px;
            "
          >
            <div class="rowcontent" style="width: 260px">制单人：</div>
            <div class="rowcontent" style="width: 260px">出库人：</div>
            <div class="rowcontent" style="width: 260px">出库时间：</div>
            <div class="rowcontent" style="width: 260px">
              客服热线：4001112818
            </div>
          </div>
          <div>
            <span style="font-weight: bold; font-size: 12px">温馨提示：</span>
            <span style="font-size:10px;!important"
              >尊敬的各位家人，感谢您长期以来对海之圣的支持与厚爱，当您收到货物时，请检查货物是否有破损，当场开箱验货确认无误后再签收哦，如有问题请第一时间致电公司客服热线，我们将一如既往的为您提供优质、快捷的物流服务。</span
            >
          </div>
          <div style="page-break-after: always"></div>
        </div>
      </div>
    </div>
    <!-- 海外打印 -->
    <div id="print-content2" v-show="false">
      <div
        class="fhdbox2"
        style="min-height: 100vh"
        v-for="(item, index) in dyhdData"
        :key="index"
      >
        <div
          class="fhdTitle"
          style="
            text-align: center;
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 5px;
          "
        >
          {{ '出库单' }}
        </div>
        <div style="text-align: right; line-height: 24px">
          （{{ '快递发货' }}）
        </div>
        <div
          style="
            text-align: right;
            line-height: 24px;
            border-bottom: 2px solid #000000;
            padding-bottom: 10px;
          "
        >
          {{ '订单日期' }} {{ item.printTime }}
        </div>
        <div
          class="mainrow2"
          style="padding: 5px 0; display: flex; align-items: center"
        >
          <div
            class="rowcontent"
            style="border-bottom: 2px solid #000000; padding-bottom: 10px"
          >
            {{ '发货单号' }} {{ item.deliverCode }}
          </div>
          <!-- <div class="rowcontent">订单类型{{ item.deliverCode }}</div> -->
        </div>
        <div
          class="mainrow2"
          style="padding: 5px 0; display: flex; align-items: center"
        >
          <div
            class="rowcontent"
            style="
              width: 46%;
              border-top: 2px solid #000000;
              margin-right: 10px;
              padding-top: 10px;
            "
          >
            {{ '收货人'
            }}<span style="margin-left: 20px">{{ item.recName }}</span>
          </div>
          <div
            class="rowcontent"
            style="width: 46%; border-top: 2px solid #000000; padding-top: 10px"
          >
            {{ '联系电话'
            }}<span style="margin-left: 20px">{{ item.recPhone }}</span>
          </div>
        </div>

        <div class="mainrow2">
          <div>
            <span> {{ '收货地址' }}</span>
            <span style="margin-left: 30px"> {{ item.recAddress }}</span>
          </div>
        </div>
        <!-- <div
          class="mainrow2"
          style="
            padding: 5px 0;
            display: flex;
            align-items: center;
            border-top: 2px solid #000000;
            border-bottom: 2px solid #000000;
          "
        >
          <div
            class="rowcontent"
            style="width: 50%; display: flex; align-items: center"
          >
            <div style="padding-right: 20px; border-right: 2px solid #000000">
              会员编号
            </div>
            <span style="margin-left: 20px">{{ item.recName }}</span>
          </div>
          <div
            class="rowcontent"
            style="width: 50%; display: flex; align-items: center"
          >
            <div style="padding-right: 20px; border-right: 2px solid #000000">
              会员姓名
            </div>
            <span style="margin-left: 20px">{{ item.recPhone }}</span>
          </div>
        </div> -->

        <table
          class="tables"
          style="
            margin-top: 10px;
            width: 100%;
            background: #fff;
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
            border-collapse: collapse;
          "
          :data="item.itemList"
        >
          <tr style="border-bottom: 2px solid #000000; padding-bottom: 10px">
            <td colspan="3" style="border-left: none; border-right: none">
              {{ '产品名称' }}
            </td>
            <td colspan="1">{{ '单位' }}</td>
            <td colspan="2">{{ '销售数量' }}</td>
            <td colspan="2">{{ '产品单价' }}</td>
            <td colspan="2">{{ '总金额' }}</td>
            <td colspan="2">{{ '产品规格' }}</td>
            <td colspan="2">{{ '赠品数量' }}</td>
            <td colspan="2">{{ '出库数量' }}</td>
          </tr>
          <tr v-for="(aitem, aindex) in item.itemList" :key="aindex">
            <td colspan="3">{{ aitem.productName }}</td>
            <td colspan="1">{{ aitem.unitTran }}</td>
            <td colspan="2">{{ aitem.quantity }}</td>
            <td colspan="2">{{ aitem.price }}</td>
            <td colspan="2">{{ aitem.price * aitem.quantity }}</td>
            <td colspan="2">{{ aitem.specsName }}</td>
            <td colspan="2"></td>
            <td colspan="2"></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as del from "@/api/delivery";
import JsBarcode from "jsbarcode";
export default {
  name: "Yihandeled",
  props: {
    params: {
      type: Object,
      default: null,
    },
  },
  filters: {
    decimalFormat(value) {
      return Number(value).toFixed(2);
    },
  },
  data() {
    return {
      tableData: [],
      total: 0,
      idList: [],
      orderIdList: [],
      multiple: true,
      bdzsShow: false,
      zsTitle: "",
      ifcodebind: "", //true绑定false解绑
      codeData: [],
      delIdList: [], //存放删除
      delIdList2: [], //存放解绑
      pageSizes: [100, 500, 1000, 2000, 4000],
      // 需要合并项的列
      needMergeArr: [
        {
          colName: "colsele",
          mergeCheckNames: ["deliverCode"],
        },
        {
          colName: "dayBatch",
          mergeCheckNames: ["dayBatch", "batchNumber"],
        },
        {
          colName: "batchNumber",
          mergeCheckNames: ["dayBatch", "batchNumber"],
        },
        {
          colName: "deliverCode",
          mergeCheckNames: ["deliverCode"],
        },
        {
          colName: "orderCode",
          mergeCheckNames: ["deliverCode", "orderCode"],
        },
        {
          colName: "orderTypeVal",
          mergeCheckNames: ["deliverCode", "orderCode", "orderTypeVal"],
        },
        {
          colName: "memberCode",
          mergeCheckNames: ["deliverCode", "orderCode", "memberCode"],
        },
        {
          colName: "memberName",
          mergeCheckNames: ["deliverCode", "orderCode", "memberName"],
        },
        {
          colName: "phone",
          mergeCheckNames: ["deliverCode", "orderCode", "phone"],
        },
        {
          colName: "recName",
          mergeCheckNames: ["deliverCode", "orderCode", "recName"],
        },
        {
          colName: "recPhone",
          mergeCheckNames: ["deliverCode", "orderCode", "recPhone"],
        },

        {
          colName: "recAddress",
          mergeCheckNames: ["deliverCode", "orderCode", "recAddress"],
        },
        {
          colName: "operateScopeVal",
          mergeCheckNames: ["deliverCode", "orderCode", "operateScopeVal"],
        },
        {
          colName: "isLandTransVal",
          mergeCheckNames: ["deliverCode", "orderCode", "isLandTransVal"],
        },
        {
          colName: "deliveryWayVal",
          mergeCheckNames: ["deliverCode", "orderCode", "deliveryWayVal"],
        },
        {
          colName: "preSaleStatusVal",
          mergeCheckNames: ["deliverCode", "orderCode", "preSaleStatusVal"],
        },
        {
          colName: "printStatusVal",
          mergeCheckNames: ["deliverCode", "orderCode", "printStatusVal"],
        },
        {
          colName: "remark",
          mergeCheckNames: ["deliverCode", "orderCode", "remark"],
        },
        {
          colName: "creationTime",
          mergeCheckNames: ["deliverCode", "orderCode", "creationTime"],
        },
        {
          colName: "payTime",
          mergeCheckNames: ["deliverCode", "orderCode", "payTime"],
        },
        {
          colName: "logisticsCompany",
          mergeCheckNames: ["deliverCode", "orderCode", "logisticsCompany"],
        },
        {
          colName: "logisticsCode",
          mergeCheckNames: ["deliverCode", "orderCode", "logisticsCode"],
        },
      ],
      rowMergeArrs: {}, // 包含需要一个或多个合并项信息的对象
      dyhdTable: [],
      dyhdData: [],
      pkCountry: "",
      currentRow: "",
    };
  },
  computed: {
    ...mapGetters(["user"]),
  },
  mounted() {
    this.getList();
    this.pkCountry = this.user.pkCountry;
  },
  methods: {
    formatAddress(row) {
      return (
        row.recProvinceVal +
        row.recCityVal +
        (row.recCountyVal || "") +
        row.recAddress
      );
    },
    // 条码枪回车
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 条码枪回车
    nextFocus() {
      const len = this.codeData.length;
      const val = this.currentRow;
      this.codeData.forEach((v, i) => {
        if (v === val) {
          if (i < len - 1) {
            this.setCurrent(this.codeData[i + 1]);
            this.$refs["mark" + (i + 1)].focus();
          } else {
            this.setCurrent(this.codeData[0]);
            this.$refs["mark" + 0].focus();
          }
        }
      });
    },
    // 条码枪回车
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    totalAmount(row) {
      let total2 = "";

      total2 = row.price * row.quantity;
      return total2;
    },
    //解决多列行列合并，根据某一列 合并其他列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let needMerge = this.needMergeArr.some((item) => {
        return item.colName === column.property;
      });
      if (needMerge === true) {
        return this.mergeAction(column.property, rowIndex, column);
      }
    },
    mergeAction(val, rowIndex, colData) {
      let _row = this.rowMergeArrs[val].rowArr[rowIndex];
      let _col = _row > 0 ? 1 : 0;
      return [_row, _col];
    },
    rowMergeHandle(arr, data) {
      if (!Array.isArray(arr) && !arr.length) return false;
      if (!Array.isArray(data) && !data.length) return false;
      let needMerge = {};

      arr.forEach((mergeItem) => {
        // 创建合并管理对象
        needMerge[mergeItem.colName] = {
          rowArr: [],
          rowMergeNum: 0,
        };
        let currentMergeItemData = needMerge[mergeItem.colName];

        // 进行合并管理对象数据的遍历整理
        data.forEach((item, index) => {
          if (index === 0) {
            currentMergeItemData.rowArr.push(1);
            currentMergeItemData.rowMergeNum = 0;
          } else {
            let currentRowData = data[index];
            let preRowData = data[index - 1];

            if (
              this.colMergeCheck(
                currentRowData,
                preRowData,
                mergeItem.mergeCheckNames
              )
            ) {
              currentMergeItemData.rowArr[
                currentMergeItemData.rowMergeNum
              ] += 1;
              currentMergeItemData.rowArr.push(0);
            } else {
              currentMergeItemData.rowArr.push(1);
              currentMergeItemData.rowMergeNum = index;
            }
          }
        });
      });
      return needMerge;
    },
    colMergeCheck(currentRowData, preRowData, mergeCheckNames) {
      if (!Array.isArray(mergeCheckNames) && !mergeCheckNames.length)
        return false;
      let result = true;
      for (let index = 0; index < mergeCheckNames.length; index++) {
        const mergeCheckName = mergeCheckNames[index];
        if (currentRowData[mergeCheckName] !== preRowData[mergeCheckName]) {
          result = false;
          break;
        }
      }
      return result;
    },
    //删除行内订单状态列
    deleteOrderRow(row) {
      this.$confirm('是否删除' + "?").then((_) => {
        del.deleteDeliverItems({ id: row.pkId || null }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.getList();
          }
        });
      });
    },
    //重置
    reCz(row) {
      this.$confirm('是否重置?').then((_) => {
        row.barCode = "";
        // del
        //   .codeReset({ barCodeId: row.deliverBarCodeId || null })
        //   .then((res) => {
        //     if (res.code == 200) {
        //       this.$message({
        //         message: res.msg,
        //         type: "success",
        //       });
        //     }
        //   });
      });
    },
    //列表删除
    deleteDelivery() {
      this.$confirm('是否删除' + "?").then((_) => {
        del.deleteDeliver({ idList: this.idList.join() }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.getList();
          }
        });
      });
    },
    //删除
    handleDelete(row, index, rows) {
      if (this.ifcodebind) {
        //绑定-删除
        this.$confirm('是否删除' + "?").then((_) => {
          if (row.deliverBarCodeId) {
            del.codeReset({ barCodeId: row.deliverBarCodeId }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                rows.splice(index, 1);
              }
            });
          } else {
            this.$message({
              message: "没有绑定过追溯码",
              type: "warning",
            });
          }
        });
      } else {
        //解绑-删除

        this.$confirm('是否删除' + "?").then((_) => {
          if (row.deliverBarCodeId) {
            del.codeReset({ barCodeId: row.deliverBarCodeId }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
              }
            });
            let thedel1 = [];
            thedel1.push(row.deliverBarCodeId);
            this.delIdList = thedel1;
            rows.splice(index, 1);
          } else {
            this.$message({
              message: "没有绑定过追溯码",
              type: "warning",
            });
          }
        });
      }
    },
    getList() {
      this.params.pkDeliverList = [];
      del.getDeliveryHandledList(this.params).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
        this.rowMergeArrs = this.rowMergeHandle(
          this.needMergeArr,
          this.tableData
        );
      });
    },

    //绑定/解绑
    sureBd() {
      if (this.ifcodebind == true) {
        //绑定
        del.savCodeBind(this.codeData).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.bdzsShow = false;
            this.getList();
          }
        });
      } else {
        if (this.codeData.length > 0) {
          //解绑确定
          del.codeUnbind(this.delIdList2).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.bdzsShow = false;
              this.getList();
            }
          });
        } else {
          this.bdzsShow = false;
        }
      }
    },
    codeBind(index) {
      this.delIdList = [];
      this.ifcodebind = index;

      if (index == true) {
        //绑定追溯
        this.zsTitle = '绑定追溯码';
        del
          .getCodeBindData({ deliverIdList: this.idList.join() })
          .then((res) => {
            res.data.forEach((element) => {
              element.productNum = 1;
            });
            this.codeData = res.data;
          });
      } else if (index == false) {
        //解绑追溯
        this.zsTitle = '解绑追溯码';

        del
          .getCodeUnbindData({
            deliverIdList: this.idList.join(),
            orderIdList: this.orderIdList.join(),
          })
          .then((res) => {
            res.data.forEach((element) => {
              element.productNum = 1;
            });
            this.codeData = res.data;
            let thedel2 = [];
            res.data.forEach((ele) => {
              thedel2.push(ele.deliverBarCodeId);
            });
            this.delIdList2 = thedel2;
          });
      }
      this.bdzsShow = true;
    },
    //生成打印
    getPrintCheck() {
      del
        .deliverHandledPrint({ deliverIdList: this.idList.join() })
        .then((res) => {
          this.dyhdData = res.data;
        })
        .finally(() => {
          // 在接口请求完成后，循环生成条形码并展示在页面上

          // 循环生成条形码并展示在页面上
          this.dyhdData.forEach((item, index) => {
            // 使用JsBarcode生成条形码图片
            JsBarcode("#barcode" + index, item.deliverCode, {
              format: "CODE128",
              lineColor: "#000",
              background: "#EBEEF5",
              width: 2,
              height: 20,
              displayValue: false,
            });
          });
        })
        .then(() => {
          if (this.pkCountry == 1) {
            const printContent = document.getElementById("print-content");
            const printWindow = window.open("", "_blank"); //这句解决edge浏览器打不开的问题
            printWindow.document.write(printContent.innerHTML);
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
            printWindow.close();
          } else {
            const printContent = document.getElementById("print-content2");
            const printWindow = window.open("", "_blank"); //这句解决edge浏览器打不开的问题
            printWindow.document.write(printContent.innerHTML);
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
            printWindow.close();
          }
        });
    },
    handleSelectionChange(selection) {
      this.idList = selection.map((item) => item.pkDeliver);
      this.orderIdList = selection.map((item) => item.pkOrder);
      this.multiple = !selection.length;
    },
    //导出
    handleExport() {
      this.params.pkDeliverList = this.idList;
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then((_) => {
        this.download(
          "/sale/manage/deliver-handled/export",
          { ...this.params },
          `${'已合单'}${new Date().getTime()}.xlsx`
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@media print {
  table {
    width: 100%;
    background: #fff;
    border-collapse: collapse;
    border: 1px solid #cccccc;
    border-spacing: 0;
    table-layout: fixed;
    border-collapse: collapse;
    //   合并内外边距
    // (去除表格单元格默认的2个像素内外边距*/
  }
  .fhdbox2 {
    background: #ffffff;
    padding: 20px;
    margin-top: 10px;
  }
  .fhdbox2 .fhdTitle {
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .fhdbox2 .mainrow2 {
    padding: 5px 0;
    display: flex;
    align-items: center;
  }
}
.tables {
  width: 100%;
  background: #fff;
  border-collapse: collapse;
  border: 1px solid #cccccc;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: collapse;
  //   合并内外边距
  // (去除表格单元格默认的2个像素内外边距*/
}
::v-deep .fhdDialog2 .el-dialog__header {
  padding: 0;
  border: 0;
}
::v-deep .fhdDialog2 .el-dialog--center .el-dialog__body {
  padding: 0;
}
::v-deep .fhdDialog2 .el-dialog {
  background: rgba(0, 0, 0, 0);
  // padding: 10px 0;
  margin: 5vh auto !important;
  // margin-top: 0!important;
}

::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}

.fhdbox {
  background: #ffffff;
  .mainrow {
    margin-top: 20px;
  }
  .fhdtop {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);

    .fhd_flex {
      display: flex;
      align-items: center;
    }
    .col_title {
      font-weight: bold;
      margin-right: 20px;
    }
  }
}

.fhdbox2 {
  background: #ffffff;
  padding: 20px;
  margin-top: 20px;
  .fhdTitle {
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .mainrow2 {
    padding: 5px 0;
    display: flex;
    align-items: center;
    .rowcontent {
      width: 500px;
    }
  }
}

.main {
  // margin-top: 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);

  .main_content {
    padding: 20px 25px;
  }

  .maintop {
    display: flex;
    // padding: 10px 20px;
    padding-bottom: 10px;
    justify-content: space-between;
    align-items: center;
    .mainbtn {
      .thebtn1 {
        color: #ffffff;
        background: rgba(243, 169, 0, 1);
      }
      .thebtn2 {
        color: #ffffff;
        background: rgba(16, 142, 233, 1);
      }
      .thebtn3 {
        color: #ffffff;
        background: rgba(83, 177, 30, 1);
      }
      .thebtn4 {
        color: #ffffff;
        background: rgba(199, 48, 48, 1);
      }
      .thebtn5 {
        color: #ffffff;
        background: rgba(0, 155, 88, 1);
      }
      .thebtn6 {
        color: #ffffff;
        background: rgba(236, 108, 0, 1);
      }
    }
  }
}
</style>
