<template>
  <el-dialog
    title="合并详情"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
  >
    <!-- 数据表格 -->
    <header-title title="基础信息" size="16px">
      <el-button type="primary" @click="split">拆分</el-button>
    </header-title>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="tableList"
      :selection.sync="selection"
      height="300px"
    >
    </ele-pro-table>
    <header-title title="拆分信息" size="16px"></header-title>
    <ele-pro-table
      ref="table"
      :columns="mergeColumns"
      :datasource="splitTable"
      height="200px"
    >
    </ele-pro-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="visible = false">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import storageApi from '@/api/warehouseManagement';
  export default {
    data() {
      return {
        visible: false,
        splitTable: [],
        tableList: [],
        dimensionRow: {},
        selection: [],
        selectionIds: [],
        qualityStatus: {
          0: '未质检',
          1: '已质检'
        }, // 质检状态 0未检 1已检
        qualityResults: {
          1: '合格',
          2: '不合格'
        } // 质检结果 1合格 2不合格
      };
    },
    watch: {
      selection: {
        handler(val) {
          console.log(val);
        },
        deep: true
      }
    },
    computed: {
      // 表格列配置
      columns() {
        return [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            fixed: 'left',
            selectable: (row) => {
              return !this.selectionIds.includes(row.id);
            }
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'categoryCode',
            label: '物品编码',
            align: 'center',
            width: 150
          },
          {
            prop: 'categoryName',
            label: '名称',
            align: 'center',
            width: 200
          },
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center'
          },
          {
            prop: 'barcodes',
            label: '发货条码',
            align: 'center'
          },
          {
            prop: 'packageNo',
            label: '编码',
            align: 'center',
            width: 200
          },
          {
            prop: 'packingQuantity',
            label: '数量',
            align: 'center'
          },
          {
            prop: 'packingUnit',
            label: '单位',
            align: 'center'
          },
          {
            prop: 'measureQuantity',
            label: '计量数量',
            align: 'center'
          },
          {
            prop: 'measureUnit',
            label: '计量单位',
            align: 'center'
          },
          {
            prop: 'materielDesignation',
            label: '物料代号',
            align: 'center'
          },
          {
            prop: 'clientCode',
            label: '客户代号',
            align: 'center'
          },
          {
            prop: 'engrave',
            label: '刻码',
            align: 'center'
          },
          {
            prop: 'weight',
            label: '重量',
            align: 'center'
          },
          {
            prop: 'weightUnit',
            label: '重量单位',
            align: 'center'
          },
          {
            prop: 'result',
            label: '质检结果',
            align: 'center',
            formatter: (_row, _column, cellValue) => {
              return this.qualityResults[cellValue];
            }
          },
          {
            prop: 'status',
            label: '质检状态',
            align: 'center',
            formatter: (_row, _column, cellValue) => {
              return this.qualityStatus[cellValue];
            }
          },
          {
            prop: 'warehouseName',
            label: '仓库',
            align: 'center',
            width: 300
          },
          {
            prop: 'areaName',
            label: '货区',
            align: 'center'
          },
          {
            prop: 'goodsShelfName',
            label: '货架',
            align: 'center'
          },
          {
            prop: 'goodsAllocationName',
            label: '货位',
            align: 'center'
          },
          {
            prop: 'productionDate',
            label: '生产日期',
            align: 'center'
          },
          {
            prop: 'purchaseDate',
            label: '采购日期',
            align: 'center'
          }
        ];
      },
      mergeColumns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'categoryCode',
            label: '物品编码',
            align: 'center',
            width: 150
          },
          {
            prop: 'categoryName',
            label: '名称',
            align: 'center',
            width: 200
          },
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center'
          },
          {
            prop: 'barcodes',
            label: '发货条码',
            align: 'center'
          },
          {
            prop: 'packageNo',
            label: '编码',
            align: 'center',
            width: 200
          },
          {
            prop: 'packingQuantity',
            label: '数量',
            align: 'center'
          },
          {
            prop: 'packingUnit',
            label: '单位',
            align: 'center'
          },
          {
            prop: 'measureQuantity',
            label: '计量数量',
            align: 'center'
          },
          {
            prop: 'measureUnit',
            label: '计量单位',
            align: 'center'
          },
          {
            prop: 'materielDesignation',
            label: '物料代号',
            align: 'center'
          },
          {
            prop: 'clientCode',
            label: '客户代号',
            align: 'center'
          },
          {
            prop: 'engrave',
            label: '刻码',
            align: 'center'
          },
          {
            prop: 'weight',
            label: '重量',
            align: 'center'
          },
          {
            prop: 'weightUnit',
            label: '重量单位',
            align: 'center'
          },
          {
            prop: 'result',
            label: '质检结果',
            align: 'center',
            formatter: (_row, _column, cellValue) => {
              return this.qualityResults[cellValue];
            }
          },
          {
            prop: 'status',
            label: '质检状态',
            align: 'center',
            formatter: (_row, _column, cellValue) => {
              return this.qualityStatus[cellValue];
            }
          },
          {
            prop: 'warehouseName',
            label: '仓库',
            align: 'center',
            width: 300
          },
          {
            prop: 'areaName',
            label: '货区',
            align: 'center'
          },
          {
            prop: 'goodsShelfName',
            label: '货架',
            align: 'center'
          },
          {
            prop: 'goodsAllocationName',
            label: '货位',
            align: 'center'
          },
          {
            prop: 'productionDate',
            label: '生产日期',
            align: 'center'
          },
          {
            prop: 'purchaseDate',
            label: '采购日期',
            align: 'center'
          }
        ];
      }
    },
    methods: {
      async split() {
        console.log(this.selection);
        console.log(this.selectionIds);
        let boolen = this.selection.every((item) =>
          this.selectionIds.includes(item.id)
        );
        if (this.selection.length > 0 && !boolen) {
          this.selection = this.selection.filter(
            (item) => !this.selectionIds.includes(item.id)
          );
          // 生成编码
          let packageNo = [];
          const { data } = await storageApi.getAssetNum(
            this.selection.map((item, idx) => {
              return {
                assetCode: item.categoryCode + (this.selectionIds.length + idx),
                batchNum: item.batchNo,
                num: this.dimensionRow.packageCell
              };
            })
          );
          this.selection.map((items, index) => {
            let filetrArr = [];
            data.map((item) => {
              if (
                items.categoryCode + (this.selectionIds.length + index) ==
                item.assetCode
              ) {
                filetrArr.push(item);
              }
            });
            packageNo[index] = filetrArr;
          });
          this.selectionIds = this.selectionIds.concat(
            this.selection.map((item) => item.id)
          );

          console.log(packageNo);
          let arr = this.selection
            .map((item, idx) => {
              let arr = [];
              for (
                let index = 0;
                index < this.dimensionRow.packageCell;
                index++
              ) {
                arr.push({
                  ...item,
                  packingQuantity: 1,
                  packingUnit: this.dimensionRow.conversionUnit,
                  measureQuantity: 1,
                  measureUnit: this.dimensionRow.packageUnit,
                  packageNo: packageNo[idx][index].onlyCode,
                  ids: item.id,
                  type: '2',
                  weight: item.weight / this.dimensionRow.packageCell
                });
              }
              console.log(arr);
              return arr;
            })
            .flat();
          console.log(arr);
          this.splitTable = this.splitTable.concat(arr);
          console.log(this.splitTable);
        } else {
          this.$message.error('请选择正确的行');
        }
      },
      open(dimensionRow, tableList) {
        console.log(dimensionRow);
        this.dimensionRow = dimensionRow;
        this.tableList = tableList;
        this.visible = true;
      },
      handleClose() {
        this.visible = false;
        this.dimensionRow = {};
        this.tableList = [];
        this.selection = [];
        this.splitTable = [];
        this.selectionIds = [];
      }
    }
  };
</script>

<style lang="scss" scoped></style>
