<template>
  <view class="page">
    <NavBar title="补货单详情" />

    <view v-if="loading" class="loading-container">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>

    <template v-else-if="order">
      <!-- 订单头信息 -->
      <view class="header-card">
        <view class="header-row">
          <text class="order-no">{{ order.orderNo }}</text>
          <text :class="['status-tag', statusColor(order.status)]">
            {{ statusText(order.status) }}
          </text>
        </view>
        <view class="info-grid">
          <view class="info-item">
            <text class="info-label">设备</text>
            <text class="info-value">{{ order.deviceName || order.deviceId }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">供应商</text>
            <text class="info-value">{{ order.supplierName || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">仓库</text>
            <text class="info-value">{{ order.warehouseName || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">总金额</text>
            <text class="info-value price">¥{{ (order.totalAmount || 0).toFixed(2) }}</text>
          </view>
          <view class="info-item" v-if="order.expectedArrivalTime">
            <text class="info-label">预计到货</text>
            <text class="info-value">{{ order.expectedArrivalTime }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">创建时间</text>
            <text class="info-value">{{ order.createTime }}</text>
          </view>
        </view>
      </view>

      <!-- 商品明细 -->
      <view class="items-section">
        <view class="section-title">补货明细（共 {{ items.length }} 种）</view>

        <view
          class="item-card"
          v-for="(item, index) in items"
          :key="index"
        >
          <view class="item-main">
            <!-- 商品图片 -->
            <image
              v-if="item.productImage"
              :src="item.productImage"
              class="item-img"
              mode="aspectFill"
            />
            <view v-else class="item-img-placeholder">
              <text class="placeholder-text">无图</text>
            </view>

            <view class="item-info">
              <text class="item-code">{{ item.productCode || '-' }}</text>
              <text class="item-name">{{ item.productName || '未知商品' }}</text>
              <view class="item-meta">
                <text class="meta-text" v-if="item.shelfNum">层{{ item.shelfNum }}</text>
                <text class="meta-text" v-if="item.position">{{ item.position }}</text>
              </view>
            </view>
          </view>

          <view class="item-detail">
            <view class="detail-row">
              <text class="detail-label">计划数量</text>
              <text class="detail-value quantity">{{ item.plannedQuantity }}</text>
            </view>
            <view class="detail-row" v-if="item.actualQuantity != null">
              <text class="detail-label">实际数量</text>
              <text class="detail-value actual">{{ item.actualQuantity }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">单价</text>
              <text class="detail-value">
                {{ item.unitPrice != null ? '¥' + Number(item.unitPrice).toFixed(2) : '-' }}
              </text>
            </view>
            <view class="detail-row">
              <text class="detail-label">小计</text>
              <text class="detail-value price">
                ¥{{ ((item.plannedQuantity || 0) * (item.unitPrice || 0)).toFixed(2) }}
              </text>
            </view>
            <view class="detail-row" v-if="item.beforeStock != null">
              <text class="detail-label">补前库存</text>
              <text class="detail-value">{{ item.beforeStock }}</text>
            </view>
            <view class="detail-row" v-if="item.afterStock != null">
              <text class="detail-label">补后库存</text>
              <text class="detail-value after">{{ item.afterStock }}</text>
            </view>
          </view>
        </view>
      </view>
    </template>

    <CustomTabBar />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import NavBar from '@/components/NavBar.vue';
import CustomTabBar from '@/components/CustomTabBar.vue';
import { getReplenisherOrderDetail } from '@/api/replenish';

const loading = ref(true);
const order = ref<any>(null);
const items = ref<any[]>([]);

const statusMap: Record<number, string> = {
  0: '草稿', 1: '已提交', 2: '已同步', 3: '已完成', 4: '已取消'
};
const statusColorMap: Record<number, string> = {
  0: 'draft', 1: 'submitted', 2: 'synced', 3: 'done', 4: 'cancelled'
};

function statusText(status: number): string { return statusMap[status] || '未知'; }
function statusColor(status: number): string { return statusColorMap[status] || ''; }

onMounted(async () => {
  try {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1] as any;
    const id = currentPage?.options?.id;
    if (!id) {
      uni.showToast({ title: '参数错误', icon: 'none' });
      return;
    }
    const data = await getReplenisherOrderDetail(id);
    order.value = data?.order;
    items.value = data?.items || [];
  } catch (e: any) {
    uni.showToast({ title: e.message || '加载失败', icon: 'none' });
  } finally {
    loading.value = false;
  }
});
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: $bg-color-page;
  padding-bottom: 160rpx;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;

  .loading-text {
    margin-top: 16rpx;
    font-size: 26rpx;
    color: $text-color-muted;
  }
}

/* 订单头 */
.header-card {
  background: $bg-color-card;
  margin: 16rpx 24rpx;
  border-radius: 16rpx;
  padding: 24rpx;
  border: 1rpx solid $border-color;

  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    padding-bottom: 12rpx;
    border-bottom: 1rpx solid $bg-color-secondary;

    .order-no {
      font-size: 30rpx;
      font-weight: 700;
      color: $text-color-primary;
    }

    .status-tag {
      padding: 6rpx 18rpx;
      border-radius: 8rpx;
      font-size: 22rpx;
      font-weight: 600;

      &.draft { background: #f0f0f0; color: #999; }
      &.submitted { background: #fff3e0; color: #ff9800; }
      &.synced { background: #e3f2fd; color: #2196f3; }
      &.done { background: #e8f5e9; color: #4caf50; }
      &.cancelled { background: #ffebee; color: #f44336; }
    }
  }

  .info-grid {
    display: flex;
    flex-wrap: wrap;

    .info-item {
      width: 50%;
      padding: 8rpx 0;

      .info-label {
        display: block;
        font-size: 22rpx;
        color: $text-color-tertiary;
      }

      .info-value {
        font-size: 26rpx;
        color: $text-color-primary;
        font-weight: 500;

        &.price { color: $error-color; }
      }
    }
  }
}

/* 商品明细 */
.items-section {
  padding: 0 24rpx;

  .section-title {
    font-size: 28rpx;
    font-weight: 700;
    color: $text-color-primary;
    padding: 16rpx 0;
  }
}

.item-card {
  background: $bg-color-card;
  border: 1rpx solid $border-color;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;

  .item-main {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16rpx;

    .item-img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 10rpx;
      background: $bg-color-page;
      margin-right: 16rpx;
      flex-shrink: 0;
    }

    .item-img-placeholder {
      width: 80rpx;
      height: 80rpx;
      border-radius: 10rpx;
      background: $bg-color-page;
      margin-right: 16rpx;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .placeholder-text {
        font-size: 20rpx;
        color: $text-color-muted;
      }
    }

    .item-info {
      flex: 1;

      .item-code {
        display: block;
        font-size: 22rpx;
        color: $text-color-muted;
      }

      .item-name {
        display: block;
        font-size: 28rpx;
        font-weight: 600;
        color: $text-color-primary;
        margin: 4rpx 0;
      }

      .item-meta {
        display: flex;
        gap: 12rpx;

        .meta-text {
          font-size: 20rpx;
          color: $text-color-tertiary;
          background: $bg-color-page;
          padding: 2rpx 10rpx;
          border-radius: 6rpx;
        }
      }
    }
  }

  .item-detail {
    background: $bg-color-page;
    border-radius: 10rpx;
    padding: 12rpx 16rpx;

    .detail-row {
      display: flex;
      justify-content: space-between;
      padding: 6rpx 0;

      .detail-label {
        font-size: 24rpx;
        color: $text-color-tertiary;
      }

      .detail-value {
        font-size: 24rpx;
        color: $text-color-primary;

        &.quantity { font-weight: 700; color: $primary-color; }
        &.actual { font-weight: 700; color: #4caf50; }
        &.after { font-weight: 700; color: #4caf50; }
        &.price { color: $error-color; }
      }
    }
  }
}
</style>
