<template>
  <view class="webview-container">
    <!-- Webview内容 -->
    <web-view :src="webviewUrl" @message="getMessage" class="webview-content"></web-view>
  </view>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
import { useUserStore } from '@/stores/user.js'
import { useGlobalStore } from '../../stores/global'
import { fetchSyWebviewJSON } from '../../api/sywebview'
import { onLoad, onShow, onShareAppMessage, onShareTimeline, onPageScroll } from "@dcloudio/uni-app";
import { jump, JumpType } from '../../utils'
import md from '../../md';


// 响应式数据
const statusBarHeight = ref(0)
const webviewUrl = ref('https://momclub-test.feihe.com/h5/game/index.html')
const share = ref(null) // 分享数据
const pageOptions = ref({})
const registered = ref(undefined)

// 获取用户store
const userStore = useUserStore()
const globalStore = useGlobalStore()

// 检查用户是否注册
function getRegistered() {
  return !!(userStore.userInfo && userStore.userInfo?.memberId !== "not_login")
}

// 处理返回逻辑
const handleBack = () => {
  try {
    uni.navigateBack({
      delta: 1,
      fail: () => {
        // 如果返回失败，跳转到首页
        uni.redirectTo({
          url: '/pages/index/index'
        })
      }
    })
  } catch (error) {
    console.log('返回失败:', error)
    uni.redirectTo({
      url: '/pages/index/index'
    })
  }
}

// 登录获取 cuk
const ensureAutoLogin = async () => {
  await new Promise(resolve => {
    userStore.syWxAutoLogin(resolve)
  })
}

// 接收webview消息
const getMessage = (e) => {
  console.log('=== Webview 消息接收开始 ===')
  console.log('完整事件对象:', e)
  console.log('事件详情:', e.detail)

  // 尝试多种方式获取数据
  let messageData = null

  // 方式1：从 e.detail.data 获取
  if (e.detail && e.detail.data) {
    messageData = e.detail.data
    console.log('从 e.detail.data 获取到数据:', messageData)
  }

  if (messageData) {
    console.log('消息数据类型:', typeof messageData)
    console.log('消息数据是否为数组:', Array.isArray(messageData))

    share.value = messageData[messageData.length - 1]


  }

}

// 初始化 webview URL
const initWebviewUrl = async () => {
  // 使用固定的基础URL，从 options 中获取或使用默认值
  const options = pageOptions.value
  let baseUrl = options.url || options.baseUrl || 'https://momclub-test.feihe.com/h5/game/index.html'
  
  // 如果 baseUrl 已经包含协议，直接使用；否则添加协议
  if (!baseUrl.startsWith('http://') && !baseUrl.startsWith('https://')) {
    baseUrl = 'https://' + baseUrl
  }

  const cuk = globalStore.cuk
  const openId = globalStore.openId
  const unionId = globalStore.unionId

  // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
  const scene = options.scene ? decodeURIComponent(decodeURIComponent(options.scene)) : null
  const cleanOptions = { ...options }
  delete cleanOptions.scene
  delete cleanOptions.url
  delete cleanOptions.baseUrl

  console.warn("scene", scene)
  console.warn("cleanOptions", cleanOptions)

  // 将 options 的所有参数原样作为查询参数传给 H5，并补齐 cuk
  const params = { ...cleanOptions }
  if (cuk && !params.cuk) params.cuk = cuk
  // 添加用户信息参数
  if (openId && !params.openId) params.openId = openId
  if (unionId && !params.unionId) params.unionId = unionId
  
  // 获取会员信息（优先从 memberInfo 获取，如果没有则从 userInfo 获取）
  const memberInfo = userStore.memberInfo || userStore.userInfo
  
  // 添加 memberId（如果已注册）
  if (memberInfo?.memberId && memberInfo.memberId !== "not_login") {
    params.crmId = memberInfo.memberId
    // 添加会员ID
    params.memberId = memberInfo.memberId
    // 添加是否登录（1表示已登录，0表示未登录）
    params.programLogin = '1'
    // 添加会员等级（从 gradeList 中根据 grade 获取 gradeName）
    if (memberInfo.grade !== undefined && memberInfo.grade !== null) {
      // 优先从 gradeList 中查找对应的 gradeName
      if (memberInfo.gradeList && Array.isArray(memberInfo.gradeList)) {
        const currentGrade = String(memberInfo.grade)
        const gradeItem = memberInfo.gradeList.find(item => String(item.grade) === currentGrade)
        if (gradeItem && gradeItem.gradeName) {
          params.memberType = gradeItem.gradeName
        } else if (memberInfo.gradeName) {
          // 如果 gradeList 中找不到，使用 gradeName
          params.memberType = memberInfo.gradeName
        } else {
          // 如果都没有，使用 grade 值
          params.memberType = currentGrade
        }
      } else if (memberInfo.gradeName) {
        // 如果没有 gradeList，使用 gradeName
        params.memberType = memberInfo.gradeName
      } else {
        // 如果都没有，使用 grade 值
        params.memberType = String(memberInfo.grade)
      }
    }
  } else {
    // 未登录状态
    params.programLogin = '0'
  }

  const paramStr = Object.keys(params)
    .filter(key => params[key] !== undefined && params[key] !== null && params[key] !== '')
    .map(key => `${key}=${encodeURIComponent(params[key])}`)
    .join('&')

  // p 渠道参数
  // openId 用户openid
  // unionId 用户unionid
  // cuk 
  // shareToken 分享人token
  // pt 分享海报人token

  // 示例：
  // https://25niansuyuan.feihe.com/projects/Firmus/dev/index?p=xmh&openId=用户openid&unionId=用户unionid&&pt=yzhd123&shareToken=yzhd123&cuk=12121

  // 处理 scene 参数
  if (scene) {
    // 如果 scene 以 ? 开头，直接拼接
    if (scene[0] === '?') {
      baseUrl += scene
    } else {
      // 如果 scene 不以 ? 开头，需要判断 baseUrl 是否已有参数
      baseUrl += baseUrl.includes('?') ? `&${scene}` : `?${scene}`
    }
  }

  // 拼接其他参数
  if (paramStr) {
    // 判断 baseUrl 是否已包含查询参数
    const separator = baseUrl.includes('?') ? '&' : '?'
    webviewUrl.value = baseUrl + separator + paramStr
  } else {
    webviewUrl.value = baseUrl
  }

  console.log('Webview页面加载，URL:', webviewUrl.value)
  console.log('参数字符串:', paramStr)
  console.log('基础URL:', baseUrl)
}

// 监听注册状态变化，初始化 webview URL
watch(() => registered.value, (newVal, oldVal) => {
  if (!pageOptions.value.needLogin || newVal) {
    webviewUrl.value = ''
    nextTick(() => {
      initWebviewUrl()
    })
  }
})

// 页面显示时处理授权逻辑
onShow(async () => {
  const oldVal = registered.value

  await ensureAutoLogin()
  await userStore.loadUserInfo()
  // 加载会员信息以获取 grade 等详细信息
  await userStore.loadMemberInfo()

  registered.value = getRegistered()

  if (oldVal === undefined) {
    // 首次加载
    if (pageOptions.value.needLogin && !registered.value) {
      // 需要登录但未注册，跳转到注册页
      jump({
        type: JumpType.INNER,
        url: '/pages/activity/register',
      })
    } else if (!pageOptions.value.needLogin) {
      // 不需要登录，直接初始化 URL
      if (!webviewUrl.value) {
        await initWebviewUrl()
      }
    }
  } else {
    // 授权状态变化：如果从已注册变为未注册（授权失败），显示提示并返回
    if (registered.value === false) {
      uni.showToast({
        title: "授权失败，即将返回",
        icon: "none",
      });
      setTimeout(() => {
        handleBack()
      }, 1000)
    }
  }
})

// 页面参数接收
onLoad(async (options) => {
  pageOptions.value = options
  console.log('页面参数:', options)

  wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']// shareAppMessage表示"发送给朋友"按钮，shareTimeline表示"分享到朋友圈"按钮 
  })
  console.warn("wx", wx.showShareMenu)
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
})

// 分享功能
onShareAppMessage((options) => {
  console.log('分享数据:', share.value)
  console.log('分享选项:', options)

  md.sensorLogTake({
    xcxClick: "suyuan202508H5Click",
    pageName: "星妈会分享页",
    buttonName: "星妈会分享出",
  });
  if (share.value) {
    const shareurl = share.value.shareUrl
    const title = share.value.shareTitle
    const imageUrl = share.value.shareImageUrl

    console.log('使用分享数据:1', { title, shareurl, imageUrl })

    return {
      title: title,
      path: shareurl || '/pages/index/index',
      imageUrl: imageUrl || '',
      success: function (res) {
        console.log('分享成功:', res)
        //星妈会埋点方法，用户分享成功后触发事件

      },
      fail: function (res) {
        console.log('分享失败:', res)
      },
      complete: function (res) {
        console.log('分享完成:', res)
      }
    }
  }

  // 如果没有分享数据，返回默认分享
  return {
    path: '/pages/index/index'
  }
})

onShareTimeline((options) => {
  console.log('分享朋友圈数据:', share.value)
  md.sensorLogTake({
    xcxClick: "suyuan202508H5Click",
    pageName: "星妈会分享页",
    buttonName: "星妈会分享出",
  });
  if (share.value) {
    const shareurl = share.value.shareUrl
    const title = share.value.shareTitle
    const imageUrl = share.value.shareImageUrl

    console.log('使用分享数据:', { title, shareurl, imageUrl })

    return {
      title: title || '分享',
      path: shareurl || '/pages/index/index',
      imageUrl: imageUrl || '',
      success: function (res) {
        //星妈会埋点方法，用户分享成功后触发事件

        console.log('分享成功:', res)
      },
      fail: function (res) {
        console.log('分享失败:', res)
      },
      complete: function (res) {
        console.log('分享完成:', res)
      }
    }
  }

  // 如果没有分享数据，返回默认分享
  return {
    path: '/pages/index/index'
  }
})

</script>

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

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