<template>
  <ifrm>
    <uni-forms ref="wrForm" class="formBox" label-position="top">
      <uni-forms-item label="站点码：" label-width="100px">
        <view class="bottom-input-row">
          <view class="weight-input-wrapper">
            <view class="input-box">
              <input
                type="text"
                v-model="stationCode"
                @confirm="handleStationConfirm"
                placeholder="站点码"
                class="uni-input-border"
                confirm-type="done"
                :focus="stationInputFocus"
              />
            </view>
          </view>
          <button
            @tab="handlePickup"
            class="submit-btn"
            :disabled="(stationCode != ''&&currentBox!=null) ? false : true"
          >
            取货
          </button>
        </view>
        <view v-if="activeStation" class="station-info">
          <view class="station-left">
            <text class="station-check">✓</text>
            <view class="station-details">
              <text class="station-name">{{ activeStation.stationName }}</text>
              <text class="station-code">{{ activeStation.stationCode }}</text>
            </view>
          </view>
          <view class="station-right">
            <text class="station-label">站点状态</text>
            <text
              class="station-status"
              :class="currentBox ? 'status-busy' : 'status-idle'"
            >
              {{ activeStation.statusDesc}}
            </text>
          </view>
        </view>
      </uni-forms-item>
    </uni-forms>

    <scroll-view class="details-scroll" scroll-y>
      <view v-if="!activeStation" class="empty-state">
        <text>请扫描站点码查询待取货物料</text>
      </view>
      <view v-else-if="!currentBox" class="no-box-state">
        <text>该站点当前无物料箱</text>
      </view>

      <view v-else class="box-container">
        <view class="box-card">
          <view class="box-header">
            <view class="box-title-section">
              <text class="box-icon">📦</text>
              <view class="box-title-info">
                <text class="box-label">当前物料箱</text>
                <text class="box-code">{{ currentBox.boxCode }}</text>
              </view>
            </view>
            <view class="box-summary">
              <text class="box-summary-label">合计</text>
              <text class="box-summary-value">
                {{ currentBox.orders.length }}单 | {{ totalWeight }}g
              </text>
            </view>
          </view>

          <view class="box-orders">
            <view class="orders-header">
              <text class="orders-icon">📋</text>
              <text class="orders-title">箱内明细</text>
            </view>
            <view class="orders-list">
              <view
                v-for="(order, idx) in currentBox.orders"
                :key="idx"
                class="order-item"
              >
                <view class="order-info">
                  <text class="order-no">{{ order.orderNo }}</text>
                  <text class="order-part">零件号: {{ order.partNo }}</text>
                </view>
                <text class="order-weight">{{ order.weight }} g</text>
              </view>
            </view>
          </view>
        </view>

        <!-- <view class="action-section">
          <button @click="handlePickup" class="pickup-btn">
            <text class="pickup-icon">📦</text>
            <text class="pickup-text">确认取货 (解绑)</text>
          </button>
        </view> -->
      </view>
    </scroll-view>

    <!-- <view v-if="!activeStation" class="help-tip">
      <view class="tip-content">
        <text class="tip-icon">ℹ️</text>
        <text class="tip-text">测: ST001 (有货), ST002 (无货)</text>
      </view>
    </view> -->
  </ifrm>
</template>

<script>
import ifrm from "@/pages/index/ifrm";
export default {
  components: {
    ifrm,
  },
  data() {
    return {
      stationCode: "",
      activeStation: null,
      boxData:null,
      currentBox: null,
      stationInputFocus: true,
    };
  },
  computed: {
    totalWeight() {
      if (!this.currentBox || !this.currentBox.orders) return 0;
      return this.currentBox.orders.reduce((sum, o) => sum + o.weight, 0);
    },
  },
  methods: {
    // 站点查询数据
    handleStationConfirm() {
      const code = this.stationCode.trim();
      if (!code) return;

      this.$u.api
        .getStationNameBoxbarcode({ stationCode: this.stationCode })
        .then((res) => {
          this.activeStation = res.data.station;
          this.boxData = res.data.boxbarcodeDetailsVO;
          this.stationCode = "";
        });

    },
    // 取货
    handlePickup() {
      if (!this.currentBox) return;
      const pickedBoxCode = this.currentBox.boxCode;
      this.$u.api
        .receiveOrder({ stationCode: this.stationCode })
        .then((res) => {
          console.log("物料解绑", res.data);
          this.currentBox = null;
          uni.showToast({
            title: `物料箱 ${pickedBoxCode} 取货(解绑)成功!`,
            icon: "success",
          });

          this.stationCode = "";
          this.activeStation = null;
          this.stationInputFocus = true;
        });
    },

    handleReset() {
      this.activeStation = null;
      this.currentBox = null;
      this.stationCode = "";
      this.stationInputFocus = true;
    },
  },
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;
  user-select: none;
  font-size: 26rpx;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6rpx 16rpx;
  background-color: #1d4ed8;
  color: #ffffff;
  flex-shrink: 0;
  z-index: 20;
}

.header-title {
  font-weight: bold;
  font-size: 28rpx;
  letter-spacing: 1rpx;
}

.header-btn {
  background-color: #1e40af;
  color: #ffffff;
  padding: 4rpx 16rpx;
  border-radius: 4rpx;
  font-size: 22rpx;
  font-weight: bold;
  border: 2rpx solid #2563eb;
}

.header-btn:active {
  background-color: #1e3a8a;
}

.content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: #f8fafc;
}

.scan-section {
  background-color: #ffffff;
  border-bottom: 4rpx solid #cbd5e1;
  flex-shrink: 0;
  padding: 16rpx;
}

.module-header {
  display: flex;
  align-items: center;
  color: #1e293b;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.module-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}

.module-title {
  font-size: 26rpx;
}

.scan-input {
  width: 100%;
  padding: 16rpx;
  background-color: #ffffff;
  border: 4rpx solid #94a3b8;
  border-radius: 4rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #0f172a;
}

.scan-input::placeholder {
  color: #94a3b8;
  font-weight: normal;
}

.station-info {
  margin-top: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #d1fae5;
  border: 2rpx solid #6ee7b7;
  padding: 16rpx;
  border-radius: 4rpx;
}

.station-left {
  display: flex;
  align-items: center;
}

.station-check {
  font-size: 40rpx;
  color: #059669;
  margin-right: 12rpx;
}

.station-details {
  display: flex;
  flex-direction: column;
}

.station-name {
  color: #065f46;
  font-weight: bold;
  font-size: 28rpx;
}

.station-code {
  color: #059669;
  font-size: 22rpx;
}

.station-right {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.station-label {
  color: #475569;
  font-size: 22rpx;
}

.station-status {
  font-weight: bold;
  font-size: 28rpx;
}

.status-busy {
  color: #1d4ed8;
}

.status-idle {
  color: #64748b;
}

.details-scroll {
  flex: 1;
}

.empty-state {
  text-align: center;
  padding: 64rpx 0;
  color: #94a3b8;
  font-weight: 500;
  font-size: 24rpx;
  margin: auto;
}

.no-box-state {
  text-align: center;
  padding: 64rpx 0;
  color: #64748b;
  font-weight: bold;
  font-size: 28rpx;
  background-color: #f1f5f9;
  border: 2rpx solid #e2e8f0;
  border-radius: 4rpx;
  margin-top: 16rpx;
}

.box-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.box-card {
  background-color: #ffffff;
  border: 4rpx solid #cbd5e1;
  border-radius: 4rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 16rpx;
}

.box-header {
  padding: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #eff6ff;
  border-bottom: 4rpx solid #e2e8f0;
}

.box-title-section {
  display: flex;
  align-items: center;
}

.box-icon {
  font-size: 48rpx;
  margin-right: 16rpx;
}

.box-title-info {
  display: flex;
  flex-direction: column;
}

.box-label {
  color: #64748b;
  font-size: 22rpx;
  font-weight: 500;
}

.box-code {
  font-weight: bold;
  color: #0f172a;
  font-size: 32rpx;
}

.box-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.box-summary-label {
  color: #64748b;
  font-size: 22rpx;
  font-weight: 500;
}

.box-summary-value {
  font-weight: bold;
  color: #059669;
  font-size: 28rpx;
}

.box-orders {
  padding: 16rpx;
  background-color: #ffffff;
}

.orders-header {
  display: flex;
  align-items: center;
  color: #334155;
  font-weight: bold;
  margin-bottom: 12rpx;
  padding: 0 4rpx;
}

.orders-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}

.orders-title {
  font-size: 26rpx;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx;
  background-color: #f8fafc;
  border: 2rpx solid #e2e8f0;
  border-radius: 4rpx;
}

.order-info {
  display: flex;
  flex-direction: column;
}

.order-no {
  font-weight: bold;
  color: #0f172a;
  font-size: 26rpx;
}

.order-part {
  color: #475569;
  font-size: 22rpx;
  margin-top: 4rpx;
}

.order-weight {
  font-weight: bold;
  color: #059669;
  font-size: 26rpx;
}

.action-section {
  margin-top: auto;
  padding-top: 16rpx;
  padding-bottom: 8rpx;
}

.pickup-btn {
  width: 100%;
  padding: 24rpx;
  background-color: #1d4ed8;
  color: #ffffff;
  font-weight: bold;
  border-radius: 4rpx;
  font-size: 32rpx;
  border: 4rpx solid #1e3a8a;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pickup-btn:active {
  background-color: #1e40af;
}

.pickup-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
}

.pickup-text {
  font-size: 32rpx;
}

.help-tip {
  position: absolute;
  top: 35%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0.5;
  z-index: 10;
}

.tip-content {
  background-color: #1e293b;
  color: #ffffff;
  font-size: 20rpx;
  padding: 8rpx 16rpx;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
}

.tip-icon {
  margin-right: 8rpx;
  font-size: 24rpx;
}

.tip-text {
  font-size: 20rpx;
}

.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>
