<template>
  <div>
    <el-row style="margin-top: 25px">
      <el-row>
        <el-button size="small" type="primary" @click="removeBatch">{{ $t('批量移出合包') }}</el-button>
        <el-button size="small" type="primary" @click="sealBox">{{ $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.ECW_IS_BRAND" :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">
                {{ notset(item.positionNo) }}
              </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="removePkg(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-dialog :title="$t('封箱确认')" :visible.sync="sealBoxdialogVisible" width="700px" :modal-append-to-body="false" append-to-body>
          <el-form ref="sealBoxForm" :model="sealBoxForm" label-width="100px">
            <el-form-item :label="$t('箱号')" prop="pkgNum">
              {{ pkgData.pkgNum }}
            </el-form-item>
            <el-row>
              <el-col :span="8">
                <el-form-item :label="$t('长')" prop="pkgLength">
                  <el-input-number v-model="sealBoxForm.pkgLength" :controls="false" :precision="2" style="width: 100px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('宽')" prop="pkgWidth">
                  <el-input-number v-model="sealBoxForm.pkgWidth" :controls="false" :precision="2" style="width: 100px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('高')" prop="pkgHight">
                  <el-input-number v-model="sealBoxForm.pkgHight" :controls="false" :precision="2" style="width: 100px" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item :label="$t('体积')" prop="sumVolume" :rules="[
              { required: true, message: $t('请填写体积')},
              { pattern: /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/, message: $t('体积保留两位小数')}
            ]">
              <el-input v-model="sealBoxForm.sumVolume" style="width: 180px">
               <template slot="append">
                 {{ $t('m³') }}
                </template>
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('重量')" prop="sumWeight" :rules="[
              { required: true, message: $t('请填写重量')},
              { pattern: /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/, message: $t('重量保留两位小数')}
            ]">
              <el-input v-model="sealBoxForm.sumWeight" style="width: 180px">
               <template slot="append">
                 {{ $t('kg') }}
                </template>
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('数量')" prop="sumNum" :rules="[
              { required: true, message: $t('请填写数量')},
              { pattern: /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/, message: $t('数量保留两位小数')}
            ]">
              <el-input v-model="sealBoxForm.sumNum" style="width: 180px">
               <template slot="append">
                 {{ $t('个') }}
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: center">
            <el-button size="small" type="primary" @click="sealBoxSubmit">{{ $t('确定') }}</el-button>
            <el-button size="small" type="primary" @click="sealBoxdialogVisible = false">{{ $t('取消') }}</el-button>
          </div>
        </el-dialog>
        <!-- 打印标签 -->
        <el-dialog :title="$t('集运封箱标签')" :visible.sync="printdialogVisible" width="300px" :modal-append-to-body="false" append-to-body>
          <print-tag v-if="printdialogVisible" :tagData="tagData" />
        </el-dialog>
    </el-row>
  </div>
</template>

<script>
import { getPkgPageByPkgId, deleteRelate, deleteBatchRelate, getMergePkgInfoById, updateMergePkg, getMergeTagById } from '@/api/ecw/boxAir'
import { formatDate, serviceMsg } from '../../utils'
import printTag from './printTag.vue'
export default {
  props: {
    pkgData: Object,
    shipmentObj: Object,
  },
  components: {
    printTag
  },
  data() {
    return {
      pagList: [],
      // 查询参数
      queryParams: {
        page: 1,
        rows: 10
      },
      total: 0,
      // 勾选行
      selectedRows: [],
      sealBoxdialogVisible: false,
      sealBoxForm: {},
      printdialogVisible: false,
      tagData: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      let queryParams = {
        id: this.pkgData.id ,
        shipmentId: this.shipmentObj.id,
        ...this.queryParams
      }
      getPkgPageByPkgId(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()
    },
    removePkg(row) {
      deleteRelate(this.pkgData.id, row.orderId).then(() => {
        this.$message.success(this.$t('移出成功'))
        this.getList()
      })
    },
    // 选中
    checkboxSelect(selection) {
      this.selectedRows = selection
    },
    removeBatch() {
      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
        }
        data.push(json)
      })
      deleteBatchRelate(data).then(() => {
        this.$message.success(this.$t('移出成功'))
        this.getList()
      })
    },
    //封箱
    sealBox() {
      getMergePkgInfoById(this.pkgData.id).then(res=>{
        this.sealBoxForm = {
          pkgHight: res.data.pkgHight,
          pkgLength: res.data.pkgLength,
          pkgWidth: res.data.pkgWidth,
          sumNum: res.data.sumNum,
          sumVolume: res.data.sumVolume,
          sumWeight: res.data.sumWeight,
        }
        this.sealBoxdialogVisible = true
      })
    },
    sealBoxSubmit() {
      this.$refs['sealBoxForm'].validate((valid) => {
        if (!valid) {
          return
        }
        this.sealBoxForm.shipmentId = this.shipmentObj.id
        this.sealBoxForm.id = this.pkgData.id
        this.sealBoxForm.status = 3
        updateMergePkg(this.sealBoxForm).then(() => {
          this.sealBoxdialogVisible = false
          this.$confirm(this.$t('箱号:')+this.pkgData.pkgNum+this.$t('，请问是否打印封箱标签?'), this.$t("封箱成功"), {
                confirmButtonText: this.$t('立刻打印'),
                cancelButtonText: this.$t('稍后再试'),
              })
                .then((_) => {
                  getMergeTagById(this.pkgData.id).then(res=>{
                    this.tagData = res.data
                    this.printdialogVisible = true
                  })
                })
                .catch((_) => {
                  this.$emit('closeDialog');
                });
        })
      })
    }
  }
}
</script>

<style>
</style>