<script setup>
// 接受父组件传递的 props 参数
const props = defineProps({
  webviewSrc: {
    type: String,
    required: true,
  },

})
onMounted(() => {

})
const webviewStyles = ref({
  top: `${uni.getSystemInfoSync().statusBarHeight + 44}px`, // 距离顶部的距离
  height: `${uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 44}px`, // 高度
  position: 'absolute', // 绝对定位
  dock: 'bottom', // 停靠在底部
  bounce: 'vertical', // 垂直方向的回弹效果
})
const token = uni.getStorageSync('token') // 从本地缓存中获取 token
const env = uni.getStorageSync('platform')
// const baseUrl = `${window.location.origin}/app`
const baseUrl = 'https://www.quannengcha.com'
// const baseUrl = 'http://192.168.1.124:5678'
const webviewUrl = computed(() => {
  let urlStr = baseUrl + props.webviewSrc
  if (token) {
    // 判断原本 url 中是否已经含有问号
    urlStr += `${urlStr.includes('?') ? '&' : '?'}token=${token}`
  }
  urlStr += `${urlStr.includes('?') ? '&' : '?'}env=${env}#wechat_redirect`

  return urlStr
})

const isLoading = ref(true) // 控制加载动画显示状态
// const processedMessages = new Set() // 存储已处理的消息ID

// 页面加载完成时，隐藏加载动画
function handleLoaded() {
  isLoading.value = false
}
// 监听消息事件，隐藏加载动画
// window.addEventListener('message', (event) => {
//   const message = event.data
//   const action = message?.action
//   const messageId = message?.messageId
//   const data = message?.data
//   if (message.hello || message.wappalyzer)
//     return
//   if (!action)
//     return
//   if (processedMessages.has(messageId)) {
//     return
//   }
//   processedMessages.add(messageId)
//   if (action === 'loaded') {
//     if (data)
//       isLoading.value = false
//   }
//   else if (action === 'navigateTo') {
//     uni.navigateTo(data)
//   }
//   else if (action === 'redirectTo') {
//     uni.redirectTo(data)
//   }
//   else if (action === 'navigateBack') {
//     uni.navigateBack(data)
//   }
//   else if (action === 'payment') {
//     payment(data)
//   }
// })

function onMessage(e) {
  const data = e.detail.data
  const message = data[data.length - 1]
  console.log('message', message)
  if (message.action === 'payment') {
    console.log('data', message.data)
    payment(message.data)
  }
}

function payment(data) {
  uni.navigateTo({
    url: `/pages/me?paymentID${data}`,
  })
}
</script>

<template>
  <view v-if="isLoading" class="loading">
    <view class="spinner" />
    <view class="loading-text">
      加载中，请稍候...
    </view>
  </view>
  <web-view :webview-styles="webviewStyles" :src="webviewUrl" @load="handleLoaded" @message="onMessage" />
</template>

<style scoped>
.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  z-index: 10;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0, 106, 255, 0.2);
  /* 背景圆环颜色 */
  border-top-color: rgba(0, 106, 255, 0.8);
  /* 高亮部分颜色 */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: 16px;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(to right, #167ff6, #4a90e2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
