<template>
  <view class="qr-status">
    <!-- 加载中状态 -->
    <view v-if="status === 'loading'" class="status-loading">
      <view class="status-icon">
        <view class="loading-spinner"></view>
      </view>
      <text>生成中...</text>
    </view>

    <!-- 签到成功状态 -->
    <view v-else-if="status === 'scanned'" class="status-success">
      <view class="status-icon">
        <uni-icons type="checkmarkcircle" size="40rpx" color="#2ECC71"></uni-icons>
      </view>
      <text>签到成功！</text>
    </view>

    <!-- 错误状态（支持自定义文案） -->
    <view v-else-if="status === 'error'" class="status-error">
      <view class="status-icon">
        <uni-icons type="closecircle" size="40rpx" color="#E74C3C"></uni-icons>
      </view>
      <text>{{ errorText || '签到失败，请重试' }}</text>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from 'vue';

// 扩展Props，支持自定义错误文案
const props = defineProps({
  status: {
    type: String,
    required: true,
    default: ''
  },
  // 自定义错误文本（可选）
  errorText: {
    type: String,
    required: false,
    default: ''
  }
});
</script>

<style scoped>
/* 保留原样式，新增加载中样式 */
.qr-status {
  margin-bottom: 48rpx;
}

.status-loading,
.status-waiting,
.status-success,
.status-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  font-size: 29rpx;
}

.status-icon {
  display: flex;
  align-items: center;
}

/* 加载中样式 */
.status-loading {
  color: #FF6B35;
}
.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #E9EDF2;
  border-top-color: #FF6B35;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.status-success {
  color: #2ECC71;
}

.status-error {
  color: #E74C3C;
}


/* 旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>