<template>
  <view class="page">
    <NavBar title="补货单" :showBack="true" />

    <!-- 状态筛选 -->
    <view class="filter-bar">
      <view
        v-for="item in statusTabs"
        :key="item.value"
        :class="['filter-tag', { active: currentStatus === item.value }]"
        @click="switchStatus(item.value)"
      >
        {{ item.label }}
      </view>
    </view>

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

    <!-- 空状态 -->
    <view class="empty-state" v-else-if="list.length === 0">
      <text class="empty-text">暂无补货单</text>
    </view>

    <!-- 补货单列表 -->
    <scroll-view
      class="list-scroll"
      scroll-y
      @scrolltolower="loadMore"
      v-else
    >
      <view
        class="order-card"
        v-for="order in list"
        :key="order.id"
        @click="goToDetail(order)"
      >
        <view class="card-header">
          <text class="order-no">{{ order.orderNo }}</text>
          <text :class="['status-tag', statusColor(order.status)]">
            {{ statusText(order.status) }}
          </text>
        </view>

        <view class="card-body">
          <view class="info-row">
            <text class="info-label">设备</text>
            <text class="info-value">{{ order.deviceName || order.deviceId }}</text>
          </view>
          <view class="info-row" v-if="order.supplierName">
            <text class="info-label">供应商</text>
            <text class="info-value">{{ order.supplierName }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">商品数</text>
            <text class="info-value">{{ order.itemCount || 0 }} 种</text>
          </view>
          <view class="info-row">
            <text class="info-label">总数量 / 金额</text>
            <text class="info-value">
              {{ order.totalQuantity || 0 }} 件 /
              ¥{{ (order.totalAmount || 0).toFixed(2) }}
            </text>
          </view>
          <view class="info-row" v-if="order.expectedArrivalTime">
            <text class="info-label">预计到货</text>
            <text class="info-value">{{ order.expectedArrivalTime }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">创建时间</text>
            <text class="info-value">{{ order.createTime }}</text>
          </view>
        </view>
      </view>

      <view class="load-more" v-if="hasMore">
        <text class="load-more-text">上拉加载更多</text>
      </view>
      <view class="load-more" v-else-if="list.length > 0">
        <text class="load-more-text">- 没有更多了 -</text>
      </view>
    </scroll-view>

    <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 { getReplenisherOrders } from '@/api/replenish';

const loading = ref(true);
const list = ref<any[]>([]);
const currentStatus = ref<number | undefined>(undefined);
const page = ref(1);
const pageSize = 10;
const total = ref(0);
const hasMore = ref(true);

const statusTabs = [
  { label: '全部', value: undefined },
  { label: '草稿', value: 0 },
  { label: '已提交', value: 1 },
  { label: '已同步', value: 2 },
  { label: '已完成', value: 3 }
];

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] || '';
}

async function loadData(reset = false) {
  if (reset) {
    page.value = 1;
    list.value = [];
    hasMore.value = true;
  }
  loading.value = true;
  try {
    const data = await getReplenisherOrders({
      page: page.value,
      pageSize,
      status: currentStatus.value
    });
    const records = data?.records || [];
    if (reset) {
      list.value = records;
    } else {
      list.value.push(...records);
    }
    total.value = data?.total || 0;
    hasMore.value = list.value.length < total.value;
  } catch (e: any) {
    uni.showToast({ title: e.message || '加载失败', icon: 'none' });
  } finally {
    loading.value = false;
  }
}

function switchStatus(status: number | undefined) {
  currentStatus.value = status;
  loadData(true);
}

function loadMore() {
  if (!hasMore.value || loading.value) return;
  page.value++;
  loadData(false);
}

function goToDetail(order: any) {
  uni.navigateTo({
    url: `/pages/replenish/order-detail?id=${order.id}`
  });
}

onMounted(() => {
  loadData(true);
});
</script>

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

.filter-bar {
  display: flex;
  padding: 16rpx 24rpx;
  gap: 16rpx;
  background: $bg-color-card;
  border-bottom: 1rpx solid $border-color;
  overflow-x: auto;
  white-space: nowrap;

  .filter-tag {
    padding: 10rpx 24rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
    color: $text-color-tertiary;
    background: $bg-color-page;
    flex-shrink: 0;

    &.active {
      background: $primary-color;
      color: #fff;
      font-weight: 600;
    }
  }
}

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

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  .empty-text {
    font-size: 28rpx;
    color: $text-color-tertiary;
  }
}

.list-scroll {
  height: calc(100vh - 200rpx);
  padding: 16rpx 24rpx;
}

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

  &:active {
    background: $bg-color-secondary;
  }

  .card-header {
    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: 28rpx;
      font-weight: 600;
      color: $text-color-primary;
    }

    .status-tag {
      padding: 4rpx 16rpx;
      border-radius: 8rpx;
      font-size: 22rpx;
      font-weight: 500;

      &.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; }
    }
  }

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

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

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

.load-more {
  text-align: center;
  padding: 24rpx 0;

  .load-more-text {
    font-size: 24rpx;
    color: $text-color-muted;
  }
}
</style>
