<template>
  <view class="page">
    <StickyNavBar>
      <NavBar title="反冲料拣配"></NavBar>
      <view class="headerTitle">
        <view class="">
          <view class="items"
            >反冲料申请:{{ goodsInfo && goodsInfo.applyNo }}</view
          >
          <view class="items"
            >{{ goodsInfo.workstationCode }}/{{
              goodsInfo.workstationName
            }}</view
          >
          <view class="items"
            >计划日期:{{ goodsInfo && goodsInfo.startTime }}</view
          >
        </view>
      </view>
      <view class="selectSheet">
        <u-row>
          <u-col span="12">
            <u-picker
              v-model="depotShow"
              mode="selector"
              :default-selector="[0]"
              range-key="text"
              :range="depotLists"
              @confirm="actionSheetCallback"
            ></u-picker>
            <u-input
              v-model="LGOBE"
              placeholder="请选择线边库"
              :type="type"
              :border="border"
              @click="depotShow = true"
            />
          </u-col>
        </u-row>
      </view>
      <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="">{{ goodsList.length }}</text>
        </view>
      </view>
    </StickyNavBar>
    <ContentLoadingMore class="cardbox" :list="goodsList">
      <view class="cardContent" v-for="(item, index) in goodsList" :key="index">
        <scanningList :item="item" :list="item.details" />
      </view>
    </ContentLoadingMore>
    <BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle"></BottomBtn>
  </view>
</template>

<script>
import StickyNavBar from "@/components/StickyNavBar/index.vue";
import ContentLoadingMore from "@/components/ContentLoadingMore/index.vue";
import BottomBtn from "@/components/BottomBtn/index.vue";
import scanningList from "./scanningList.vue";
export default {
  components: {
    StickyNavBar,
    ContentLoadingMore,
    BottomBtn,
    scanningList,
  },
  data() {
    return {
      checkedBox: false,
      r1: "",
      // totalNum: 0,
      number: 0,
      show: true,
      depotShow: false,
      depotLists: [],
      LGOBE: "",
      LGORT: "",
      type: "select",
      border: true,
      wxparams: "",
      btnArr: [
        {
          style: "",
          type: "warning",
          text: "返回",
          way: "goBack",
        },
        {
          style: "",
          type: "primary",
          text: "提交",
          way: "goSubmit",
        },
      ],
      goodsList: [],
      isFocus: true,
      isDisabled: false,
      OrderNum: "",
      list: [],
    };
  },
  computed: {
    goodsInfo() {
      return this.goodsList[0] || {}
    },
    totalNum() {
      let num = 0;
      let i = null,
        j = null;
      const data = JSON.parse(JSON.stringify(this.list));
      const result = data.filter((item, index, self) => {
        return self.findIndex((t) => t.itemCode === item.itemCode) === index;
      });
      for (i = 0; i < this.goodsList.length; i++) {
        if (
          this.goodsList[i].itemCode === result[i].itemCode &&
          result[i].vista
        ) {
          num++;
        }
      }
      return num || 0;
    },
  },
  onLoad(option) {
    if (option && option.order) {
      this.OrderNum = option.order;
      this.getOrder(option.order);
    }
  },
  watch: {},
  created() {
    this.getDepotLists();
  },
  methods: {
    reset() {
      setTimeout(() => {
        this.wxparams = "";
        this.isFocus = true;
        this.isDisabled = false;
      }, 1000);
    },
    getDepotLists() {
      this.$u.api.sapApi
        .sapDict({
          FIELDNAME: "T001L2",
        })
        .then((res) => {
          if (res) {
            res.forEach((ele) => {
              ele.text = ele.LGORT + "-" + ele.LGOBE;
            });
            this.depotLists = res;
          } else {
            this.depotLists = [];
          }
        });
    },
    getOrder(applyNo) {
      this.$u.api.mesApi
        .pdaAllocationCreate({
          applyNo,
        })
        .then((res) => {
          if (res && res.code - 200 === 0) {
            this.goodsList = res.rows.reduce((pre, cur) => {
              pre.push({
                ...cur,
                details: [],
              });
              return pre;
            }, []);
          } else {
            this.$u.toast(res.msg);
          }
          this.loading = false;
        });
    },
    checkedChange() {
      this.checkedBox = !this.checkedBox;
    },
    // 点击actionSheet回调
    actionSheetCallback(index) {
      console.log(index, "index");
      this.LGOBE = this.depotLists[index].LGOBE;
      this.LGORT = this.depotLists[index].LGORT;
    },
    getBtnHandle(row) {
      this[row.way]();
    },
    goBack(time = 0) {
      setTimeout(() => {
        uni.navigateBack();
      }, time);
    },
    goSubmit() {
      let arr = this.goodsList.reduce((pre, cur) => {
        pre.push(
          ...cur.details.map((ele, index) => {
            // ele.UMLGO = this.LGORT;
            ele.UMLGO = "1131";
            ele.ERFMG = ele.PACMG;
            ele.AUFNR = ele.workorderCode;
            ele.MTSNR = ele.applyNo;
            ele.ZEILE = index + 1;
            ele.RSNUM = ele.requirementNumber;
            ele.RSPOS = ele.requirementProjectNumber;
            return ele;
          })
        );
        return pre;
      }, []);

      const params = {
        ZENCODE: "A012",
        TYPE: "CG",
        ITEM: arr,
      };
      this.$u.api.sapApi.sapRrm([params]).then((res) => {
        this.loading = false;
        if (!Array.isArray(res)) {
          return;
        }

        const flag = res.some((item) => {
          const f = item.TYPE == "E";
          if (f) {
            this.$u.toast(item.MESSAGE);
          }
          return f;
        });
        if (!flag) {
          this.handleMes(arr, res[0].MESSAGE_V1);
        }
      });
    },
    handleMes(arr, num) {
      arr.forEach((ele) => {
        ele.batchCode = ele.CHARG;
        ele.quantityIssued = ele.PACMG;
        ele.issueCode = num;
        ele.issueType = ele.materialType;
      });
      this.$u.api.mesApi.pdaAllocation(arr).then((res) => {
        this.loading = false;
        console.log(res);
        if (res && res.code == 200) {
          this.$u.toast("提交成功");
          this.goBack(500);
        } else {
          this.$u.toast(res.msg);
        }
      });
    },
    handleInputPlnr(e) {
      e && this.getPlnr(e);
    },
    getPlnr(plnr) {
      this.isDisabled = true;
      this.isFocus = false;
      this.$u.api.sapApi
        .sapBlpl({
          plnr,
          ztype: "002",
        })
        .then((res) => {
          if (res && res.MSG[0].TYPE === "S") {
            if (
              this.goodsList.some((item) =>
                item.details.some((v) => v.PLNR == plnr)
              )
            ) {
              this.reset();
              this.$u.toast("已经存在当前条码");
              return;
            }
            res.BLPL.forEach((ele) => {
              const item = this.goodsList.find(
                (v) => v.sapItemCode == ele.MATNR
              );
              if (item) {
                item.details.push(ele);
              } else {
              }
            });
            this.reset();
          } else {
            this.reset();
            this.$u.toast(res.MSG[0].MESSAGE);
          }
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}
.headerTitle {
  padding: 20rpx;
  font-weight: 600;
  .items {
    line-height: 40rpx;
  }
}
.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 - 480rpx);
  padding: 0rpx 20rpx;
  margin-top: 20rpx;
}
.cardContent {
  border-radius: 8px;
  background: #fff;
  margin-bottom: 20rpx;
}
.listItemTitle {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 2px solid #f8f8f8;
  .u-btn {
    width: 150rpx;
    margin: 0px;
    margin-top: 10rpx;
  }
  .item {
    line-height: 50rpx;
    color: #333;
    font-size: 28rpx;
    font-weight: 500;
    word-break: break-all;
    font-weight: 600;
  }
}
.listBottom {
  .bottomTitle {
    height: 80rpx;
    position: relative;
    .desc {
      color: #bbb;
      font-size: 24rpx;
      line-height: 80rpx;
      padding-left: 20rpx;
    }
    .topIcons {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #aaa;
    }
  }
  .bottomBox {
    padding: 20rpx;
    .bottomItem {
      background: #f8f8f8;
      padding: 20rpx;
      margin-bottom: 20rpx;
      .items {
        color: #333;
        font-size: 24rpx;
        height: 40rpx;
        line-height: 40rpx;
      }
    }
  }
}
/deep/ .u-sticky {
  top: 0 !important;
  background: #fff;
}
.checkedCase {
  margin-top: 10rpx;
}
</style>
