<template>
  <view style="padding: 20rpx 0">
    <view class="btn">
      <uni-easyinput
        prefixIcon="search"
        :disabled="isPack"
        v-model="wxparams"
        :focus="isFocus"
        placeholder="请扫描产品包装条码/外箱码"
        @confirm="handleConfirm"
      ></uni-easyinput>
    </view>
    <view class="cardbox">
      <view
        class="cardContent"
        v-for="(item, index) in goodsList"
        :key="item.PLNR"
      >
        <view class="listItemTitle">
          <view>
            <view class="item">PL号：{{ item }}</view>
          </view>
          <u-button v-if="!isPack" size="mini" type="primary" plain @click="deleGonds(index)">
            <u-icon name="trash" size="28"></u-icon>
            删除
          </u-button>
        </view>
      </view>
    </view>

    <BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle"></BottomBtn>
  </view>
</template>
<script>
import BottomBtn from "@/components/BottomBtn/index.vue";
import { parseTime } from "@/utils/ruoyi";
export default {
  components: {
    BottomBtn,
  },
  data() {
    return {
      isFocus: false,
      isDisabled: false,
      wxparams: "",
      goodsList: [],
      btnArr: [
        {
          style: "",
          type: "warning",
          text: "返回",
          way: "goBack",
        },
        {
          style: "",
          type: "primary",
          text: "提交",
          way: "goSubmit",
        },
      ],
      isBL: false,
      isPack: false,
    };
  },
  methods: {
    handleConfirm(e) {
      if (e.startsWith("BL")) {
        // 如果扫描的BL需要查询装箱明细
        return this.$u.api.sapApi
          .sapCaseInfo({
            ZCODE: e,
          })
          .then(({ DATA: res }) => {
            // 有装箱信息, 禁用输入框
            if (res.length) {
              this.isPack = true;
			  this.goodsList = res.map(v => v.PLNR)
            }
          });
      }
	  this.isPack = false
      if (this.goodsList.some((item) => item === e)) {
        this.$u.toast("已经存在当前条码");
        this.reset();
        return;
      }
      e && this.goodsList.push(e);
      this.reset();
    },
    deleGonds(index) {
      this.goodsList.splice(index, 1);
    },
    reset() {
      setTimeout(() => {
		this.isPack = false
        this.isFocus = true;
        this.isDisabled = false;
        this.wxparams = "";
      }, 1000);
    },
    getBtnHandle(row) {
      console.log("getBtnHandle", row);
      this[row.way]();
    },
    // 提交
    goSubmit() {
      if (!this.goodsList.length) {
        return this.$u.toast("请添加需要解除装箱的箱条码/外箱码");
      }
      const DATUM = parseTime(new Date(), "{y}{m}{d}"),
        UNAME = this.vuex_user.nickName,
        UZEIT = parseTime(new Date(), "{h}{i}{s}");
      const arr = this.goodsList.map((item) => {
        return {
          plnr: item,
          UPDKZ: "D",
          DATUM,
          UNAME,
          UZEIT,
          werks: this.vuex_user_factory,
        };
      });
      this.$u.api.sapApi.sapCasePlnr(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 = [];
		  this.reset()
        }
      });
    },
    goBack() {},
  },
};
</script>
<style scoped lang="scss">
.btn {
  padding: 10rpx 20rpx;
  background: #fff;
  .title {
    margin-top: 10rpx;
    color: #000;
    font-size: 34rpx;
  }
}

.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;
  }
}
</style>
