<template>
  <view class="webview">
    <!-- 使用 NavBar 组件 -->
    <TopNavBar title="网页浏览" @back="goBack" />

    <!-- WebView 内容区域 -->
    <view class="webview-content">
      <web-view :src="webviewUrl"></web-view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import TopNavBar from "@/components/TopNavBar/index.vue";

const webviewUrl = ref("");

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;

  // 从页面参数中获取url
  if (options.url) {
    // 对URL进行解码，因为传递时可能被编码了
    webviewUrl.value = decodeURIComponent(options.url);
  }
});
</script>

<style lang="scss" scoped>
.webview {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.webview-content {
  flex: 1;
  margin-top: calc(44px + var(--status-bar-height));
}

.webview-content {
  width: 100%;
  height: 100%;
}
</style>
