<template>
  <view class="page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-content">
        <view class="nav-left" @click="goBack">
          <text class="back-icon">←</text>
        </view>
        <text class="page-title">外部链接</text>
      </view>
    </view>

    <!-- WebView 容器 -->
    <web-view :src="webUrl" @message="onMessage"></web-view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const webUrl = ref('');

onMounted(() => {
  // 获取 URL 参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1] as any;
  // #ifdef APP-PLUS
  const options = currentPage?.$page?.options || {};
  // #endif
  // #ifndef APP-PLUS
  const options = currentPage?.options || {};
  // #endif

  if (options.url) {
    webUrl.value = decodeURIComponent(options.url);
  }
});

function goBack() {
  const pages = getCurrentPages();
  if (pages.length > 1) {
    uni.navigateBack();
  } else {
    uni.switchTab({ url: '/pages/index/index' });
  }
}

function onMessage(e: any) {
  console.log('[WebView] 收到消息:', e.detail);
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #ffffff;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  padding-top: env(safe-area-inset-top);
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  z-index: 100;
}

.nav-content {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
}

.nav-left {
  width: 80rpx;
  display: flex;
  align-items: center;
}

.back-icon {
  font-size: 36rpx;
  color: #333;
}

.page-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-right: 80rpx;
}

web-view {
  width: 100%;
  height: calc(100vh - 88rpx - env(safe-area-inset-top));
  margin-top: calc(88rpx + env(safe-area-inset-top));
}
</style>
