<template>
  <view class="page-container">
    <scroll-view class="page-body" scroll-y>
      <view class="sync-container">
        <view class="sync-icon">☁️</view>
        <view class="sync-title">云端数据同步</view>
        <view class="sync-desc">
          同步内容：本地表单数据、人员数据、<br>设施数据上传至云端服务器
        </view>
        <view class="sync-warning">
          ⚠️ 同步前建议联系管理人员，<br>防止数据缺失或覆盖
        </view>
        <view class="sync-actions">
          <button class="btn btn-outline" @click="handleCancel">取消</button>
          <button class="btn btn-primary" @click="handleSync">继续同步</button>
        </view>
        <view class="sync-last">
          <text class="last-label">上次同步时间</text>
          <text class="last-time">2026-05-14 06:30:12</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    handleCancel() {
      uni.showToast({ title: '已取消', icon: 'none' })
    },
    handleSync() {
      uni.showLoading({ title: '同步中...' })
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({ title: '同步成功', icon: 'success' })
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.sync-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px $spacing-md;
}

.sync-icon {
  font-size: 64px;
  margin-bottom: $spacing-md;
}

.sync-title {
  font-size: $font-size-xl;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: $spacing-sm;
}

.sync-desc {
  font-size: $font-size-base;
  color: $text-secondary;
  text-align: center;
  line-height: 1.8;
  margin-bottom: $spacing-xl;
}

.sync-warning {
  background: $tag-orange;
  border-radius: $border-radius-md;
  padding: 14px;
  width: 100%;
  margin-bottom: $spacing-xl;
  font-size: $font-size-sm;
  color: #d48806;
  line-height: 1.6;
}

.sync-actions {
  display: flex;
  gap: $spacing-base;
  width: 100%;
}

.sync-last {
  margin-top: $spacing-xl;
  text-align: center;

  .last-label {
    display: block;
    font-size: $font-size-sm;
    color: $text-placeholder;
  }

  .last-time {
    display: block;
    font-size: $font-size-md;
    color: $text-primary;
    font-weight: 500;
    margin-top: $spacing-xs;
  }
}
</style>
