<template>
    <view class="page">
      <StickyNavBar>
        <NavBar :title="$t('到货条码打印')"></NavBar>
      </StickyNavBar>
      <u-form ref="daohuoForm" :modelValue="daohuoForm" :rules="rules" class="login-form">
        <u-form-item prop="cc001" class="under">
          <input
            v-model="daohuoForm.cc001"
            @confirm="inputCC"
            type="text"
            :placeholder="$t('到货单别')"
          >
          </input>
        </u-form-item>
        <u-form-item prop="cc002" class="under">
          <input
            v-model="daohuoForm.cc002"
            :focus="isFocus"
            type="text"
            :placeholder="$t('到货单号')"
            @confirm="inputCC"
          >
          </input>
        </u-form-item>
        <u-form-item style="width:100%;">
          <button
            :loading="loading"
            size="medium"
            type="primary"
            style="width:95%;margin-top: 50rpx"
            @click="submit()"
          >
            <span>{{$t('确定')}}</span>
          </button>
        </u-form-item>
      </u-form>
    </view>
  </template>
  
  <script>
import i18n from '../../lang/index'

  import StickyNavBar from "@/components/StickyNavBar/index.vue";
  import ContentLoadingMore from "@/components/ContentLoadingMore/index.vue";
  export default {
    components: {
      StickyNavBar,
      ContentLoadingMore,
    },
    data() {
      return {
        number: 0,
        totalNum: 0,
        show: true,
        wxparams: "",
        loading: false,
        isFocus: false,
        daohuoForm: {
					cc001: "3701",
					cc002: ""
				},
        rules: {
					cc001: { required: true,type: 'string', trigger: ['blur'], errorMessage: "11" },
					cc002: { required: true, type: 'string',trigger: ['blur'], errorMessage: "11" }
				},
      }
    },
    created() {
      this.$nextTick(() => {
        this.isFocus = true;
        uni.hideKeyboard()
      });
    },
    methods: {
      inputCC(e){
        if(e && e.detail.value) {
          if(e.detail.value.includes("-")){
            const arr = e.detail.value.split("-")
            if (arr.length === 2) {
              this.daohuoForm.cc001 = arr[0]
              this.daohuoForm.cc002 = arr[1]
              this.submit()
            }
          } else {
            this.submit()
          }
        }
      },
      submit(){
        if(!this.daohuoForm.cc001) return this.$u.toast(i18n.t('请输入到货单别'));
        if(!this.daohuoForm.cc002) return this.$u.toast(i18n.t('请输入到货单号'));
        this.loading = true;
        this.$u.api.getforprint({
          cc001: this.daohuoForm.cc001,
          cc002: this.daohuoForm.cc002
        })
        .then(res => {
        this.loading = false;
          if (res.success) {
            if (res.data) {
              uni.navigateTo({
                url: '/pages/abnormal/abnormalRemoveInfo?info=' + encodeURIComponent(JSON.stringify(res.data))
              });
            } else {
              this.$u.toast(i18n.t('未找到到货单'))
            }
          } else {
          this.$u.toast(res.errorMessage);
        }
        });
      }
    },
  };
  </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;
  }
  ::v-deep .u-sticky {
    top: 0 !important;
    background: #fff;
  }
  page {
    position: relative;
    width: 100%;  height: 100%;
  }
  .login-form {
    position: absolute;
    border-radius: 6px;
    background: #ffffff;
    width: 80%;
    left: 50%;
    margin-top: 70rpx;
    transform: translateX(-50%);
    padding: 25px 25px 5px 25px;
  }
  </style>
  