<template>
  <ifrm ref="ifrm">
    <u-sticky offset-top="0">
      <uni-forms ref="wrForm" class="formBox">
        <uni-forms-item>
          <input class="uni-input-border" v-model="processCardNo" placeholder="请扫描流程卡号"
            placeholder-class="input-placeholder" :focus="processFocus" @input="handleCardNoConfirm" />
        </uni-forms-item>
        <uni-forms-item>
          <view class="bottom-input-row">
            <view class="weight-input-wrapper">
              <view class="input-box">
                <input class="input-field" v-model="weight" type="digit" placeholder="重量 (克)"
                  placeholder-class="input-placeholder" />
              </view>
            </view>
            <button class="submit-btn" :class="{ disabled: !canSubmit }" :disabled="!canSubmit" @tap="handleSubmit">
              提交
            </button>
          </view>
        </uni-forms-item>
      </uni-forms>
      <!-- 信息显示区域 -->
      <t-table style="margin-top: 20rpx">
        <t-tr>
          <t-td>车间订单号</t-td>
          <t-td>{{ tableObj.ypCode }}</t-td>
        </t-tr>

        <t-tr>
          <t-td>零件编码</t-td>
          <t-td>{{ tableObj.partCode }}</t-td>
        </t-tr>
        <t-tr>
          <t-td>零件名称</t-td>
          <t-td>{{ tableObj.partName }}</t-td>
        </t-tr>
        <t-tr>
          <t-td>流程卡号</t-td>
          <t-td>{{ tableObj.cardNo }}</t-td>
        </t-tr>
        <t-tr>
          <t-td>批次号</t-td>
          <t-td>{{ tableObj.batchNo }}</t-td>
        </t-tr>
        <t-tr>
          <t-td>数量</t-td>
          <t-td>{{ tableObj.ypQty }}</t-td>
        </t-tr>
      </t-table>
    </u-sticky>
  </ifrm>
</template>

<script>
import ifrm from "@/pages/index/ifrm";
import tTable from "@/components/t-table/t-table.vue";
import tTh from "@/components/t-table/t-th.vue";
import tTr from "@/components/t-table/t-tr.vue";
import tTd from "@/components/t-table/t-td.vue";
import scan from '../../mixin/scan.js';
export default {
  components: {
    ifrm,
    tTable,
    tTh,
    tTr,
    tTd,
  },
  mixins: [scan], // 引入 mixin
  data() {
    return {
      processCardNo: "",
      oldProcessCardNo: '',
      processFocus:true,
      weight: "",
      tableObj: {},
      time: null,
      orderInfo: {
        orderNo: "",
        materialCode: "",
        materialName: "",
        specification: "",
        batch: "",
        customerName: "",
        plannedQuantity: "",
        currentProcess: "",
        currentStatus: "",
        remarks: "",
      },
    };
  },
  computed: {
    canSubmit() {
      return this.processCardNo && this.weight;
    },
  },
  onNavigationBarButtonTap(btn) {
    this.$refs.ifrm.topMenuClick(btn);
  },
  methods: {
    clearInput(){
      this.oldProcessCardNo = ''
      this.processCardNo = ''

    },
    handleCardNoConfirm(e) {
      clearTimeout(this.time)

      if (e.detail.value.length == 0) {
        this.oldProcessCardNo = ''
        this.processCardNo = e.detail.value
      }
      if (e.detail.value.length < this.oldProcessCardNo.length) {
        this.processCardNo = e.detail.value
        this.oldProcessCardNo = this.processCardNo
        return
      }
      this.time = setTimeout(() => {
        if (this.processCardNo.length >= 1) {
          uni.showLoading({
            title: '请稍候...'
          })
          this.processCardNo = e.detail.value.slice(this.oldProcessCardNo.length)
          this.oldProcessCardNo = this.processCardNo
          this.$u.api.queryCardNo({ cardNo: this.processCardNo }).then((res) => {
            this.tableObj = res.data;
            this.clearInput()
            uni.hideLoading()
          }).catch(err=>{
            uni.hideLoading()
            this.clearInput()
          })
        }
      }, 1500);
    },
    // 处理提交
    handleSubmit() {
      if (!this.canSubmit) return;

      // 提交称重数据
      this.submitWeight();
    },

    // 提交称重数据
    submitWeight() {
      // 实际项目中这里应该调用API提交数据
      uni.showLoading({
        title: "提交中...",
      });

      setTimeout(() => {
        uni.hideLoading();
        let query_ = {
          cardNo: this.processCardNo,
          actualWeight: this.weight,
        };

        this.$u.api.getWeighing(query_).then((res) => {
          uni.showToast({
            title: "提交成功",
            icon: "success",
          });
          this.processCardNo = "";
          this.weight = "";
          this.tableObj = {};
        });
        // if (this.processCardNo !== "PC99999") {
        // uni.showToast({
        //   title: "提交成功",
        //   icon: "success",
        // });

        //   // 清空输入
        //   setTimeout(() => {
        // this.processCardNo = "";
        // this.weight = "";
        //   }, 1500);
        // }
      }, 1000);
    },
  },
};
</script>

<style scoped>
/* 输入区域 */

.input-wrapper {
  margin-bottom: 12px;
}

.input-box {
  position: relative;
  height: 50px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding-left: 40px;
  padding-right: 12px;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  top: 16px;
  width: 18px;
  height: 18px;
}

.icon {
  width: 100%;
  height: 100%;
}

.input-field {
  flex: 1;
  font-size: 16px;
  color: #1d293d;
}

.input-placeholder {
  color: #90a1b9;
  font-size: 16px;
}

/* 重量输入和提交按钮行 */
.bottom-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.weight-input-wrapper {
  flex: 1;
}

.submit-btn {
  width: 88px;
  height: 50px;
  background-color: #155dfc;
  border-radius: 10px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border: none;
  padding: 0;
  line-height: 50px;
}

.submit-btn.disabled {
  opacity: 0.5;
}
</style>
