<template>
  <view class="page-container" :style="containerStyle">
    <slot></slot>
    <view v-if="loading" class="page-loading">
      <up-loading-icon size="32" mode="circle" color="#2979ff"></up-loading-icon>
      <text class="loading-text">{{ loadingText }}</text>
    </view>
  </view>
</template>

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

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  loadingText: {
    type: String,
    default: '加载中...'
  },
  pullToRefresh: {
    type: Boolean,
    default: false
  },
  bgColor: {
    type: String,
    default: '#f8f8f8'
  }
})

const emit = defineEmits(['refresh', 'scroll'])

const scrollTop = ref(0)
const refreshing = ref(false)

const containerStyle = computed(() => ({
  minHeight: '100%',
  backgroundColor: props.bgColor
}))

function handleScroll(e) {
  emit('scroll', e)
}

function handleRefresh() {
  if (props.pullToRefresh && !refreshing.value) {
    refreshing.value = true
    emit('refresh', () => {
      refreshing.value = false
    })
  }
}

onMounted(() => {
  if (props.pullToRefresh) {
    uni.startPullDownRefresh()
  }
})

onUnmounted(() => {
  uni.stopPullDownRefresh()
})
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  min-height: 100%;
  position: relative;
}

.page-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  padding: 30rpx 50rpx;
  border-radius: 12rpx;
  z-index: 9999;
}

.loading-text {
  color: #fff;
  font-size: 26rpx;
  margin-top: 16rpx;
}
</style>
