<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-date-picker
              v-model="pagerDto._Range_OrderTime"
              type="daterange"
              range-separator="~"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </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_IsGoodsNames"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in GoodsNames"
                :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-button
              icon="el-icon-search"
              size="small"
              :loading="exportLadding"
            >导出</el-button> -->
          </el-form-item>
        </el-form>
        <div class="batch-warp">
          <el-button
            type="primary"
            size="small"
            plain
            @click="hanleBatchBtn"
          >批量修改</el-button>
          <el-button
            type="warning"
            size="small"
            plain
            @click="dialogImportAdressInfo = true"
          >导入收件信息</el-button>
          <el-button
            type="success"
            size="small"
            plain
            :loading="saveLadding"
            @click="ToPrint"
          >收件完成，转打单</el-button>
        </div>
        <el-table
          :data="sData"
          border
          row-key="Id"
          @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="ChannelName" />
          <el-table-column label="国家" prop="ReceiverCountryCode" />
          <el-table-column label="件数" prop="BoxQty" />
          <el-table-column label="实重" prop="OPInputWeight" />
          <el-table-column label="泡重" prop="OPVolumeWeight" />
          <!-- <el-table-column label="收货人" prop="ConsigneeName" /> -->
          <el-table-column label="品名" prop="GoodsNames" />
          <el-table-column label="关注标识" prop="Identification" min-width="110">
            <template slot-scope="scope">
              <el-tag :type="scope.row.Identification ? 'success' : 'danger'">
                {{ scope.row.Identification ? '是' : '否' }}
              </el-tag>
              <span v-show="scope.row.IsBoxPicture" class="is-picture">
                <el-tag>
                  有图
                </el-tag>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="Remark" />
          <el-table-column label="业务员" prop="NickName" />
          <el-table-column label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="openDetails(scope.row, 'view')"
              >
                查看
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="openDetails(scope.row, 'edit')"
              >
                修改
              </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="dialogBatchSearch" :before-close="handleClose">
        <el-form :model="pagerDto" label-width="80px" @submit.native.prevent>
          <el-input v-model="vd" placeholder="请输入跟踪单号查询，一行一个" autocomplete="off" :rows="20" type="textarea" />
        </el-form>
      </el-dialog> -->
    <el-dialog
      width="1330px"
      title="详情"
      :visible.sync="showDetails"
      :before-close="handleDetailClose"
      :close-on-click-modal="false"
    >
      <div class="income-details">
        <div v-show="isCheckInfo">
          <DefineDescriptions :items="items" :items-data="itemsData" />
        </div>
        <!-- 打单箱子信息 -->
        <div v-show="getCheckCopy" class="warp-action">
          <el-button
            v-show="isCheckInfo"
            type="warning"
            plain
            size="mini"
            @click="hanleRecompute"
          >重算计费泡重</el-button>
          <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="storehouseRef"
              border
              show-overflow
              :data="storehouseData"
              show-header-overflow
              height="280px"
              :cell-style="{ height: '38px', padding: 0 }"
              :header-row-style="{
                background: '#f2f6fc',
                borderRight: '1px solid #ccc',
              }"
              :column-config="{ resizable: true }"
              :edit-config="vxeEditConfig"
              @checkbox-all="handleSelectionStorehouse"
              @checkbox-change="handleSelectionStorehouse"
            >
              <vxe-column type="checkbox" width="45" />
              <vxe-column
                field="BoxNumber"
                :min-width="170"
                title="箱号"
                show-overflow="title"
              />
              <vxe-column
                field="OpInputWeight"
                title="收货实重KG"
                show-overflow="title"
                :width="120"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input
                    v-model="row.OpInputWeight"
                    type="text"
                    name="OpInputWeight"
                    placeholder="收货实重KG"
                  />
                </template>
              </vxe-column>
              <vxe-column
                field="OpLength"
                title="长CM"
                :min-width="80"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input
                    v-model="row.OpLength"
                    type="text"
                    name="OpLength"
                    placeholder="长CM"
                  />
                </template>
              </vxe-column>
              <vxe-column
                field="OpWidth"
                title="宽CM"
                :min-width="80"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input
                    v-model="row.OpWidth"
                    type="text"
                    name="OpWidth"
                    placeholder="宽CM"
                  />
                </template>
              </vxe-column>
              <vxe-column
                field="OpHeight"
                title="高CM"
                :min-width="80"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input
                    v-model="row.OpHeight"
                    type="text"
                    name="OpHeight"
                    placeholder="高CM"
                  />
                </template>
              </vxe-column>
              <vxe-column
                field="VolumeWeight"
                title="计费泡重"
                :min-width="90"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input
                    v-model="row.VolumeWeight"
                    type="text"
                    name="VolumeWeight"
                    placeholder="计费泡重"
                  />
                </template>
              </vxe-column>
              <!-- <vxe-column
                field="VolumeFactor"
                title="分泡系数"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input
                    v-model="row.VolumeFactor"
                    type="text"
                    placeholder="分泡系数"
                  />
                </template>
              </vxe-column> -->
              <vxe-column
                field="GoodsNames"
                title="品名"
                :min-width="70"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input
                    v-model="row.GoodsNames"
                    type="text"
                    name="GoodsNames"
                    placeholder="品名"
                  />
                </template>
              </vxe-column>
              <vxe-column
                field="Identification"
                title="关注标识"
                :min-width="110"
              >
                <template
                  #header
                ><i class="vxe-icon-edit" />关注标识
                </template>
                <template #default="{ row }">
                  <vxe-checkbox v-model="row.Identification" size="medium" @change="changeIdentification(row,$event)">{{
                    row.Identification ? "是" : "否"
                  }}</vxe-checkbox>
                  <span v-show="row.IsBoxPicture" class="is-picture">
                    <el-tag size="mini">
                      有图
                    </el-tag>
                  </span>
                </template>
              </vxe-column>
              <vxe-column
                field="Remark"
                title="备注"
                :min-width="80"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <div v-if="row.Identification">
                    <vxe-input
                      v-model="row.Remark"
                      type="text"
                      name="Remark"
                      placeholder="备注"
                    />
                  </div>
                </template>
              </vxe-column>
              <vxe-column
                v-if="isCheckInfo"
                title="上传图片"
                :min-width="80"
              >
                <template #default="{ row }">
                  <el-button v-show="type === 'view' && row.IsBoxPicture" size="small" type="primary" class="upload" @click="clickUpload(row)">
                    {{ getCheckCopy ? '上传图片' : '查看图片' }}
                  </el-button>
                  <el-button v-show="type === 'edit'" size="small" type="primary" class="upload" @click="clickUpload(row)">
                    {{ getCheckCopy ? '上传图片' : '查看图片' }}
                  </el-button>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </div>
        <div class="flex total-receivable">
          <el-button
            v-show="typeComputed"
            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="上传图片"
      :visible.sync="uploadDialogVisible"
      width="685px"
      :before-close="handleCloseUpload"
      :close-on-click-modal="false"
    >
      <div>
        <el-button v-show="getCheckCopy" type="danger" size="mini" @click="deleteAllUploadImg">删除全部图片</el-button>
        <div class="uploadFile">
          <ul v-show="uploadImg.length!=0">
            <li
              v-for="(item,index) in uploadImg"
              :key="index"
              class="addPic"
            >
              <span class="top-delete" @click="deleteUploadImg(index, item)">
                <i class="el-icon-delete" />
              </span>
              <el-image
                :src="item.PictureUrl"
                :preview-src-list="getUploadImgUrl"
              />
            </li>
          </ul>
          <input
            v-show="getCheckCopy"
            id="file"
            type="file"
            accept="image/*"
            @change="getPicture($event)"
          >
          <button v-show="getCheckCopy" @click="callFile">+</button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseUpload">取 消</el-button>
        <el-button v-show="getCheckCopy" :loading="uploadLoading" type="primary" @click="hanleUpload">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 导入收件信息 -->
    <el-dialog title="导入收件信息" :visible.sync="dialogImportAdressInfo">
      <el-form>
        <el-form-item label="导入收件信息">
          <el-upload
            :action="ImportOrderBoxApi"
            :headers="header"
            :multiple="false"
            :on-success="inputAddresInfoSuccess"
            :loading="updateAddresInfoLoading"
            :on-error="inputAddresInfoError"
            :before-upload="ImportAddresInfoLoadd"
          >
            <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/导入收件信息模版.xlsx"
              class="addressee-download"
            >
              下载模板</a>
          </p>
        </el-card>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  _getData,
  _getBoxsData,
  _updateBoxsData,
  _getBoxsDatas,
  _goToPrint,
  _GetBoxPictures,
  _FBAOrderUpdateFile,
  _RemoveBoxPicture
} from '@/api/fba/Receiving'
import { addDays, DateFormat } from '@/api/timehelp'
import {
  _getCountries,
  _getAllPublic,
  _getDeliverChannel,
  _getCustomers,
  _getFBAChannel,
  _getAllUsers
} from '@/api/baseInfo'
import DefineDescriptions from './components/DefineDescriptions.vue'
import { deepClone } from '@/utils'
import { getToken } from '@/utils/auth'
import { calculate_VolumeWeight } from '@/utils/calculate'
import MultipleNumber from './components/multipleNumber.vue'

export default {
  name: 'KongPaiAddressee',
  components: { DefineDescriptions, MultipleNumber },
  data() {
    return {
      sData: [],
      multipleSelect: [],
      serachLadding: false,
      exportLadding: false,
      typeComputed: false,
      GoodsNames: [
        { 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: [],
        _Range_OrderTime:[]
      },
      ids: [],
      // 详情
      showDetails: false, // 查看、修改
      type: 'view',
      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,
        CustomerVolumnWeightFactor: undefined
      },
      storehouseData: [], // 仓库收货数据
      multipleStorehouse: [], // 勾选的表格内容
      currentInput: {
        value: '',
        field: ''
      }, //
      isCheckInfo: false, // 批量修改,
      vxeEditConfig: { trigger: 'click', mode: 'cell', showIcon: true },
      timerBlur: null,
      uploadDialogVisible: false, // 上传弹窗
      uploadBoxNumber: undefined, // 上传的箱号
      uploadImgData: [], // 原始数据
      uploadImg: [], // 展示的图片
      uploadFile: [], // 上传file列表
      uploadLoading: false,
      dialogImportAdressInfo: false,
      ImportOrderBoxApi:
        process.env.VUE_APP_9518_API +
        '/FBAOrder/ImportMpsBoxAddresseeInfo',
      header: { Authorization: 'token ' + getToken() },
      updateAddresInfoLoading: false
    }
  },
  computed: {
    getCheckCopy() {
      return this.type === 'edit' || !this.isCheckInfo
    },
    getUploadImgUrl() {
      if (this.uploadImg.length > 0) {
        return this.uploadImg.map(item => item.PictureUrl)
      } else {
        return []
      }
    }
  },
  created() {
    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)
    })
    _getAllPublic().then((r) => {
      this.publicChannel = r
    })
    _getCustomers().then((r) => {
      this.Customers = r
    })
    _getAllUsers().then((r) => {
      this.Users = r
    })
  },
  beforeDestroy() {
    clearTimeout(this.timerBlur)
    this.timerBlur = null
    this.removeDefineBlur()
  },
  methods: {
    getData() {
      this.serachLadding = true
      _getData(this.pagerDto)
        .then((response) => {
          this.sData = response.Result
          this.pagerDto.total = response.TotalCount
          this.serachLadding = false
        })
        .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()
    },
    // 主列表批量选中
    handleSelectionChange(val) {
      this.multipleSelect = val
    },
    // 批量修改
    hanleBatchBtn() {
      if (this.multipleSelect.length === 0) {
        this.$message({ type: 'warning', message: '请选择修改订单！' })
        return
      }
      var Ids = this.multipleSelect.map(x => { return x.Id })
      _getBoxsDatas(Ids)
        .then((res) => {
          this.storehouseData = res
          this.initDefineBlur()
        })
        .finally(() => {
          this.isCheckInfo = false
          this.typeComputed = true
          this.showDetails = true
        })
    },
    // 导入收件信息
    inputAddresInfoSuccess(response, file, fileList) {
      this.$message('上传成功')
      this.updateAddresInfoLoading = false
    },
    inputAddresInfoError(response) {
      const msg = JSON.parse(response.message)
      this.$confirm(msg.message, '错误提示')
      // this.$message(msg.message);
      this.updateAddresInfoLoading = false
    },
    ImportAddresInfoLoadd() {
      if (this.updateAddresInfoLoading) {
        this.$message('上传中，请勿重复上传')
        return false
      } else {
        this.updateAddresInfoLoading = true
      }
    },
    // 打开明细
    openDetails(data, type) {
      const _this = this
      this.isCheckInfo = true
      switch (type) {
        case 'view':
          this.vxeEditConfig.trigger = 'manual'
          this.vxeEditConfig.showIcon = false
          this.type = 'view'
          _getBoxsData(data.Id)
            .then((res) => {
              this.storehouseData = res
            })
            .finally(() => {
              this.itemsData = data
              this.typeComputed = false
            })
          break

        case 'edit':
          this.vxeEditConfig.trigger = 'click'
          this.vxeEditConfig.showIcon = true
          this.type = 'edit'
          _getBoxsData(data.Id)
            .then((res) => {
              this.storehouseData = res
              this.initDefineBlur()
            })
            .finally(() => {
              this.itemsData = data
              this.typeComputed = true
            })
          break
      }
      this.showDetails = true
    },
    // 初始化blur
    initDefineBlur() {
      this.$nextTick().then(() => {
        this.$refs.storehouseRef.$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.storehouseRef
      const selectRecords = $table.getCheckboxRecords()
      this.multipleStorehouse = selectRecords
    },
    // 复制内容到勾选框
    hanleCheckCopy() {
      const field = this.currentInput.field
      const value = this.currentInput.value
      if (!value) return
      if (this.multipleStorehouse.length > 0) {
        const IdList = this.multipleStorehouse.map((item) => item.Id)
        this.storehouseData = this.storehouseData.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.storehouseData = this.storehouseData.map(item => {
          if (item) item[cloneCurrentInput.field] = cloneCurrentInput.value
          return item
        })
        cloneCurrentInput = null
      }).catch(() => {
        cloneCurrentInput = null
      })
    },
    // 是否填写备注
    changeIdentification(row, val) {
      if (!val.checked) {
        // row.Remarks = ''
        this.$set(row, 'Remark', '')
      }
    },
    handleDetailClose() {
      this.showDetails = false
      this.multipleStorehouse = []
      this.storehouseData = []
      this.removeDefineBlur()
    },
    saveBoxsChange() {
      this.saveLadding = true
      _updateBoxsData(this.storehouseData)
        .then((res) => {
          if (res) {
            this.$message({ type: 'success', message: '保存成功！' })
            this.showDetails = false
            this.search()
          }
        })
        .finally(() => {
          this.saveLadding = false
        })
    },
    ToPrint() {
      if (this.multipleSelect.length === 0) {
        this.$message({ type: 'warning', message: '请选择已收件完成订单！' })
        return
      }
      var Ids = this.multipleSelect.map(x => { return x.Id })
      this.saveLadding = true
      _goToPrint(Ids).then(re => {
        this.$message({ type: 'success', message: '已转入打单！' })
        this.search()
      }).finally(() => {
        this.saveLadding = false
        this.multipleSelect = []
      })
    },
    removeDefineBlur() {
      if (this.$refs.storehouseRef) {
        this.$refs.storehouseRef.$el.removeEventListener('blur', this.defineBlur, true)
      }
    },
    // 重算计费泡重
    hanleRecompute() {
      const CustomerVolumnWeightFactor = this.itemsData.CustomerVolumnWeightFactor
      this.storehouseData = this.storehouseData.map((item) => {
        if (Number(item.VolumeWeight) >= 0) item.VolumeWeight = calculate_VolumeWeight(item.OpLength, item.OpWidth, item.OpHeight, item.VolumeWeight, CustomerVolumnWeightFactor)
        return item
      })
    },
    // 上传图片
    clickUpload(row) {
      _GetBoxPictures(row.BoxNumber).then((res) => {
        if (res) {
          this.uploadImgData = [...res]
          this.uploadImg = [...res]
        }
      })
      this.uploadBoxNumber = row.BoxNumber
      this.uploadDialogVisible = true
    },
    // 取消
    handleCloseUpload() {
      this.uploadDialogVisible = false
      this.uploadBoxNumber = undefined
      this.uploadImg = []
      this.uploadFile = []
    },
    // 确定上传
    hanleUpload() {
      if (this.uploadFile.length > 0) {
        this.uploadLoading = true
        const formData = new FormData()
        const fileLength = this.uploadFile.length
        for (let index = 0; index < fileLength; index++) {
          const file = this.uploadFile[index].file
          if (file) {
            formData.append('file', file)
          }
        }
        _FBAOrderUpdateFile(this.uploadBoxNumber, formData)
          .then(() => {
            this.$message({ type: 'success', message: '上传成功！' })
            this.getDeleteUploadImg()
          }).finally(() => {
            this.uploadLoading = false
          })
        return
      }
      this.getDeleteUploadImg()
    },
    // 移除图片
    getDeleteUploadImg() {
      const oldIds = this.uploadImgData.filter(f => f.Id).map(item => item.Id)
      const newIds = this.uploadImg.filter(f => f.Id).map(item => item.Id)
      const PicIds = oldIds.filter(value => !newIds.includes(value))
      if (PicIds.length > 0) {
        _RemoveBoxPicture(PicIds)
      }
      this.uploadDialogVisible = false
      this.uploadFile = []
    },
    // 单个删除图片
    deleteUploadImg(index, data) {
      if (data.currentId >= 0) {
        const currentIndex = this.uploadFile.findIndex(item => item.currentId === data.currentId)
        currentIndex >= 0 && this.uploadFile.splice(currentIndex, 1)
      }
      this.uploadImg.splice(index, 1)
    },
    // 删除这个箱号的全部图片
    deleteAllUploadImg() {
      if (this.uploadImg.length === 0) return
      this.uploadImg = []
      this.uploadFile = []
    },
    getPicture(e) {
      const fileDom = document.querySelector('#file')
      const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg']
      // 限制只上传图片
      if (!allowedTypes.includes(e.target.files[0].type)) {
        this.$message.error('只能上传图片!')
        fileDom.value = ''
        return
      }
      // 图片url
      const src = window.URL.createObjectURL(e.target.files[0])
      const currentId = this.uploadFile.length + 1
      this.uploadImg.push({ PictureUrl: src, currentId })
      this.uploadFile.push({ file: e.target.files[0], currentId })
      // 将图片文件转化成base64格式图片
      const reader = new FileReader()
      reader.onload = (e) => {
        // 清空input中的file
        fileDom.value = ''
      }
      reader.readAsDataURL(e.target.files[0])
    },
    callFile() {
      // 点击添加图片按钮，触发type:"file"的input标签
      const fileDom = document.querySelector('#file')
      fileDom.click()
    },
    // 获取多个单号
    getNumber(numbers) {
      this.pagerDto._Eq_SystemNo = numbers
    }
  }
}
</script>
  <style lang="less">
.batch-warp {
  margin-bottom: 6px;
}
.is-picture {
  margin-left: 6px;
}
.addressee-download {
  color: #1890ff;
  &:hover {
    color: #1890ff;
  }
}
.income-details {
  .flex {
    display: flex;
  }
  .flex-1 {
    flex: 1;
  }
  .mb-12 {
    margin-bottom: 15px;
  }
  .empty {
    font-size: 32px;
  }
  .warp-action {
    text-align: right;
    margin-bottom: 6px;
  }

  .warp-left {
    flex-basis: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f6fc;
    color: #737272;
    font-weight: bold;
    border: 1px solid #e8eaec;
  }
  .warp-right {
    // flex: 1;
    width: calc(100% - 130px);
    .delete {
      color: red;
    }
  }

  .cost-warp {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .cost {
      margin-left: 6px;
      width: 140px;
    }
  }
  .total-receivable {
    justify-content: flex-end;
    align-items: flex-end;
  }
}
.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;
}
.income-details .upload {
  padding: 5px 10px;
}
// 上传图片
.uploadFile ul,.uploadFile li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.uploadFile {
  display: flex;
  flex-wrap: wrap;
  // height: 140px;
  // line-height: 140px;
  padding: 10px 0;
  border-bottom: 1px solid rgb(235, 235, 235);
  overflow: hidden;
  input {
    display: none;
  }
  ul {
    display: flex;
    li {
      margin-right: 10px;
    }
  }
  button {
    height: 120px;
    width: 120px;
    font-size: 50px;
    border: 1px dashed rgb(182, 182, 182);
    color: rgb(182, 182, 182);
    background-color: rgb(243, 243, 243);
  }
  .addPic {
    position: relative;
    .top-delete {
      position: absolute;
      display: none;
      top: -3px;
      right: -3px;
      width: 24px;
      background-color: red;
      line-height: 24px;
      font-size: 15px;
      text-align: center;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
      z-index: 10;
    }
  }
}
.uploadFile .addPic:hover .top-delete {
  display: block;
}
.uploadFile .addPic .el-image {
  height: 120px;
  width: 120px;
}
.addPic .el-image img {
  object-fit: cover;
}
</style>

