<template>
  <view class="webview-container">
    <!-- 头部导航栏 -->
    <view class="header-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="nav-content">
        <text class="nav-title">老游条电竞学院</text>
        <view class="nav-right"></view>
      </view>
    </view>
    
    <!-- WebView 内容区域 -->
    <view class="webview-content" :style="{ marginTop: (statusBarHeight + 44) + 'px' }">
      <web-view :src="webUrl" @message="onMessage" @error="onError" @load="onLoad"></web-view>
    </view>
    
    <!-- 加载提示 -->
    <view v-if="loading" class="loading-overlay">
      <view class="loading-content">
        <uni-icons type="spinner-cycle" size="30" color="#007AFF"></uni-icons>
        <text class="loading-text">加载中...</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webUrl: 'https://www.lytiao.com/',
      loading: true,
      statusBarHeight: 0
    }
  },
  
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight || 0
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // WebView 加载完成
    onLoad(event) {
      console.log('WebView 加载完成:', event)
      this.loading = false
    },
    
    // WebView 加载错误
    onError(event) {
      console.error('WebView 加载错误:', event)
      this.loading = false
      uni.showToast({
        title: '页面加载失败',
        icon: 'none',
        duration: 2000
      })
    },
    
    // 接收 WebView 消息
    onMessage(event) {
      console.log('收到 WebView 消息:', event.detail.data)
    }
  }
}
</script>

<style scoped>
.webview-container {
  width: 100%;
  height: 100vh;
  background-color: #fff;
}

.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e5e5e5;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
}

.nav-left {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.back-text {
  margin-left: 4px;
  font-size: 16px;
  color: #333;
}

.nav-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-align: center;
  flex: 1;
}

.nav-right {
  width: 60px;
}

.webview-content {
  width: 100%;
  height: calc(100vh - 44px);
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-text {
  margin-top: 12px;
  font-size: 14px;
  color: #666;
}

/* 适配不同平台 */
/* #ifdef MP-WEIXIN */
.webview-content {
  height: calc(100vh - 88px);
}
/* #endif */

/* #ifdef H5 */
.header-nav {
  background-color: #fff;
}
/* #endif */
</style>