<template>
  <view class="loading-spinner" v-if="show">
    <view class="spinner-container">
      <view class="spinner" :class="{ spinning: spinning }"></view>
      <text v-if="text" class="loading-text">{{ text }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 定义属性
const props = defineProps({
  show: {
    type: Boolean,
    default: true
  },
  text: {
    type: String,
    default: '加载中...'
  },
  size: {
    type: String,
    default: 'normal',
    validator: (value) => ['small', 'normal', 'large'].includes(value)
  }
})

// 响应式数据
const spinning = ref(false)

// 启动动画
onMounted(() => {
  spinning.value = true
})

// 清理动画
onUnmounted(() => {
  spinning.value = false
})
</script>

<style scoped>
.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60rpx;
}

.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f0f0f0;
  border-top: 4rpx solid #1890ff;
  border-radius: 50%;
}

.spinner.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999;
  text-align: center;
}

/* 尺寸变体 */
.spinner.size-small {
  width: 40rpx;
  height: 40rpx;
  border-width: 3rpx;
}

.spinner.size-large {
  width: 80rpx;
  height: 80rpx;
  border-width: 5rpx;
}
</style>