<template>
  <div>
    <div class="app-container">
      <div class="filter-container">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="收货日期">
            <div class="block">
              <el-date-picker
                v-model="pagerDto._Range_ReceiveTime"
                type="daterange"
                range-separator="~"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>
          </el-form-item>
          <el-form-item label="客户名称">
            <el-select
              v-model="pagerDto._Eq_CustomerId"
              placeholder="所属客户"
              clearable
              filterable
            >
              <el-option
                v-for="item in Customers"
                :key="item.Id"
                :label="item.CompanyName"
                :value="item.Id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="单号">
            <MultipleNumber @getNumber="getNumber" />
          </el-form-item>
          <el-form-item label="渠道">
            <el-select
              v-model="pagerDto._Eq_CreateOrderChannelId"
              placeholder="下单渠道"
              clearable
              filterable
            >
              <el-option
                v-for="item in publicChannel"
                :key="item.Id"
                :label="item.Name"
                :value="item.Id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="国家">
            <el-select
              v-model="pagerDto._Eq_ReceiverCountryCode"
              clearable
              filterable
              auto-complete="false"
              style="width: 290px"
              fillter
            >
              <el-option
                v-for="(item, index) in serachCountryList"
                :key="index"
                :label="item.CnName + ' ' + item.Code + ' ' + item.EnName"
                :value="item.Code"
              >
                <span
                  style="float: left"
                >{{ item.CnName }}
                  <span style="color: #8492a6; font-size: 10px">{{
                    item.EnName
                  }}</span>
                </span>
                <span style="float: right">{{ item.Code }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="销售">
            <el-select
              v-model="pagerDto._Eq_SalesmanUserId"
              placeholder="所属销售"
              clearable
              filterable
            >
              <el-option
                v-for="item in Users"
                :key="item.Id"
                :label="item.NickName"
                :value="item.Id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否下单">
            <el-select
              v-model="pagerDto._Eq_IsXYY"
              placeholder="是否有末端单号"
              clearable
              filterable
            >
              <el-option
                v-for="item in SimpleChoice"
                :key="item.Id"
                :label="item.Name"
                :value="item.Id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否打单">
            <el-select
              v-model="pagerDto._Eq_IsOrderPrintQty"
              placeholder="是否打单"
              clearable
              filterable
            >
              <el-option
                v-for="item in SimpleChoice"
                :key="item.Id"
                :label="item.Name"
                :value="item.Id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              size="small"
              type="primary"
              :loading="serachLadding"
              @click="search"
            >搜索</el-button>
          </el-form-item>
        </el-form>
        <div class="batch-warp">
          <el-button
            type="primary"
            size="small"
            plain
            @click="showCreateOrder"
          >批量下末端单</el-button>
          <el-button
            v-if="showFbaImportExcel"
            type="primary"
            size="small"
            plain
            @click="dialogImportFbaBoxInfo = true"
          >导入末端下单重量</el-button>
          <el-button
            type="primary"
            size="small"
            plain
            :loading="downLoadingLabel"
            @click="downloadPdf"
          >打印面单</el-button>
          <el-button
            type="primary"
            size="small"
            plain
            :loading="downLoadingLabel"
            @click="outorderboxs"
          >导出箱子信息</el-button>
          <el-button
            type="primary"
            size="small"
            plain
            :loading="exportLoading"
            @click="onExportOrderInformation"
          >导出订单信息</el-button>
          <!-- <el-button
            type="success"
            size="small"
            plain
            :loading="saveLadding"
            @click="ToIncome"
            >出货完成，转应收</el-button
          > -->
        </div>
        <el-table
          :data="sData"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="收货日期" prop="ReceiveTimeStr" />
          <el-table-column label="客户名称" prop="CompanyName" />
          <el-table-column label="客户单号" prop="CustomerOrderNo" />
          <el-table-column label="行运易" prop="SystemNo" />
          <el-table-column label="渠道" prop="PublicName" />
          <el-table-column label="国家" prop="ReceiverCountryCode" />
          <el-table-column label="邮编" prop="ReceiverZipCode" />
          <el-table-column label="件数" prop="BoxQty" />
          <el-table-column label="收件体积" prop="OPVolumeWeight" />
          <el-table-column label="收件重量" prop="OPInputWeight" />
          <!-- <el-table-column label="下单体积" prop="ChannelVolumeWeight" /> --><!--不需要下单体积-->
          <el-table-column label="下单重量" prop="ChannelInputWeight" />
          <el-table-column label="供应商" prop="ChannelName" />
          <el-table-column label="尾程单" prop="TrackingNumber" />
          <el-table-column label="是否打单" prop="OrderPrintQty">
            <template slot-scope="scope">
              <div>
                <el-tag
                  v-if="scope.row.OrderPrintQty"
                  type="success"
                >是</el-tag>
                <el-tag v-else type="danger">否</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                :loading="scope.row.detailLoading"
                @click="openDetails(scope.row)"
              >
                明细
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-sizes="[20, 50, 100, 150, 200]"
          :current-page="pagerDto.PageIndex"
          :page-size="pagerDto.PageSize"
          background
          layout="prev, pager, next ,total ,jumper,sizes,slot "
          :total="pagerDto.total"
          @current-change="pagerSerach"
          @size-change="sizeChange"
        />
      </div>
    </div>
    <el-dialog title="选择服务渠道" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
      <el-form>
        <el-form-item label="服务渠道">
          <el-select v-model="channelId" filterable>
            <el-option
              v-for="item in lastChannelList"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="合并订单">
          <el-checkbox v-model="meger" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="success"
          :loading="orderLoading"
          @click="OutOrderTemplate()"
        >导出下单模版</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="orderLoading"
          @click="createOrder()"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      top="0"
      width="1200px"
      title="详情"
      :visible.sync="showDetails"
      :close-on-click-modal="false"
      :before-close="handleDetailClose"
    >
      <div class="income-details">
        <!-- 基本信息 -->
        <DefineDescriptions :items="items" :items-data="itemsData" />
        <!--  -->
        <custom-descriptions
          :items="descriptionsItem"
          :data="addressData"
          :column="column"
        />
        <!-- 打单箱子信息 -->
        <div class="warp-action">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="hanleCheckCopy"
          >复制内容到勾选箱</el-button>
          <el-button
            type="success"
            plain
            size="mini"
            @click="hanleCheckCopyAll"
          >复制内容到所有箱</el-button>
        </div>
        <div class="flex mb-12">
          <div class="warp-left">打单箱子信息</div>
          <div class="warp-right">
            <vxe-table
              ref="orederRef"
              border
              show-overflow
              :data="orederData"
              height="286px"
              :cell-style="{ height: '38px', padding: 0 }"
              :header-row-style="{
                background: '#f2f6fc',
                borderRight: '1px solid #ccc',
              }"
              :column-config="{ resizable: true }"
              :edit-config="{ trigger: 'click', mode: 'cell' }"
              @checkbox-all="handleSelectionStorehouse"
              @checkbox-change="handleSelectionStorehouse"
            >
              <vxe-column type="checkbox" width="45" />
              <vxe-column
                field="BoxNumber"
                :width="160"
                title="箱号"
                show-overflow="title"
              />
              <vxe-column
                field="BoxServiceNumber"
                :width="150"
                title="系统单号"
                show-overflow="title"
              />
              <vxe-colgroup title="收货" align="center">
                <vxe-column field="OpInputWeight" title="实重KG" />
                <vxe-column field="OpLength" title="长CM" />
                <vxe-column field="OpWidth" title="宽CM" />
                <vxe-column field="OpHeight" title="高CM" />
              </vxe-colgroup>
              <vxe-colgroup title="下单" align="center">
                <vxe-column
                  field="ChannelWeight"
                  title="实重KG"
                  :edit-render="{ autofocus: '.vxe-input--inner' }"
                >
                  <template #edit="{ row }">
                    <vxe-input
                      v-model="row.ChannelWeight"
                      type="text"
                      name="ChannelWeight"
                      placeholder="下单实重KG"
                    />
                  </template>
                </vxe-column>
                <vxe-column
                  field="ChannelLength"
                  title="长CM"
                  :edit-render="{ autofocus: '.vxe-input--inner' }"
                >
                  <template #edit="{ row }">
                    <vxe-input
                      v-model="row.ChannelLength"
                      type="text"
                      name="ChannelLength"
                      placeholder="长CM"
                    />
                  </template>
                </vxe-column>
                <vxe-column
                  field="ChannelWidth"
                  title="宽CM"
                  :edit-render="{ autofocus: '.vxe-input--inner' }"
                >
                  <template #edit="{ row }">
                    <vxe-input
                      v-model="row.ChannelWidth"
                      type="text"
                      name="ChannelWidth"
                      placeholder="宽CM"
                    />
                  </template>
                </vxe-column>
                <vxe-column
                  field="ChannelHeight"
                  title="高CM"
                  :edit-render="{ autofocus: '.vxe-input--inner' }"
                >
                  <template #edit="{ row }">
                    <vxe-input
                      v-model="row.ChannelHeight"
                      type="text"
                      name="ChannelHeight"
                      placeholder="高CM"
                    />
                  </template>
                </vxe-column>
              </vxe-colgroup>
            </vxe-table>
          </div>
        </div>
        <!-- 客户确认数据 -->
        <div class="flex mb-12">
          <div class="warp-left">申报信息</div>
          <div class="warp-right">
            <vxe-table
              border
              show-overflow
              :data="reportData"
              height="280px"
              :cell-style="{ height: '38px', padding: 0 }"
              :header-row-style="{
                background: '#f2f6fc',
                borderRight: '1px solid #ccc',
              }"
              :column-config="{ resizable: true }"
              :edit-config="{ trigger: 'click', mode: 'cell' }"
            >
              <vxe-column
                field="CnName"
                title="中文品名"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input v-model="row.CnName" type="text" />
                </template>
              </vxe-column>
              <vxe-column
                field="EnName"
                title="英文品名"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input v-model="row.EnName" type="text" />
                </template>
              </vxe-column>
              <vxe-column
                field="Quantity"
                title="申报数量"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input v-model="row.Quantity" type="text" />
                </template>
              </vxe-column>
              <vxe-column
                field="GoodsValue"
                title="申报价值"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input v-model="row.GoodsValue" type="text" />
                </template>
              </vxe-column>
              <vxe-column
                field="Brand"
                title="品牌"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input v-model="row.Brand" type="text" />
                </template>
              </vxe-column>
              <vxe-column
                field="Meterial"
                title="材质"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input v-model="row.Meterial" type="text" />
                </template>
              </vxe-column>
              <vxe-column
                field="SaleLink"
                title="销售链接"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input v-model="row.SaleLink" type="text" />
                </template>
              </vxe-column>
              <vxe-column
                field="HsCode"
                title="海关编码"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input v-model="row.HsCode" type="text" />
                </template>
              </vxe-column>
              <vxe-column field="Magnetic" width="60">
                <template #header> <i class="vxe-icon-edit" />带磁 </template>
                <template #default="{ row }">
                  <div class="pointer" @click="changeValue(row, 'Magnetic')">
                    <el-tag v-if="row.Magnetic" type="danger">是</el-tag>
                    <el-tag v-else>否</el-tag>
                  </div>
                </template>
              </vxe-column>
              <vxe-column field="Electric" width="60">
                <template #header> <i class="vxe-icon-edit" />带电 </template>
                <template #default="{ row }">
                  <div class="pointer" @click="changeValue(row, 'Electric')">
                    <el-tag v-if="row.Electric" type="danger">是</el-tag>
                    <el-tag v-else>否</el-tag>
                  </div>
                </template>
              </vxe-column>
              <vxe-column field="Liquid" width="80">
                <template #header> <i class="vxe-icon-edit" />危险品 </template>
                <template #default="{ row }">
                  <div class="pointer" @click="changeValue(row, 'Liquid')">
                    <el-tag v-if="row.Liquid" type="danger">是</el-tag>
                    <el-tag v-else>否</el-tag>
                  </div>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </div>
        <div class="flex total-receivable">
          <el-button
            size="mini"
            type="primary"
            :loading="saveLadding"
            @click="saveBoxsChange"
          >确定修改</el-button>
          <el-button size="mini" @click="handleDetailClose">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="导入FBA下单重量" :visible.sync="dialogImportFbaBoxInfo">
      <el-form>
        <el-form-item label="导入FBA下单重量">
          <el-upload
            :action="ImportOrderBoxApi"
            :headers="header"
            :multiple="false"
            :on-success="inputTHOrderSuccess"
            :loading="updateTHOrderLoading"
            :on-error="inputThOrderError"
            :before-upload="ImportOrderBoxLoadd"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-card class="batchInputInfo" style="margin-top: 20px">
          <div class="el-card__header">
            <span class="el-icon-warning-outline">注意事项</span>
          </div>
          <p>
            1、根据指定模板文件进行重量导入，<a
              href="http://wms.xingyunyi.cn/Data/Template/FBA修改下单数据模板.xlsx"
            >
              下载模板</a>
          </p>
        </el-card>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  _getPrintList,
  _getPrint,
  _updatePrintBoxs,
  _goToIncome,
  _updateOrderPrintQty,
  _BatchUpdateOrderPrintQty,
  _OutFBAData
} from '@/api/fba/Receiving'
import { addDays, DateFormat } from '@/api/timehelp'
import {
  _getCountries,
  _getAllPublic,
  _getChannelList,
  _getDeliverChannel,
  _getCustomers,
  _getFBAChannel,
  _getAllUsers
} from '@/api/baseInfo'
import {
  CreateChannelOrder,
  CreateMegerOrder,
  outMpsOrderTemplate
} from '@/api/order/orderManagement'
import CustomDescriptions from './components/CustomDescriptions.vue'
import axios from 'axios'
import { deepClone } from '@/utils'
import DefineDescriptions from './components/DefineDescriptions.vue'
import MultipleNumber from './components/multipleNumber.vue'

import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import { string } from 'clipboard'
import { data } from 'vue2-dropzone'

export default {
  name: 'KongPaiOrder',
  components: { CustomDescriptions, DefineDescriptions, MultipleNumber },
  computed: {
    ...mapGetters(['roles'])
  },
  data() {
    return {
      showFbaImportExcel: false,
      dialogImportFbaBoxInfo: false,
      downLoadingLabel: false,
      exportLoading: false,
      ImportOrderBoxApi:
        process.env.VUE_APP_9518_API +
        '/GetMoreThanOneTicketMps/ImportMpsBoxInfo',
      header: { Authorization: 'token ' + getToken() },
      updateTHOrderLoading: false,

      OrderId: 0,
      channelId: 0,
      lastChannelList: [],
      meger: false,
      dialogVisible: false,
      sData: [],
      serachLadding: false,
      orderLoading: false,
      SimpleChoice: [
        { Id: 1, Name: '是' },
        { Id: 2, Name: '否' }
      ],
      saveLadding: false,
      Customers: [],
      publicChannel: [],
      serachCountryList: [],
      Users: [],
      pagerDto: {
        PageIndex: 1,
        PageSize: 20,
        total: 0,
        QuerySort: [{ Field: 'Id', IsDesc: true }],
        _Range_ReceiveTime: []
      },
      ids: [],
      // 详情
      showDetails: false, // 打单明细
      items: [
        { field: 'ReceiveTimeStr', label: '收货日期' },
        { field: 'CompanyName', label: '客户名称' },
        { field: 'CustomerOrderNo', label: '客户单号' },
        { field: 'SystemNo', label: '行运易单号' },
        { field: 'ChannelName', label: '渠道' },
        { field: 'ReceiverCountryCode', label: '国家' },
        { field: 'BoxQty', label: '件数' }
      ], // 基本信息
      itemsData: {
        ReceiveTimeStr: '',
        CompanyName: '',
        CustomerOrderNo: '',
        SystemNo: '',
        ChannelName: '',
        ReceiverCountryCode: '',
        BoxQty: 0
      },
      orederData: [], // 打单箱子信息
      reportData: [], // 申报信息
      descriptionsItem: [
        {
          label: '收件人',
          field: 'ReceiverName',
          icon: 'el-icon-user'
        },
        {
          label: '电话',
          field: 'ReceiverPhone',
          icon: 'el-icon-phone-outline'
        },
        {
          label: '收件人国家',
          field: 'ReceiverCountryCode',
          icon: 'el-icon-s-custom'
        },
        {
          label: '仓库代码',
          field: 'WarehouseCode',
          isSvg: true,
          icon: 'clipboard'
        },
        {
          label: '收件邮箱',
          field: 'ReceiverEmail',
          // isSvg: true,
          icon: 'el-icon-postcard'
        },
        {
          label: '报关方式',
          field: 'DeclarationMethod',
          icon: 'el-icon-s-operation'
        },
        {
          label: '收件州',
          field: 'ReceiverState',
          icon: 'el-icon-position'
        },
        {
          label: '城市',
          field: 'ReceiverCity',
          icon: 'el-icon-map-location'
        },
        {
          label: '收件人邮编',
          field: 'ReceiverZipCode',
          // isSvg: true,
          icon: 'el-icon-postcard'
        },
        {
          label: '公司',
          field: 'ReceiverCompany',
          icon: 'el-icon-office-building'
        },
        {
          label: '门牌',
          field: 'House',
          icon: 'el-icon-s-home'
        },
        // {
        //   label: '地址',
        //   field: 'ReceiverStreet',
        //   icon: 'el-icon-location-outline',
        //   type: 'textarea'
        // },
        {
          label: '地址1',
          field: 'ReceiverStreet1',
          icon: 'el-icon-location-outline',
          type: 'textarea'
        },
        {
          label: '地址2',
          field: 'ReceiverStreet2',
          icon: 'el-icon-location-outline',
          type: 'textarea',
          width: 249.9
        },
      ], // 地址信息
      addressData: {},
      column: 3,
      multipleOreder: [],
      currentInput: {
        value: '',
        field: ''
      }, //
      timerBlur: null
    }
  },
  created() {
    this.showFbaImportExcel = this.roles.includes('FBA末端重量修改')

    var end = addDays(new Date(), 0)
    var start = addDays(end, -1)
    this.pagerDto._Range_ReceiveTime = [
      DateFormat(start, 'yyyy-MM-dd'),
      DateFormat(end, 'yyyy-MM-dd')
    ]

    _getCountries().then((r) => {
      this.countryList = r
      this.serachCountryList = Object.assign(r)
    })
    _getChannelList().then((r) => {
      this.publicChannel = r
    })
    _getCustomers().then((r) => {
      this.Customers = r
    })
    _getAllUsers().then((r) => {
      this.Users = r
    })
    _getDeliverChannel().then((r) => {
      this.lastChannelList = r.filter((x) => {
        return x.CanMPS
      })
    })
  },
  beforeDestroy() {
    clearTimeout(this.timerBlur)
    this.timerBlur = null
    this.removeDefineBlur()
  },
  methods: {
    handleSelectionChange(val) {
      this.ids = []
      for (var i = 0; i < val.length; i++) {
        this.ids.push(val[i].Id)
      }
    },
    getData() {
      this.serachLadding = true
      _getPrintList(this.pagerDto)
        .then((response) => {
          this.sData = response.Result
          this.pagerDto.total = response.TotalCount
        })
        .finally((response) => {
          this.serachLadding = false
        })
    },

    search(pageIndex) {
      if (pageIndex && pageIndex > 0) {
        this.pagerDto.PageIndex = pageIndex
      } else {
        this.pagerDto.PageIndex = 1
      }
      this.getData()
    },
    pagerSerach(page) {
      // if (page === 1) return
      this.pagerDto.PageIndex = page
      this.getData()
    },
    sizeChange(pageSize) {
      this.pagerDto.PageIndex = 1
      this.pagerDto.PageSize = pageSize
      this.getData()
    },
    // 打开明细
    openDetails(data) {
      this.OrderId = data.Id
      this.$set(data, 'detailLoading', true)
      _getPrint(this.OrderId)
        .then((res) => {
          this.addressData = res.ReceivingAddress
          this.orederData = this.initPlaceOrderContent(res.mpsOrderBoxes)
          this.reportData = res.MpsOrderGoods
          this.initDefineBlur()
        })
        .finally(() => {
          this.itemsData = data
          this.showDetails = true
          this.$set(data, 'detailLoading', false)
          if(!data.detailLoading) delete data.detailLoading
        })
    },
    // 初始化下单的内容 =》 如果不存在取收货内容
    initPlaceOrderContent(list) {
      const _this = this
      const placeOrderList = list.map((item) => {
        if (_this.isNumber(item.ChannelWeight)) { item.ChannelWeight = item.OpWeight }
        if (_this.isNumber(item.ChannelLength)) { item.ChannelLength = item.OpLength }
        if (_this.isNumber(item.ChannelWidth)) item.ChannelWidth = item.OpWidth
        if (_this.isNumber(item.ChannelHeight)) { item.ChannelHeight = item.OpHeight }
        return item
      })
      return placeOrderList
    },
    isNumber(num) {
      return Number(num) === 0 || !Number(num)
    },
    handleDetailClose() {
      this.showDetails = false
    },
    saveBoxsChange() {
      var data = {
        OrderId: this.OrderId,
        ReceivingAddress: this.addressData,
        mpsOrderBoxes: this.orederData,
        MpsOrderGoods: this.reportData
      }
      this.saveLadding = true
      _updatePrintBoxs(data)
        .then((res) => {
          if (res) {
            this.$message({ type: 'success', message: '保存成功！' })
            this.showDetails = false
            this.OrderId = 0
            this.search()
          }
        })
        .finally(() => {
          this.saveLadding = false
        })
    },
    changeValue(row, field) {
      row[field] = !row[field]
    },
    showCreateOrder() {
      if (this.ids.length === 0) {
        this.$message({ type: 'warning', message: '请选择下单订单！' })
        return
      }
      this.channelId = 0
      this.meger = false
      this.dialogVisible = true
    },

    createOrder() {
      if (this.channelId == 0) {
        this.$alert('需要选择下单渠道')
        return
      }
      if (this.orderLoading) {
        return false
      }
      const idArry = this.ids
      var requestUrl = []
      if (idArry.length > 20) {
        this.orderLoading = false
        this.$alert('一票多件下单一次不能超过20单！', '错误', {
          type: 'warning'
        })
        return
      }
      this.orderLoading = true
      if (!this.meger) {
        idArry.forEach((element) => {
          requestUrl.push(CreateChannelOrder(element, this.channelId))
        })
        axios
          .all(requestUrl)
          .then((res) => {
            this.$message({ type: 'success', message: '末端渠道下单成功' })
            this.pagerSerach()
          })
          .finally(() => {
            this.orderLoading = false
          })
      } else {
        this.$confirm('是否确定合并下单？').then(() => {
          CreateMegerOrder(idArry, this.channelId)
            .then((r) => {
              this.$message({ type: 'success', message: '末端渠道下单成功' })
              this.pagerSerach()
            })
            .finally(() => {
              this.orderLoading = false
              this.dialogVisible=false
            })
        })
      }
    },
    ToIncome() {
      if (this.ids.length === 0) {
        this.$message({ type: 'warning', message: '请选择已下单完成订单！' })
        return
      }
      this.$confirm(
        '请确认订单有末端单号后再操作，确认后无法退回',
        '确认操作'
      ).then((r) => {
        this.saveLadding = true
        _goToIncome(this.ids)
          .then((re) => {
            this.$message({ type: 'success', message: '已转入应收！' })
            this.search()
          })
          .finally(() => {
            this.saveLadding = false
            this.ids = []
          })
      })
    },
    // 初始化blur
    initDefineBlur() {
      this.$nextTick().then(() => {
        this.$refs.orederRef.$el.addEventListener(
          'blur',
          this.defineBlur,
          true
        )
      })
    },
    defineBlur(e) {
      clearTimeout(this.timerBlur)
      if (e.target) {
        this.currentInput.value = e.target.value // 输入框的内容
        this.currentInput.field = e.target.getAttribute('name') // 字段
      }
      this.timerBlur = setTimeout(() => {
        this.currentInput.value = ''
        this.currentInput.field = ''
      }, 500)
    },
    // 复选框勾选
    handleSelectionStorehouse() {
      const $table = this.$refs.orederRef
      const selectRecords = $table.getCheckboxRecords()
      this.multipleOreder = selectRecords
    },
    // 复制内容到勾选框
    hanleCheckCopy() {
      const field = this.currentInput.field
      const value = this.currentInput.value
      if (!value) return
      if (this.multipleOreder.length > 0) {
        const IdList = this.multipleOreder.map((item) => item.Id)
        this.orederData = this.orederData.map((item) => {
          if (IdList.includes(item.Id)) {
            item[field] = value
          }
          return item
        })
      }
    },
    // 复制内容到全部
    hanleCheckCopyAll() {
      const value = this.currentInput.value
      if (!value) return
      let cloneCurrentInput = deepClone(this.currentInput)
      this.$confirm('是否复制内容到所有箱?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.orederData = this.orederData.map((item) => {
            if (item) item[cloneCurrentInput.field] = cloneCurrentInput.value
            return item
          })
          cloneCurrentInput = null
        })
        .catch(() => {
          cloneCurrentInput = null
        })
    },
    removeDefineBlur() {
      if (this.$refs.orederRef) {
        this.$refs.orederRef.$el.removeEventListener(
          'blur',
          this.defineBlur,
          true
        )
      }
    },
    inputTHOrderSuccess(response, file, fileList) {
      this.$message('上传成功')
      this.updateTHOrderLoading = false
    },
    inputThOrderError(response) {
      var msg = JSON.parse(response.message)
      this.$confirm(msg.message, '错误提示')
      // this.$message(msg.message);
      this.updateTHOrderLoading = false
    },
    ImportOrderBoxLoadd() {
      if (this.updateTHOrderLoading) {
        this.$message('上传中，请勿重复上传')
        return false
      } else {
        this.updateTHOrderLoading = true
      }
    },
    downloadPdf() {
      if (this.ids.length === 0) {
        this.$message({ type: 'warning', message: '必须勾选需下载的订单！' })
        return
      }
      this.downLoadingLabel = true
      const that = this
      console.log(this.ids)
      const data = { orderIds:this.ids.join(',') }
      axios({
        method: 'post',
        url: process.env.VUE_APP_BASE_API + '/order/PostDownChannelLabels',
        data: data,
        responseType: 'blob',
        headers: { 'Content-Type': 'application/json' }
      })
        .then((res) => {
          that.downLoadingLabel = false
          const _res = res.data
          const blob = new Blob([res.data], { type: res.data.type })

          var url = window.URL.createObjectURL(blob)
          var a = document.createElement('a')
          a.href = url
          a.download = `labels.pdf`
          a.click()
        })
        .catch((err) => {
          this.$message({ type: 'error', message: '下载面单出错' })
        })
        .finally(() => {
          this.downLoadingLabel = false
          this.batchUpdateOrderPrintQty(this.ids)
        })
    },
    // 批量更新是否打单
    batchUpdateOrderPrintQty(Ids) {
      _BatchUpdateOrderPrintQty(Ids).then(() => {
        this.search()
      })
    },
    updateOrderPrintQty(row) {
      row.OrderPrintQty = !row.OrderPrintQty // 取反即可
      _updateOrderPrintQty(row.Id, row.OrderPrintQty)
    },
    outorderboxs() {
      if (this.ids.length === 0) {
        this.$message({
          type: 'warning',
          message: '必须勾选需导出信息的订单！'
        })
        return
      }
      const that = this
      that.downLoadingLabel = true
      const data = { orderIds: this.ids.join(',') }
      axios({
        method: 'post',
        url: 'http://120.24.149.148:9518/api/GetMoreThanOneTicketMps/OutBoxData',
        data: data,
        responseType: 'blob',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'token 132A7468DE079C6CEB59F383A661E612'
        }
      })
        .then((res) => {
          that.downLoadingLabel = false
          const _res = res.data
          const blob = new Blob([res.data], { type: res.data.type })

          var url = window.URL.createObjectURL(blob)
          var a = document.createElement('a')
          a.href = url
          a.download = `boxNumbers.xlsx`
          a.click()
        })
        .catch((err) => {
          this.$message({ type: 'error', message: '下载excel出错' + err })
        })
        .finally(() => {
          this.downLoadingLabel = false
        })

      return
    },
    // 获取多个单号
    getNumber(numbers) {
      this.pagerDto._Eq_SystemNo = numbers
    },
    OutOrderTemplate(){
      const that = this
      if (that.channelId == 0) {
        that.$alert('需要选择下单渠道')
        return
      }
      if (that.orderLoading) {
        return false
      }
      that.orderLoading = true;
      const data = { orderIds: this.ids,channelId:this.channelId };
      axios({
        method: 'post',
        url:'http://120.24.149.148:9518/api/MpsChanelOrder/OutOrderTemplate',
        data: data,
        responseType: 'blob',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'token 132A7468DE079C6CEB59F383A661E612'
        }
      })
        .then((res) => {
          that.orderLoading = false
          const _res = res.data
          const blob = new Blob([res.data])

          var url = window.URL.createObjectURL(blob)
          var a = document.createElement('a')
          a.href = url
          a.download = `BandDiOrder.xlsx`
          a.click()
        })
        .catch((err) => {
          that.$message({ type: 'error', message: '下载excel出错' + err })
        })
        .finally(() => {
          that.orderLoading = false
        })

      return
    },
    // 导出订单信息
    onExportOrderInformation() {
      if (this.ids.length === 0) {
        this.$message({ type: 'warning', message: '必须勾选需导出的订单！' })
        return
      }
      this.exportLoading = true
      _OutFBAData(this.ids).finally(() => {
        this.exportLoading = false
      })
    }
  }
}
</script>
<style lang="less">
.batch-warp {
  margin-bottom: 6px;
}
.income-details {
  .flex {
    display: flex;
  }
  .flex-1 {
    flex: 1;
  }
  .mb-12 {
    margin-bottom: 15px;
  }
  .empty {
    font-size: 32px;
  }
  .pointer {
    cursor: pointer;
  }

  .warp-left {
    flex-basis: 130px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f6fc;
    color: #737272;
    font-weight: bold;
  }
  .warp-right {
    flex: 1;
    .delete {
      color: red;
    }
    .vxe-table--render-default {
      .vxe-cell {
        padding-left: 5px;
        padding-right: 5px;
      }
    }
  }

  .cost-warp {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    // padding: 10px 0;
    .cost {
      margin-left: 6px;
      width: 140px;
    }
  }
  .total-receivable {
    justify-content: flex-end;
    align-items: flex-end;
  }

  .warp-action {
    text-align: right;
    margin-bottom: 6px;
  }
}
.income-details .el-table__header th {
  background-color: #f2f6fc;
  color: #737272;
}
.income-details .el-table .cell {
  padding-right: 5px;
  padding-left: 5px;
}
.income-details .el-input--medium .el-input__inner {
  padding: 0 8px;
}
</style>
