<template>
  <view class="lists">
    <StickyNavBar>
      <NavBar title="发货下架"></NavBar>
      <FactorySelect v-model="lgort" :options="options" />
      <view class="btn">
        <uni-easyinput
          class="boxSelect"
          prefixIcon="search"
          v-model.trim="vbeln"
          placeholder="请扫描交货单"
          @input="handleInputvbeln"
        ></uni-easyinput>
        <uni-easyinput
          prefixIcon="search"
          :disabled="isDisabled"
          v-model.trim="wxparams"
          :focus="isFocus"
          placeholder="请扫描产品包装条码/外箱码"
          @input="handleInputPlnr"
        ></uni-easyinput>
      </view>
      <!-- <view class="total" v-show="goodsList && goodsList.length > 0">
				<view class="left">明细</view>
			</view> -->
    </StickyNavBar>
    <ContentLoadingMore class="contentMore" :list="goodsList">
      <view class="cardbox">
        <view class="cardContent" v-for="item in goodsList" :key="item.PLNR">
          <scanningList :item="item" :list="item.ZPLDT" />
        </view>
      </view>
    </ContentLoadingMore>

    <BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle"></BottomBtn>
  </view>
</template>

<script>
import BottomBtn from "@/components/BottomBtn/index.vue";
import ContentLoadingMore from "@/components/ContentLoadingMore/index.vue";
import scanningList from "../salesOutbound/scanningList.vue";
import StickyNavBar from "@/components/StickyNavBar/index.vue";
import { parseTime } from "@/utils/ruoyi";

export default {
  components: {
    StickyNavBar,
    ContentLoadingMore,
    scanningList,
    BottomBtn,
  },
  data() {
    return {
      wxparams: "",
      lgort: "",
      vbeln: "",
      isDisabled: false,
      isFocus: false,
      goodsList: [],
      options: [
        {
          WERKS: "1000",
          LGORT: "S000",
          LGOBE: "发运仓",
          label: "S000-发运仓",
          value: "S000",
        },
      ],
      pls: [], // 已经扫码的pl号
      btnArr: [
        {
          style: "",
          type: "warning",
          text: "返回",
          way: "goBack",
        },
        {
          style: "",
          type: "primary",
          text: "提交",
          way: "goSubmit",
        },
      ],
    };
  },
  computed: {
    /**
     * 缓存的扫描过的pl条目
     */
    catchPL() {
      return this.vuex_sales_outbound[this.vbeln] || null;
    },
  },
  methods: {
    handleInputPlnr(e) {
      if (!e) return;
      this.isFocus = false;
      console.log(this.pls, "this.pls");
      if (this.pls.includes(e)) {
        return this.$u.toast("请勿重复扫描！");
      }
      this.getPlnr(e);
    },
    getPlnr(plnr) {
      if (!this.goodsList.length) {
        return this.$u.toast("请先扫描交货单！");
      }
      let params = {
        ZCODE: plnr.includes("BL") ? plnr : "",
        plnr: plnr.includes("BL") ? "" : plnr,
        ztype: "005",
      };
      this.$u.api.sapApi.sapBlpl(params).then((res) => {
        if (res && res.MSG[0].TYPE === "S") {
          this.setSalesBoundPL(res.BLPL);
        } else {
          this.$u.toast(res.MSG[0].MESSAGE);
        }
        setTimeout(() => {
          this.isFocus = true;
          this.isDisabled = false;
          this.wxparams = "";
        }, 1000);
        this.loading = false;
      });
    },
    setSalesBoundPL(pls) {
      console.log(pls, "pls");
      // 循环BLPL合并相同的物料号和size
      pls.forEach((ele) => {
        if (!this.pls.includes(ele.PLNR) || !this.pls.includes(ele.ZCODE)) {
          ele.PLNR && this.pls.push(ele.PLNR);
          ele.ZCODE && this.pls.push(ele.ZCODE);
        }
        ele.TOMNG = ele.PACMG;
        const item = this.goodsList.find(
          (v) => v.ZSIZE == ele.ZSIZE && ele.MATNR == v.MATNR
        );
        if (item) {
          if (Reflect.has(item, "ZPLDT")) {
            item.ZPLDT.push(ele);
          } else {
            this.$set(item, "ZPLDT", [ele]);
          }
        }
      });
    },
    initGoodsList(arr, VBELN) {
      // 有SIZE行就取ZINSNUM+ZLOSSC，没有SIZE行的就是取交货单行的LFIMG
      arr.forEach((ele) => {
        if (ele.ZSIZE.length) {
          this.goodsList.push(
            ...ele.ZSIZE.map((item) => {
              return {
                KDAUF: ele.KDAUF,
                KDPOS: ele.KDPOS,
                LFIMG: ele.LFIMG,
                MEINS: ele.MEINS,
                WERKS: ele.WERKS,
                ...item,
                KUNNR: ele.KUNNR,
                NAME1: ele.NAME1,
                WADAT: ele.WADAT,
                XSNUM: ele.XSNUM,
                MATNR: ele.MATNR,
                MAKTX: ele.MAKTX,
                VBELN: VBELN,
                POSNR: ele.POSNR,
                ZPLDT: [],
                sumNum: item.ZINSNUM + item.ZLOSSC,
              };
            })
          );
        } else {
          ele.ZSIZE = "";
          ele.sumNum = ele.LFIMG;
          // ele.ZINSNUM = ele.LFIMG;
          this.goodsList.push(ele);
          this.$u.toast(`物料编号：${ele.MATNR}--没有尺码信息`);
        }
      });
    },
    handleInputvbeln(VBELN) {
      this.$u.api.sapApi
        .sapSchDn({
          VBELN,
        })
        .then((res) => {
          this.initGoodsList(res.BKDT, VBELN);
          setTimeout(() => {
            this.vbeln = "";
          }, 1000);
        });
    },
    deleGonds(index) {
      this.goodsList.splice(index, 1);
    },
    reset() {
      setTimeout(() => {
        this.isFocus = true;
        this.isDisabled = false;
        this.wxparams = "";
      }, 1000);
    },
    goBack() {
      uni.navigateBack();
    },
    getBtnHandle(row) {
      console.log("getBtnHandle", row);
      this[row.way]();
    },
    // 提交
    goSubmit() {
      // console.log(this.goodsList, '--------');
      // return
      if (!this.goodsList.length) {
        return this.$u.toast("请先扫描交货单！");
      }
      if (!this.lgort) {
        return this.$u.toast("请选择目标仓位");
      }
      const arr = this.goodsList.reduce((acc, cur) => {
        acc.push(
          ...cur.ZPLDT.map((item) => {
            item.LGORT = this.lgort;
            item.VBELN = cur.VBELN;
            item.POSNR = cur.POSNR;
            return item;
          })
        );
        return acc;
      }, []);
      // const arr = this.goodsList.map((item) => {
      // 	item.LGORT = this.lgort
      // 	item.VBELN = this.vbeln
      // 	return item
      // })
      this.$u.api.sapApi.sapCasePlnr2(arr).then((res) => {
        const flag = res.some((item) => {
          const b = item.TYPE == "E";
          if (b) {
            this.$u.toast(item.MESSAGE);
          }
          return b;
        });
        if (!flag) {
          this.$u.toast(res[0].MESSAGE);
          this.goodsList = [];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.lists {
  flex: 1;
  flex-direction: column;
}

page {
  background: #f8f8f8;
}

/deep/ .u-sticky {
  top: 0 !important;
  background: #fff;
}

.btn {
  padding: 20rpx;
  background: #fff;

  .boxSelect {
    margin-bottom: 20rpx;
  }
}

.contentMore {
  margin: 20rpx;
}
.cardbox {
  max-height: calc(100vh - 105px - 60rpx - 140rpx);
  padding: 0rpx 20rpx;
  margin-top: 20rpx;
}

.cardContent {
  border-radius: 8px;
  background: #fff;
  margin-bottom: 20rpx;
}

.total {
  background: #fff;
  color: #000;
  padding: 0rpx 40rpx;
  display: flex;
  justify-content: space-between;
  font-size: 32rpx;

  .line {
    margin: 0px 10rpx;
  }
}
</style>
