<template>
  <view>
    <web-view id="webview" :src="webviewUrl" @message="handleMessage"></web-view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { navigateToNewPage, saveImageToAlbum } from "./bridge.js";

const webviewUrl = ref("");
const originalWebviewUrl = ref("");

onUnmounted(() => {
  uni.$off('UPLOAD_RESULT')
})

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

  // 从页面参数中获取url
  if (options.url) {
    // 对URL进行解码，因为传递时可能被编码了
    const decoded = decodeURIComponent(options.url);
    webviewUrl.value = decoded;
    originalWebviewUrl.value = decoded;
    console.log("WebView URL:", decoded);
  }

  chooseAndUpload();
});

const chooseAndUpload = () => {
  uni.$on('UPLOAD_RESULT', (imageUrl) => {
    console.log('收到图片地址:', imageUrl)
    const resultUrl = originalWebviewUrl.value + '&imageUrl=' + encodeURIComponent(imageUrl);
    console.log('新的URL:', resultUrl)
    webviewUrl.value = resultUrl;
  })
}

const handleMessage = (event) => {
  const messageData = event.detail.data[0];
  console.log("Received message from H5:", messageData);
  // 根据需要处理H5传递过来的消息
  const action = messageData.action;

  switch (action) {
    case "navigateBack":
      uni.navigateBack();
      break;
    case "navigateTo":
      navigateToNewPage(messageData.url);
      break;
    case "showToast":
      uni.showToast({ title: messageData.title, icon: messageData.icon || "none" }); 
      break;
    case "saveImage":
      saveImageToAlbum(messageData.imageUrl);
      break;
    case "chooseAndUpload": {
      uni.navigateTo({
        url: '/pages-bridge/UploadImage',
      })
    }
    break; 

    default:
      console.log("Unknown action:", action);
  }
};

</script>

<style lang="scss" scoped></style>
