<template>
  <div class="PickListDelivery">
    <!-- JIT拣货单出库弹框 -->
    <div class="deliveryTop">
      仓库拣货单
    </div>
    <div class="deliveryContent">
      <div class="deliveryContentTop">
        <span class="NumberSpan">出仓单号：{{ OUTSTORAGECODE }}</span>
        <span class="NumberSpan">配货单号：{{ PICKNO }}</span>
      </div>
      <div class="deliveryContentTable">
        <Table
          border
          :columns="detailColumns"
          :data="pickList"
          height="300"
        />
        <div class="pagecom">
          <Page
            :current="currentPage"
            :page-size="pageSize"
            :total="totalNum"
            simple
            @on-change="changeCurrentPage"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // import R3 from '../../../static/r3/r3.publish/r3.min';
  const R3 = window.R3;
  // import realconsole from './xxx'
  const { network } = R3;
  export default {
    components: {},
    props: {
      selectRowData: {// 获取ID用于多选,获取勾选的明细对应的row内的数据
        type: [Array, Object],
        default: () => {}
      }
    },
    data() {
      return {
        PICKNO: '',
        OUTSTORAGECODE: '',
        detailColumns: [
          {
            type: 'index',
            width: 60,
            title: '序号',
            align: 'center'
          },
          {
            title: '商品条码',
            key: 'SKU',
            align: 'center'
          },
          {
            title: '国际码',
            key: 'GBCODE',
            align: 'center'
          },
          {
            title: '数量',
            key: 'NUM',
            align: 'center'
          },
          {
            title: '库位',
            key: 'STORESITE',
            align: 'center'
          },
        ],
        pickList: [],
        currentPage: 1,
        pageSize: 10,
        totalNum: 0,
        loading: false,
      };
    },
    created() {
      this.PICKNO = this.selectRowData[0].PICKNO.val; // 配货单号
      this.OUTSTORAGECODE = this.selectRowData[0].OUTSTORAGECODE.val; // 出仓单号
      this.getPickList(1);
    },
    methods: {
      getPickList(value) {
        let params = {
          table: 'T_V_OMSJITORDERDELIVERY',
          range: this.pageSize,
          startindex: (value - 1) * this.pageSize,
          fixedcolumns: { ID: this.selectRowData[0].ID.val }
          // ID: this.selectRowData[0].ID.val  317
        };
        network.post('/p/cs/list/query', params).then((res) => {
          this.pickList = [];
          res.data.rows.forEach(item => {
            let obj = {
              SKU: item.SKU.val,
              GBCODE: item.GBCODE.val,
              NUM: item.NUM.val,
              STORESITE: item.STORESITE.val
            };
            this.pickList.push(obj);
          });
          this.totalNum = res.data.total;
        });
      },
      changeCurrentPage(value) {
        this.getPickList(value);
      },
      sureDelivery() {
        this.loading = true;
        let params = {
          ids: [this.selectRowData[0].ID.val],
          tableName: 'T_V_OMSJITDISTRIBUTION',
          actionName: 'T_OMSJITDISTRIBUTION_出库_SP',
        };
        network.post('/p/cs/exeAction', params).then((res) => {
          if (res.data.code == 0) {
            this.$Message.success('确认出库成功');
            this.loading = false;
            // 成功关闭弹框
            this.$emit('cancel');
          } else {
            this.loading = false;
          }
        });
      }
    },
  };
</script>
<style lang='less' scoped>
  .PickListDelivery {
    width: 800px;
    .deliveryTop {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }
    .deliveryContent {
      padding-top: 10px;
      .deliveryContentTop {
        margin: 20px 0;
        .NumberSpan {
          color: #333;
          font-size: 14px;
          margin-right: 30px;
        }
      }
      .deliveryContentTable {
        border: 1px solid #ddd;
        .pagecom {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
</style>
