<script>
import mqttDataManager from '@/utils/mqttDataManager.js'

export default {
  onLaunch: function () {
    // 应用启动时的初始化逻辑
    this.initApp()
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  methods: {
    initApp() {
      // 初始化应用设置
      console.log('🚀 应用开始初始化...')
      
      // 检查是否是首次启动
      const isFirstLaunch = uni.getStorageSync('isFirstLaunch')
      if (!isFirstLaunch) {
        uni.setStorageSync('isFirstLaunch', true)
        console.log('✅ 首次启动应用')
      }
      
      // 显示平台信息
      let platform = 'Unknown'
      // #ifdef H5
      platform = 'H5'
      // #endif
      // #ifdef APP-PLUS
      platform = 'APP-PLUS'
      // #endif
      // #ifdef MP-WEIXIN
      platform = 'MP-WEIXIN'
      // #endif
      console.log('📱 当前平台:', platform)
      
      // MQTT连接已在mqttDataManager中自动初始化
      console.log('✅ 应用初始化完成')
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/common.scss';

/*每个页面公共css */
page {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 
    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
    sans-serif;
  height: 100%;
  width: 100%;
  background-color: #f5f6fa;
}

/* 确保根元素和页面容器都是100%高度 */
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 全局布局容器 */
.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 固定头部样式 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 1000;
  background-color: #ffffff;
  padding: 15rpx 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  border-bottom: 2rpx solid #e1e5e9;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.header-title {
  color: #2c3e50;
  font-size: 32rpx;
  font-weight: 600;
  text-align: center;
}

/* 内容区域样式 */
.content-area {
  flex: 1;
  padding-top: 100rpx; /* 为固定头部留出空间 */
  padding-bottom: 200rpx; /* 为tabbar留出空间 */
  overflow-y: auto;
  background-color: #f5f6fa;
  display: flex;
  flex-direction: column;
}

/* tabbar页面内容区域 */
.tabbar-content {
  flex: 1;
  // padding: 0 20rpx; /* 增加底部padding为tabbar留出空间 */
  margin-top: 130rpx; /* 为固定头部留出空间，增加距离 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  // min-height: calc(100vh - 200rpx); /* 调整最小高度计算 */
  // #ifdef H5
  // margin-bottom: 50px;
  // #endif
}

.header-title {
  font-weight: normal;
  color: #333;
}

/* 非tabbar页面内容区域 */
.non-tabbar-content {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* 修复uni-app中的一些默认样式 */
button {
  margin: 0;
  padding: 0;
  background-color: transparent;
}

button::after {
  border: none;
}

/* 弹窗样式修复 */
.uni-popup .uni-popup__wrapper {
  border-radius: 10rpx;
  overflow: hidden;
}

/* 卡片样式 */
.card {
  background: #ffffff;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid #e1e5e9;
}

/* 按钮样式 */
.btn-primary {
  background-color: #2980b9;
  color: white;
  padding: 16rpx 20rpx;
  border-radius: 6rpx;
  font-size: 26rpx;
  border: none;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.btn-primary:active {
  background-color: #21618c;
}

.btn-secondary {
  background-color: #7f8c8d;
  color: white;
  padding: 16rpx 20rpx;
  border-radius: 6rpx;
  font-size: 26rpx;
  border: none;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.btn-secondary:active {
  background-color: #6c7b7d;
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .fixed-header {
    padding: 16rpx 20rpx;
  }
  
  .tabbar-content {
    padding: 16rpx 16rpx 100rpx; /* 调整小屏幕下的内边距 */
    margin-top: 90rpx; /* 调整小屏幕下的顶部间距 */
  }
}

@media screen and (max-width: 600rpx) {
  .fixed-header {
    padding: 12rpx 16rpx;
  }
  
  .tabbar-content {
    padding: 16rpx 16rpx 90rpx; /* 更小屏幕下的内边距 */
    margin-top: 80rpx; /* 更小屏幕下的顶部间距 */
  }
  
  .header-title {
    font-size: 28rpx;
  }
}
</style>
