<template>
  <div
    ref="PickListDelivery"
    class="PickListDelivery"
  >
    <!-- JIT拣货单出库弹框 -->
    <div class="deliveryTop">
      <span class="deliveryTitle">确认仓库拣货信息</span>
      <Button
        type="primary"
        :loading="loading"
        @click="sureDelivery()"
      >
        确认出库
      </Button>
    </div>
    <div class="deliveryContent">
      <div class="deliveryContentTop">
        <span class="NumberSpan">出仓单号：{{ OUTSTORAGECODE }}</span>
        <span class="NumberSpan">配货单号：{{ PICKNO }}</span>
      </div>
      <div class="deliveryContentTable">
        <Table
          v-if="showTable"
          border
          :columns="detailColumns"
          :data="pickList"
          height="300"
          class="deliveryContentTableCom"
        />
        <div class="pagecom">
          <Page
            :current="currentPage"
            :page-size="pageSize"
            :total="totalNum"
            simple
            @on-change="changeCurrentPage"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  const R3 = window.R3;
  // import R3 from '../../../static/r3/r3.publish/r3.min';

  const { network, urlSearchParams } = R3;
  export default {
    components: {},
    props: {
      externalOptions: {
        type: Object,
        default: ()=>{}
      },
      selectRowData: {// 获取ID用于多选,获取勾选的明细对应的row内的数据
        type: [Array, Object],
        default: () => {}
      }
    },
    data() {
      return {
        deliveryStyle: '',
        PICKNO: '',
        OUTSTORAGECODE: '',
        detailColumns: [
          {
            type: 'index',
            width: 60,
            title: '序号',
            align: 'center'
          },
          {
            title: '商品条码',
            key: 'SKU',
            width: 240,
            align: 'center'
          },
          {
            title: '国标码',
            key: 'GBCODE',
            width: 240,
            align: 'center'
          },
          {
            title: '数量',
            key: 'NUM',
            align: 'center'
          },
          {
            title: '库位',
            key: 'STORESITE',
            align: 'center'
          },
        ],
        pickList: [],
        currentPage: 1,
        pageSize: 10,
        totalNum: 0,
        loading: false,
        showTable: false,
      };
    },
    created() {
      this.$parent.$parent.modalWidth = 812;
    },
    mounted() {
      this.$refs.PickListDelivery.parentElement.parentElement.parentElement.parentElement.style.width = '812px';
      this.$parent.$parent.modalWidth = 812;
      this.getCurrentMsg();
    },
    methods: {
      getCurrentMsg() {
        this.externalOptions.selectRowData.forEach(item => {
          network.post('/p/cs/QueryList', urlSearchParams({
            searchdata: {
              table: 'T_V_OMSJITDISTRIBUTION',
              startindex: 0,
              range: 10,
              fixedcolumns: { 
                ID: item,
                VIRSTATUS: '=4'
              },
              column_include_uicontroller: true,
              isolr: false
            }
          })).then((res) => {
            if (res.data.code == 0) {
              this.PICKNO = this.externalOptions.selectRowData[0]; // 配货单号
              this.OUTSTORAGECODE = res.data.data.row[0].OUTSTORAGECODE.val; // 出仓单号
              this.showTable = true;
              this.getPickList(1);
            }
          });
        });
      },
      getPickList(value) {
        let params = {
          table: 'T_V_OMSJITORDERDELIVERY',
          range: this.pageSize,
          startindex: (value - 1) * this.pageSize,
          fixedcolumns: { ID: this.externalOptions.selectRowData[0] }
          // 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.externalOptions.selectRowData[0]],
          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;
          }
        });
      },
      close() {
        this.$emit('cancel');
      },
    },
  };
</script>
<style lang='less'>
  .deliveryContentTableCom.ark-table-wrapper, .deliveryContentTableCom .ark-table {
    width: 780px;
  }
</style>
<style lang='less' scoped>
  .PickListDelivery {
    width: 780px;
    .deliveryTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 780px;
      .deliveryTitle {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
    }
    .deliveryContent {
      width: 780px;
      padding-top: 10px;
      .deliveryContentTop {
        margin: 20px 0;
        .NumberSpan {
          color: #333;
          font-size: 14px;
          margin-right: 30px;
        }
      }
      .deliveryContentTable {
        width: 780px;
        min-height: 350px;
        overflow: hidden;
        // border: 1px solid #ddd;
        .pagecom {
          width: 780px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .buttonBox {
      text-align: right;
    }
  }
</style>
