<template>
  <view id="app">
    <!-- 全局加载组件 -->
    <view v-if="appStore.globalLoading" class="global-loading">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 网络状态提示 -->
    <view v-if="!appStore.isOnline" class="network-offline">
      <text>网络连接已断开</text>
    </view>
  </view>
</template>

<script setup>
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'

// 获取store实例
const appStore = useAppStore()
const userStore = useUserStore()

onLaunch(() => {
  console.log('App Launch')
  
  // 初始化应用
  initApp()
})

onShow(() => {
  console.log('App Show')
  
  // 检查登录状态
  userStore.checkAuth()
})

onHide(() => {
  console.log('App Hide')
})

/**
 * 初始化应用
 */
async function initApp() {
  try {
    // 初始化应用store
    await appStore.initApp()
    
    // 监听网络状态变化
    appStore.watchNetworkStatus()
    
    // 检查登录状态
    userStore.checkAuth()
    
    console.log('应用初始化完成')
  } catch (error) {
    console.error('应用初始化失败:', error)
    appStore.addError(error)
  }
}
</script>

<style lang="scss">
/* 全局样式 */
@import '@/styles/variables.scss';
@import '@/styles/base.scss';

#app {
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 全局加载样式 */
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  
  .loading-spinner {
    width: 40rpx;
    height: 40rpx;
    border: 4rpx solid #f3f3f3;
    border-top: 4rpx solid $primary-color;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: $text-secondary;
  }
}

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

/* 网络离线提示 */
.network-offline {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ff4d4f;
  color: white;
  text-align: center;
  padding: 20rpx;
  font-size: 24rpx;
  z-index: 9998;
}

/* 通用样式类 */
.container {
  padding: 30rpx;
}

.section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: $text-primary;
}

.card {
  background: white;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
}

.btn {
  display: inline-block;
  padding: 20rpx 40rpx;
  border-radius: 8rpx;
  text-align: center;
  font-size: 28rpx;
  transition: all 0.3s;
  
  &.btn-primary {
    background: $primary-color;
    color: white;
    
    &:active {
      background: darken($primary-color, 10%);
    }
  }
  
  &.btn-secondary {
    background: $background-light;
    color: $text-primary;
    border: 1rpx solid $border-color;
    
    &:active {
      background: darken($background-light, 5%);
    }
  }
}

.text-primary {
  color: $text-primary;
}

.text-secondary {
  color: $text-secondary;
}

.text-success {
  color: $success-color;
}

.text-warning {
  color: $warning-color;
}

.text-error {
  color: $error-color;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mt-20 {
  margin-top: 20rpx;
}

.mb-20 {
  margin-bottom: 20rpx;
}

.p-20 {
  padding: 20rpx;
}

.p-30 {
  padding: 30rpx;
}
</style>