<template>
    <view class="page">
      <StickyNavBar>
        <NavBar title="质量异常下架"></NavBar>
        <view class="btn">
          <uni-easyinput
            prefixIcon="search"
            :disabled="isDisabled"
            v-model="wxparams"
            :focus="isFocus"
            placeholder="请扫描产品包装条码/外箱码"
            @input="handleInputPlnr"
          ></uni-easyinput>
        </view>
        <view class="total">
          <view class="left">异常明细</view>
          <view class="right">
            批次数：
            <text class="blue">{{ chargaArr.length }}</text>
            <text class="line">|</text>
            总数量：
            <text class="blue">{{ totalNum }}</text>
          </view>
        </view>
      </StickyNavBar>
      <ContentLoadingMore class="cardbox" :list="chargaArr">
        <view class="cardContent" v-for="(item, index) in chargaArr">
          <listItem
            :item="item"
            :goodsList="goodsList"
            @deleGonds="deleGonds"
          />
        </view>
      </ContentLoadingMore>
      <BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle"></BottomBtn>
    </view>
  </template>
  
  <script>
  import listItem from "./listItem.vue";
  import StickyNavBar from "@/components/StickyNavBar/index.vue";
  import ContentLoadingMore from "@/components/ContentLoadingMore/index.vue";
  import BottomBtn from "@/components/BottomBtn/index.vue";
  import { parseTime } from "@/utils/ruoyi";
  export default {
    components: {
      StickyNavBar,
      ContentLoadingMore,
      BottomBtn,
      listItem,
    },
    data() {
      return {
        number: 0,
        totalNum: 0,
        show: true,
        wxparams: "",
        btnArr: [
          {
            style: "",
            type: "warning",
            text: "返回",
            way: "goBack",
          },
          {
            style: "",
            type: "primary",
            text: "提交",
            way: "goSubmit",
          },
        ],
        goodsList: [],
        isFocus: false,
        isDisabled: false,
        chargaArr: [],
      };
    },
    created() {
      // this.getPlnr('100001240428000002|00100000000000014.000|10002442800002');
      // this.getPlnr('100001240428000002|00100000000000019.500|10002442800001');
    },
    methods: {
      deleGonds(detail) {
        this.goodsList.forEach((ele, idx) => {
          if (detail.PLNR === ele.PLNR) {
            this.goodsList.splice(idx, 1);
          }
        });
        this.totalNum = 0;
        this.goodsList.forEach((ele) => {
          this.totalNum += ele.PACMG - 0;
          ele.cardNum = 0;
        });
        this.handleData();
      },
      getBtnHandle(row) {
        this[row.way]();
      },
      goBack() {
        uni.navigateBack();
      },
      goSubmit() {
        if (this.goodsList.length === 0) {
          return;
        }
        const data = JSON.parse(JSON.stringify(this.goodsList));
        data.forEach((ele) => {
          ele.ERFMG = ele.PACMG;
        });
        this.$u.api.sapApi
          .sapRrm([
            {
              BLDAT: parseTime(new Date(), "{y}{m}{d}"),
              BUDAT: parseTime(new Date(), "{y}{m}{d}"),
              ZENCODE: "A015",
              TYPE: "CG",
              ITEM: data,
            },
          ])
          .then((res) => {
            this.loading = false;
            if (!Array.isArray(res)) {
              return;
            }
            if (res && res.every((item) => item.TYPE === "S")) {
              this.goodsList = [];
              this.chargaArr = [];
              this.totalNum = 0;
              this.wxparams = "";
              this.$u.toast("提交成功");
            }
            const foundObject = res.find((item) => item.TYPE === "E");
            if (foundObject && foundObject.MESSAGE) {
              this.$u.toast(foundObject.MESSAGE);
            }
          });
      },
      handleInputPlnr(e) {
        this.isFocus = false;
        if (e) {
          // 是否有重复的PLBL
          const flag = this.goodsList.some((item) => item.PLNR == e);
          if (flag) {
            this.$u.toast("已经存在当前条码");
            return setTimeout(() => {
              this.isFocus = true;
              this.isDisabled = false;
              this.wxparams = "";
            }, 1000);
          }
          this.getPlnr(e);
        }
      },
      getPlnr(plnr) {
        this.isDisabled = true;
        this.$u.api.sapApi
          .sapBlpl({
            plnr,
            ztype: "004",
          })
          .then((res) => {
            if (
              res.MSG.some((item) => {
                if (item.TYPE == "E") {
                  this.$u.toast(item.MESSAGE);
                  return true;
                }
                return false;
              })
            ) {
              return setTimeout(() => {
                this.isFocus = true;
                this.isDisabled = false;
                this.wxparams = "";
              }, 1000);
            }
  
            this.goodsList = this.goodsList.concat(res.BLPL);
            this.totalNum = 0;
            this.goodsList.forEach((ele) => {
              this.totalNum += ele.PACMG - 0;
              ele.cardNum = 0;
            });
            this.handleData();
            setTimeout(() => {
              this.wxparams = "";
              this.isFocus = true;
              this.isDisabled = false;
            }, 1000);
            this.loading = false;
          });
      },
      handleData() {
        this.chargaArr = this.goodsList.filter((item, index, self) => {
          return self.findIndex((t) => t.CHARG === item.CHARG) === index;
        });
        this.chargaArr.forEach((ele, idx) => {
          this.goodsList.forEach((item) => {
            if (ele.CHARG === item.CHARG) {
              ele.cardNum += item.PACMG - 0;
              this.$set(this.chargaArr, idx, { ...ele });
            }
          });
        });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .btn {
    padding: 20rpx;
    background: #fff;
    .topSearch {
      margin-bottom: 20rpx;
    }
  }
  .bottomBtn {
    position: sticky;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    background: #fff;
    bottom: 0rpx;
    margin-top: 20rpx;
    .u-btn {
      width: 300rpx;
    }
  }
  .blue {
    color: #3f9dcc;
  }
  .total {
    background: #fff;
    color: #000;
    padding: 0rpx 40rpx;
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
    .line {
      margin: 0px 10rpx;
    }
  }
  .cardbox {
    min-height: calc(100vh - 540rpx);
    padding: 0rpx 20rpx;
    margin-top: 20rpx;
  }
  .cardContent {
    border-radius: 8px;
    background: #fff;
    margin-bottom: 20rpx;
  }
  /deep/ .u-sticky {
    top: 0 !important;
    background: #fff;
  }
  </style>
  