<template>
  <view class="page">
    <text class="title">离线补传</text>
    <view class="card"><text class="count">{{ count }}</text><text class="label">条待补传</text></view>
    <button @click="doSync" :loading="syncing" :disabled="count === 0" class="btn">{{ count === 0 ? '无待补传' : '开始补传' }}</button>
    <view v-if="result" class="result"><text :class="result.success ? 'green' : 'red'">{{ result.success ? '✓ 全部补传成功' : '剩余 ' + result.remaining + ' 条失败' }}</text></view>
  </view>
</template>

<script>
import { apiPost } from '@/common/api.js';
import { OfflineQueue } from '@/common/offline.js';

const queue = new OfflineQueue();

export default {
  data() { return { count: 0, syncing: false, result: null }; },
  onShow() { this.count = queue.getCount(); },
  methods: {
    async doSync() {
      this.syncing = true; this.result = null;
      this.result = await queue.retry(apiPost);
      this.count = queue.getCount();
      this.syncing = false;
    }
  }
};
</script>

<style>
.page { padding: 24rpx; background: #F8F8F8; min-height: 100vh; text-align: center; }
.title { font-size: 36rpx; font-weight: 700; display: block; margin-bottom: 32rpx; }
.card { background: #fff; border-radius: 16rpx; padding: 48rpx; margin-bottom: 32rpx; }
.count { font-size: 72rpx; font-weight: 800; color: #FF8A3D; display: block; }
.label { font-size: 28rpx; color: #999; margin-top: 8rpx; }
.btn { background: #155EEF; color: #fff; border-radius: 12rpx; padding: 24rpx; font-size: 32rpx; }
.btn[disabled] { opacity: 0.4; }
.result { margin-top: 32rpx; font-size: 28rpx; } .green { color: #18A999; } .red { color: #FF4D4F; }
</style>
