<template>
  <view class="lists">
    <StickyNavBar :class="{ meteringTab: current !== 0 }">
      <NavBar title="装箱"></NavBar>
      <view class="selectSheet">
        <u-tabs
          :list="list"
          :is-scroll="false"
          :current="current"
          @change="changeTab"
        ></u-tabs>
      </view>
      <view class="" v-if="current === 0">
        <view class="btn">
          <view class="boxSelect">
            <u-picker
              v-model="show"
              mode="selector"
              :default-selector="[0]"
              range-key="text"
              :range="actionSheetList"
              @confirm="actionSheetCallback"
            ></u-picker>
            <u-input
              v-model="form.ZZXFS"
              placeholder="请选择装箱方式"
              type="select"
              :border="true"
              @click="show = true"
            />
          </view>
          <uni-easyinput
            prefixIcon="search"
            class="topSearch"
            v-model="blNum"
            focus
            placeholder="请扫描箱码"
            @change="handleInputNlpla"
            :disabled="form.ZZXFS === 'PL'"
          ></uni-easyinput>
          <uni-easyinput
            prefixIcon="search"
            :disabled="isDisabled"
            v-model="wxparams"
            :focus="isFocus"
            placeholder="请扫描产品包装条码/外箱码"
            @input="handleInputPlnr"
          ></uni-easyinput>
          <checkbox-group style="margin-top: 10rpx;" @change="checkedChange">
						<checkbox value="r1" :checked="checkedBox" />是否审核
					</checkbox-group>
        </view>
        <view class="total">
          <view class="left">明细</view>
          <view class="right">
            数量：
            <text class="">{{ goodsList.length }}</text>
          </view>
        </view>
      </view>
    </StickyNavBar>
    <relationships
      v-show="current === 0"
      :list="goodsList"
      :isEdit="isEdit"
      @deleGonds="deleGonds"
    />
    <metering
      v-show="current === 1"
      :form="form"
      :isBL="isBL"
      :isEdit="isEdit"
      @plinput="changePLBLForm"
    />
    <unpacking v-show="current === 2" />
    <BottomBtn
      :btnArr="btnArr"
      @getBtnHandle="getBtnHandle"
      v-if="current !== 2"
    ></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 relationships from "./relationships.vue";
import metering from "./metering.vue";
import unpacking from "./unpacking.vue";
import { parseTime } from "@/utils/ruoyi";
import { requestMock } from "./mock";
export default {
  components: {
    StickyNavBar,
    ContentLoadingMore,
    BottomBtn,
    relationships,
    metering,
    unpacking,
  },
  data() {
    return {
      type: "select",
      show: false,
      border: true,
      // 是否编辑状态
      isEdit: false,
      isBL: false,
      list: [
        {
          name: "装箱关联",
        },
        {
          name: "计量称重",
        },
        {
          name: "解除装箱",
        },
      ],
      current: 0,
      checkedBox: false,
      status: "loadmore",
      btnArr: [
        {
          style: "",
          type: "warning",
          text: "返回",
          way: "goBack",
        },
        {
          style: "",
          type: "primary",
          text: "重置",
          way: "resetState",
        },
        {
          style: "",
          type: "primary",
          text: "提交",
          way: "goSubmit",
        },
      ],
      // 扫描的PL
      wxparams: "",
      // 扫描的BL
      blNum: "",
      isFocus: false,
      isDisabled: false,
      actionSheetList: [
        {
          text: "BL+PL",
        },
        {
          text: "PL",
        },
      ],
      form: {
        ZZXFS: "BL+PL",
        ZXSPE: "", //箱规格（cm）
        ZXVOLUM: "", //体积(m132)
        ZXNTGEW: "", //箱重（kg）
        NTGEW: "", //净重（kg）
        BRGEW: "", //毛重(kg)
        LONG: "", //长
        WIDE: "", //宽
        HIGH: "", //高
        updkz: "I",
        datum: "", //扫描日期
        uzeit: "", //扫描时间
        uname: "admin", //扫描人
        ZXTEXT: "",
        ZTEXT: "",
      },
      goodsList: [],
    };
  },
  computed: {},
  methods: {
    /**
     * 重置
     */
    resetState() {
      this.goodsList = []
      this.form = {
        ZZXFS: "BL+PL",
        ZXSPE: "", //箱规格（cm）
        ZXVOLUM: "", //体积(m132)
        ZXNTGEW: "", //箱重（kg）
        NTGEW: "", //净重（kg）
        BRGEW: "", //毛重(kg)
        LONG: "", //长
        WIDE: "", //宽
        HIGH: "", //高
        updkz: "I",
        datum: "", //扫描日期
        uzeit: "", //扫描时间
        uname: "admin", //扫描人
        ZXTEXT: "",
        ZTEXT: "",
      }
      this.isBL = false;
      this.isEdit = false;
    },
    checkedChange(){
			this.checkedBox = !this.checkedBox
		},
    searchCaseInfo(blpl) {
      // 判空
      if (!blpl) return;
      // 是否BL
      const isBL = blpl.startsWith("BL");
      this.isBL = isBL;

      // 验证是否有重复
      if (this.goodsList.find((v) => v.ZCODE == blpl || v.PLNR == blpl)) {
        this.$u.toast("请勿重复扫描！");
        return this.reset();
      }
      // 查询是否装箱
      const params = {
        ZCODE: isBL ? blpl : "",
        PLNR: isBL ? "" : blpl,
      };
      this.$u.api.sapApi.sapCaseInfo(params).then(({ DATA: res }) => {
        this.isEdit = !!res.length && isBL;
        // 如果已经装箱
        if (res.length) {
          // 扫描的PL
          if (!isBL) {
            const [plInfo] = res;
            // 如果有规格，需要解析出长宽高
            if (/^\d+\*\d+\*\d+$/.test(plInfo.ZXSPE)) {
              const [LONG, WIDE, HIGH] = plInfo.ZXSPE.split("*");
              plInfo.LONG = LONG;
              plInfo.WIDE = WIDE;
              plInfo.HIGH = HIGH;
            }
            this.goodsList.push({ ...plInfo });
          } else {
            this.goodsList = res.map((v) => {
              // 如果有规格，需要解析出长宽高
              if (/^\d+\*\d+\*\d+$/.test(v.ZXSPE)) {
                const [LONG, WIDE, HIGH] = v.ZXSPE.split("*");
                v.LONG = LONG;
                v.WIDE = WIDE;
                v.HIGH = HIGH;
              }
              return v;
            });
            this.form = this.goodsList[0];
          }
        } else {
          if (!isBL) {
            console.log("没有装箱的PL");
            const plInfo = { PLNR: blpl };
            // 获取已经扫描过的最后一个PL信息，如果存在需要他的称重信息
            const lastPLInfo = this.goodsList.at(-1);
            const weightInfo = {
              ZXVOLUM: "",
              ZXNTGEW: "",
              NTGEW: "",
              BRGEW: "",
              LONG: "",
              WIDE: "",
              HIGH: "",
            };
            if (lastPLInfo) {
              weightInfo.ZXVOLUM = lastPLInfo.ZXVOLUM;
              weightInfo.ZXNTGEW = lastPLInfo.ZXNTGEW;
              weightInfo.NTGEW = lastPLInfo.NTGEW;
              weightInfo.BRGEW = lastPLInfo.BRGEW;
              weightInfo.LONG = lastPLInfo.LONG;
              weightInfo.WIDE = lastPLInfo.WIDE;
              weightInfo.HIGH = lastPLInfo.HIGH;
            }
            this.goodsList.push({ ...plInfo, ...weightInfo });
          }
        }
        console.log(this.goodsList, "goodsList-----");

        // 默认设置为扫描的第一项
        if (!this.form.PLNR) {
          this.form = this.goodsList[0];
        }
      });
    },
    goSubmit() {
      if (this.goodsList.length === 0) {
        this.$u.toast("暂无提交数据");
        return;
      }

      if (!this.blNum && this.form.ZZXFS === "BL+PL") {
        this.$u.toast("请扫描箱码");
        return;
      }
      // 是否超过45kg
      const NTGEW = this.goodsList.reduce((acc, cur) => acc + +cur.NTGEW, 0);
      if (NTGEW > 45) {
        uni.showModal({
          title: "提示",
          content: "净重超过45KG，是否继续提交？",
          success: (res) => {
            if (res.confirm) {
              console.log("用户点击确定");
              this.subRequest();
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      } else {
        this.subRequest();
      }

      // if (
      //   !this.form.long ||
      //   !this.form.wide ||
      //   !this.form.high ||
      //   !this.form.brgew ||
      //   !this.form.zxntgew
      // ) {
      //   uni.showModal({
      //     title: "提示",
      //     content: "还未填写计量称重信息！是否继续提交？",
      //     success: (res) => {
      //       if (res.confirm) {
      //         console.log("用户点击确定");
      //         this.subRequest();
      //       } else if (res.cancel) {
      //         console.log("用户点击取消");
      //       }
      //     },
      //   });
      // } else {
      // }
    },
    // 请求发送
    subRequest() {
      const arr = [];
      this.goodsList.forEach((ele) => {
        arr.push({
          ...ele,
          werks: this.vuex_user_factory,
          zxspe: ele.LONG + "*" + ele.WIDE + "*" + ele.HIGH,
          ntgew: +ele.BRGEW - ele.ZXNTGEW,
          zcode: this.form.ZZXFS === "PL" ? "" : this.blNum,
          datum: parseTime(new Date(), "{y}{m}{d}"),
          uzeit: parseTime(new Date(), "{h}{i}{s}"),
          zstatus: this.checkedBox ? 'Y': 'N',
          UPDKZ: ele.ZCODE && ele.PLNR ? 'U' : 'I'
        });
      });
      this.$u.api.sapApi.sapCasePlnr(arr).then((res) => {
        if (!Array.isArray(res)) {
          return;
        }
        if (res.every((item) => item.TYPE === "S")) {
          this.$u.toast(res[0].MESSAGE);
          this.resetData();
        }
        const foundObject = res.find((item) => item.TYPE === "E");
        if (foundObject && foundObject.MESSAGE) {
          this.$u.toast(foundObject.MESSAGE);
        }
      });
    },
    // 重置数据
    resetData() {
      this.$nextTick(() => {
        this.goodsList = [];
        this.form.brgew = "";
        this.current = 0;
      });
    },
    // 删除
    deleGonds(idx) {
      this.goodsList.splice(idx, 1);
    },
    /**
     * 扫描BL
     * 查询是否已经有装箱，有装箱情况只能做修改称重操作
     * @param {*} e
     */
    handleInputNlpla(e) {
      this.searchCaseInfo(e);
    },
    changePLBLForm(blpl) {
      console.log("changePLBLForm", "00000");
      if (!this.isBL) {
        const info = this.goodsList.find((v) => v.PLNR == blpl);
        this.form = info;
      }
    },
    reset() {
      setTimeout(() => {
        this.isFocus = true;
        this.isDisabled = false;
        this.wxparams = "";
      }, 1000);
    },
    handleInputPlnr(e) {
      this.isFocus = false;
      this.isDisabled = true;
      if (this.goodsList.some((item) => item === e)) {
        this.$u.toast("已经存在当前条码");
        this.reset();
        return;
      }
      this.searchCaseInfo(e);
      this.reset();
      return;
      e && this.goodsList.push(e);
      this.reset();
    },
    // 点击actionSheet回调
    actionSheetCallback(index) {
      this.form.ZZXFS = this.actionSheetList[index].text;
      if (this.form.ZZXFS === "PL") {
        this.blNum = "";
      }
    },
    // 加载更多
    onReachBottom() {
      console.log("加载更多inventoryCounting");
    },
    getBtnHandle(row) {
      console.log("getBtnHandle", row);
      this[row.way]();
    },
    goBack() {
      console.log("返回了");
      uni.navigateBack();
    },
    changeTab(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.selectSheet {
  border-bottom: 1px solid #ccc;
}

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

.contentMore {
  margin: 20rpx;
}

page {
  background: #f8f8f8;
}

.headerTitle {
  padding: 20rpx;
  font-weight: 600;

  .items {
    line-height: 40rpx;
  }
}

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

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

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

  .line {
    margin: 0px 10rpx;
  }
}

.meteringTab {
  // height: 200rpx;
  /deep/.u-sticky-wrap {
    height: 170rpx !important;
  }
}

.topSearch {
  margin-bottom: 20rpx;
}
</style>
