<template>
  <ie-page :fix-height="true">
    <ie-navbar v-if="showNavbar" :title="pageTitle" />
    <ie-auto-resizer>
      <web-view class="w-full h-full" :fullscreen="false" border="none" :src="webviewSrc" @load="handleLoad" />
    </ie-auto-resizer>
  </ie-page>
</template>

<script lang="ts" setup>
import { useTransferPage } from '@/hooks/useTransferPage';

const { prevData, transferBack } = useTransferPage();
const showNavbar = ref(true);
const webviewSrc = ref('');
const pageTitle = ref('');
const webviewParams = ref('');

onLoad(() => {
  const { url, params, title, showNavbar: _showNavbar } = prevData.value
  pageTitle.value = title;
  showNavbar.value = JSON.parse(_showNavbar) ?? true;
  try {
    uni.$ie.showLoading();
    if (typeof params === 'string') {
      webviewParams.value = JSON.parse(params);
    } else {
      webviewParams.value = params;
    }
    webviewSrc.value = `${url}?${Object.entries(webviewParams.value).map(([key, value]) => `${key}=${value}`).join('&')}`;
  } catch (error) {
    uni.$ie.showToast('参数错误');
    transferBack();
  }
});
const handleLoad = () => {
  uni.$ie.hideLoading();
}
</script>

<style lang="scss">
:deep(iframe) {
  width: 100% !important;
  height: 100% !important;
  border: none;
  z-index: 999;
}
</style>