<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() {
    //alert(this.orderId);
    //alert(this.warehouseInId);
    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>
