<template>
  <el-dialog
    :title="$t('选择订单商品')"
    :visible.sync="visible"
    append-to-body
    width="90vw"
  >
    <el-table ref="multipleTable" :data="flatList" @selection-change="handleSelectionChange" :span-method="objectSpanMethod" class="table">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column :label="$t('品名')" prop="name">
        <template #default="{row}">{{$l(row, "prodName")}}</template>
      </el-table-column>
      <el-table-column :label="$t('品牌')" prop="brand">
        <template #default="{row}">{{$l(row, "brandName")}}</template>
      </el-table-column>
      <el-table-column :label="$t('材质')" prop="material">
        <template #default="{row}">{{$l(row, "materialLabel")}}</template>
      </el-table-column>
      <el-table-column :label="$t('商品特性')" prop="attr">
        <template #default="{row}">{{$l(row, "prodAttrNames")}}</template>
      </el-table-column>
      <el-table-column :label="$t('用途')" prop="unit">
        <template #default="{row}">{{$l(row, "usageNames")}}</template>
      </el-table-column>
      <el-table-column :label="$t('总数量')" prop="quantityAll"></el-table-column>
      <el-table-column :label="$t('总箱数')" prop="cartonsNum"></el-table-column>
      <el-table-column :label="$t('包装类型')" prop="specificationType">
        <template #default="{row}">
          <dict-tag :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" :value="row.specificationType"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('规格')" prop="boxGauge"></el-table-column>
      <el-table-column :label="$t('总重量')" prop="weight"></el-table-column>
      <el-table-column :label="$t('快递单号')" prop="expressNo"></el-table-column>
      <el-table-column :label="$t('影像')" prop="quantityAll">
        <template #default="{row}">
          <el-button type="text" @click="curPictrues = row.pictureUrls">{{$t('查看影像')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">{{$t('确定')}}</el-button>
      <el-button @click="handleClose">{{$t('取消')}}</el-button>
    </div>
    <media-dialog v-if="curPictrues" :value="curPictrues" @close="curPictrues=null"></media-dialog>
  </el-dialog>
</template>

<script>
import {getOrderItemCommonAttr} from "@/api/ecw/order"
import MediaDialog from "@/views/ecw/order/stocking/components/MediaDialog.vue";

export default {
  components: {MediaDialog},
  props: {
    orderId: {
      type: Number,
      default: undefined
    },
    warehouseInId:Number
  },
  data(){
    return {
      visible: true,
      // 备选的商品明细
      orderItemDetails: [],
      multipleSelection:[],
      curPictrues: null
    }
  },
  watch:{
    visible(val){
      if (!val) {
        this.$emit('close')
      }
    },
  },
  computed:{
    flatList(){
      let arr = []
      this.orderItemDetails.forEach(item => {
        item.orderWarehouseInCommonAttrVOList?.forEach((vo, index) => {
          arr.push({
            ...item,
            ...vo,
            index,
            span: index === 0 ? item.orderWarehouseInCommonAttrVOList?.length : 0,
            warehouseInId: item.id
          })
        })
      })
      return arr
    }
  },
  async created() {
    getOrderItemCommonAttr(this.orderId, this.warehouseInId || 0).then(res => {
      this.orderItemDetails = res.data
    })
  },
  methods: {
    handleSelectionChange(e){
      console.log("handleSelectionChange", e)
      this.multipleSelection = e
    },
    handleSubmit(){
      // 品名+品牌＋材质＋商品特性＋用途一致的会合并，数量累加
      // https://zentao.test.jdshangmen.com/task-view-3423.html
      let arr = []
      this.multipleSelection.forEach(item => {
        let index = arr.findIndex(i => {
          return i.prodId == item.prodId && i.brand == item.brand && i.material == item.material && i.prodAttrIds == item.prodAttrIds && i.usageIds == item.usageIds
        })
        if (index == -1) {
          arr.push({...item})
        } else {
          arr[index].quantityAll += item.quantityAll
        }
      })

      // 如果某条入仓记录下的箱明细被全部选中了，则需要将他的快递单号和影像带过去
      const expressNos = []
      const pictureUrls = []
      this.orderItemDetails.forEach((warehouseIn, index) => {
        // 本条入仓记录被选中的明细数
        const selectedCount = this.multipleSelection.filter(item => item.warehouseInId == warehouseIn.id).length
        if(selectedCount == warehouseIn.orderWarehouseInCommonAttrVOList?.length){
          if(warehouseIn.expressNo){
            expressNos.push(warehouseIn.expressNo)
          }
          if(warehouseIn.pictureUrls?.length){
            pictureUrls.push(...warehouseIn.pictureUrls)
          }
        }
      })
      // 根据warehouseInId 给对应的入仓记录追加快递单号和影像
      // 存到全局变量，在调用对应finishPack接口的时候判断追加
      window.ChooseOrderProductsExpressNos = expressNos
      window.ChooseOrderProductsPictureUrls = pictureUrls

      this.$emit("success", arr)
    },
    handleClose() {
      this.visible = false
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      if(columnIndex > 6){
        return {
          rowspan: row.span,
          colspan: 1
        }
      }
      return {
        rowspan: 1,
        colspan: 1
      }
    }
  }
}
</script>

<style scoped lang="scss">
.table{
    ::v-deep{
        th.el-table__cell.is-leaf, td.el-table__cell{
            border-bottom: 1px solid #9b9b9b;
        }
        .el-checkbox__inner{
            border:2px solid #9b9b9b;
        }
    }
}
</style>
