<script setup>
import { ref, reactive, watchEffect, onMounted, onBeforeUnmount } from 'vue'
// 引入事件总线用于接收打开/关闭指令
import Bus from '@/utils/bus'
import { handleSetWebviewStyle } from '@/utils/common'

// 控制抽屉显示状态
const visible = ref(false)
// 存储 iframe 的目标地址
const url = ref('')
// 响应式配置项集合
const options = reactive({
  // 顶部偏移（避让状态栏与底部栏）
  top: 0,
  // 底部偏移
  bottom: 0,
  // 最外层 z-index 层级
  zindex: 9999,
  // 蒙层透明度（0~1）
  maskOpacity: 0.35,
  // 抽屉圆角半径
  radius: 12,
})

// 处理打开事件的载荷
const open = (payload) => {
  // 从载荷解构 URL 与可选项
  const { url: u = '', options: opt = {} } = payload || {}
  // 没有 URL 则忽略
  if (!u) return
  // 设置 iframe 地址
  url.value = u
  // 合并外部传入配置
  Object.assign(options, opt)
  // 显示抽屉
  visible.value = true
}

// 处理关闭事件
const close = () => {
  // 隐藏抽屉
  visible.value = false
  // 获取当前页面路径
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  console.log(page.route)
  if (page?.route === 'pages/index/index') {
    handleSetWebviewStyle(true)
  }
}

// 组件挂载时注册事件监听
onMounted(() => {
  // 监听打开事件
  Bus.$on('global-drawer-open', open)
  // 监听关闭事件
  Bus.$on('global-drawer-close', close)
})

// 卸载前移除事件监听
onBeforeUnmount(() => {
  // 移除打开事件监听
  Bus.$off('global-drawer-open', open)
  // 移除关闭事件监听
  Bus.$off('global-drawer-close', close)
})

// 根据存储的高度动态计算顶部偏移
watchEffect(() => {
  // 读取状态栏高度
  const statusBarHeight = Number(uni.getStorageSync('statusBarHeight') || 0)
  // 读取底部 TabBar 高度
  const tabBarHeight = Number(uni.getStorageSync('tabBarHeight') || 0)
  // 未设置时采用默认的顶部偏移
  if (!options.top) options.top = statusBarHeight + tabBarHeight || 80
})
</script>

<template>
  <div
    v-show="visible"
    :style="{
      position: 'fixed',
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      zIndex: options.zindex,
    }"
  >
    <!-- 半透明蒙层 -->
    <div
      @click="close"
      :style="{
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        background: `rgba(0,0,0,${options.maskOpacity})`,
      }"
    ></div>
    <!-- 抽屉容器 -->
    <div
      :style="{
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: options.bottom + 'px',
        height: `calc(100% - ${options.top}px)`,
        background: '#fff',
        borderTopLeftRadius: options.radius + 'px',
        borderTopRightRadius: options.radius + 'px',
        boxShadow: '0 -6px 24px rgba(0,0,0,0.15)',
        overflow: 'hidden',
        transform: visible ? 'translateY(0)' : 'translateY(100%)',
        transition: 'transform 200ms ease',
      }"
    >
      <iframe
        :src="url"
        style="width: 100%; height: 100%; border: 0; display: block;"
      ></iframe>
    </div>
  </div>
</template>

<style scoped></style>
