<template>
  <div>
    <el-row style="margin-top: 25px">
      <el-row>
        <el-button size="small" type="primary" @click="createBatch">{{ $t('批量装箱') }}</el-button>
      </el-row>
      <el-row style="margin-top: 5px">
        <el-table border :data="pagList" max-height="600px" @select="checkboxSelect" @select-all="checkboxSelect">
          <el-table-column type="selection" align="center" width="55" fixed="left" />
          <el-table-column align="center" :label="$t('序号')" width="50" type="index" />
          <el-table-column :label="$t('订单号')" align="center" prop="orderNo">
            <template slot-scope="scope">
              {{ scope.row.orderNo }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('商品信息')" width="250px" align="center">
            <template slot-scope="{ row }">
              <div v-for="item in row.orderItemDOS" :key="item.orderItemId">
                {{ $l(item, 'prodTitle') }}
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('备案')" align="center">
            <template slot-scope="{ row }">
              <dict-tag :type="DICT_TYPE.PRODUCT_RECORD_ATTRIBUTE" :value="row.productRecord" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('箱数')" align="center" prop="sumNum">
            <template slot-scope="scope">
             {{ scope.row.sumNum }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('纸箱尺寸')" align="center">
            <template slot-scope="{ row }">
              <div v-for="item in row.orderItemDOS" :key="item.orderItemId">
                {{ item.warehouseInInfoVO?item.warehouseInInfoVO.boxGauge:'' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('体积')" align="center" prop="sumVolume" />
          <el-table-column :label="$t('重量')" align="center" prop="sumWeight" />
          <el-table-column :label="$t('数量（个）')" align="center" prop="sumQuantity" />
          <el-table-column :label="$t('储位')" align="center" prop="positionNo" width="250px">
            <template slot-scope="{ row }">
              <div v-for="item in row.orderItemDOS" :key="item.orderItemId">
                {{ (item.warehouseInInfoVO&&item.warehouseInInfoVO.orderLocationMergeVOSet)?notset(getpositionNo(item.warehouseInInfoVO.orderLocationMergeVOSet)):'' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('理货时间')" align="center">
            <template slot-scope="scope">
              {{ formatDate(scope.row.tallyTime, 'YYYY-MM-DD HH:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" align="center" width="160" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="addPkg(scope.row)">{{ $t('装箱') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows" @pagination="getList" />
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { getUnPkgPage, createPkgOrder, createBatchPkgOrder } from '@/api/ecw/boxAir'
import { formatDate, serviceMsg } from '../../utils'
export default {
  props: {
    pkgData: Object,
    shipmentObj: Object,
  },
  data() {
    return {
      pagList: [],
      // 查询参数
      queryParams: {
        page: 1,
        rows: 10,
        shipmentId: this.shipmentObj.id,
      },
      total: 0,
      // 勾选行
      selectedRows: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getUnPkgPage(this.queryParams).then((res) => {
        this.pagList = res.data.list || []
        this.total = res.data.total
      })
    },
    // 格式化日期
    formatDate,
    //去重
    notset(string) {
      if (!string) return string
      let arr = string.split(',')
      arr = arr.filter((item, index) => {
        return arr.indexOf(item) == index
      })
      return arr.toString()
    },
    getpositionNo(arr){
      if(!arr) return arr
      let data = []
      arr.forEach(item=>{
        data.push(item.areaName+item.locationName)
      })
      return data.toString()
    },
    addPkg(row) {
      let data = {
        pkgId: this.pkgData.id,
        orderId: row.orderId,
        orderItemId: row.orderItemId
      }
      createPkgOrder(data).then(() => {
        this.$message.success(this.$t('装箱成功'))
        this.getList()
        this.$emit('reload')
      })
    },
    // 选中
    checkboxSelect(selection) {
      this.selectedRows = selection
    },
    createBatch() {
      if (this.selectedRows.length === 0) {
        this.$message.error(this.$t('请选择需要装箱的订单'))
        return
      }
      let data = []
      this.selectedRows.forEach((item) => {
        let json = {
          pkgId: this.pkgData.id,
          orderId: item.orderId,
          orderItemId: item.orderItemId
        }
        data.push(json)
      })
      createBatchPkgOrder(data).then(() => {
        this.$message.success(this.$t('装箱成功'))
        this.getList()
      })
    }
  }
}
</script>

<style>
</style>