<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="th001" class="under">
          <input
            v-model="daohuoForm.th001"
            type="text"
            @confirm="inputCC"
            :placeholder="$t('委外进货单别')"
          >
          </input>
        </u-form-item>
        <u-form-item prop="th002" class="under">
          <input
            v-model="daohuoForm.th002"
            :focus="isFocus"
            type="text"
            @confirm="inputCC"
            :placeholder="$t('委外进货单号')"
          >
          </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: {
					th001: "5901",
					th002: ""
				},
        rules: {
					th001: { required: true,type: 'string', trigger: ['blur'], errorMessage: "11" },
					th002: { 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.th001 = arr[0]
            this.daohuoForm.th002 = arr[1]
            this.submit()
          }
        } else {
          this.submit()
        }
      }
    },
      submit(){
        if(!this.daohuoForm.th001) return this.$u.toast(i18n.t('请输入委外进货单别'));
        if(!this.daohuoForm.th002) return this.$u.toast(i18n.t('请输入委外进货单号'));
        this.loading = true;
        this.$u.api.mocthgetforcheck({
          th001: this.daohuoForm.th001,
          th002: this.daohuoForm.th002
        })
        .then(res => {
        this.loading = false;
          if (res.success) {
            if (res.data) {
              uni.navigateTo({
                url: '/pages/mocthforcheck/Info?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>
  