<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);
      }
    },
    handleInputNlpla(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>
