<template>
  <view class="module-container">
    <!-- 内容区域 -->
    <view class="content">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading">
        <view class="spinner"></view>
        <text>加载中...</text>
      </view>

      <!-- 1. 公司介绍（直接显示单个PDF） -->
      <view v-if="!loading && currentType === 1 && companyPdf.url" class="pdf-single">
        <web-view 
          :src="getPdfViewerUrl(companyPdf.url)" 
          class="webview"
          @error="handlePdfError"
        ></web-view>
      </view>

      <!-- 2-4. 带Tab的模块（根据type显示不同Tab） -->
      <view v-if="!loading && currentType >= 2 && currentType <= 4">
        <!-- Tab切换栏 -->
        <view class="tab-bar">
          <view 
            v-for="(tab, index) in currentTabs" 
            :key="tab.id"
            class="tab-item"
            :class="{ active: activeTab === index }"
            @click="switchTab(index)"
          >
            <text class="tab-text">{{ tab.title }}</text>
            <view class="tab-indicator" v-if="activeTab === index"></view>
          </view>
        </view>

        <!-- Tab对应的PDF内容 -->
		<!-- Tab 对应的 PDF 内容：添加 @load 事件 -->
		<view class="pdf-tab-content">
			<web-view 
			  :src="getPdfViewerUrl(currentPdf.url)" 
			  class="webview"
			  @error="handlePdfError"
			  @load="handleWebViewLoad"
			  :key="getPdfViewerUrl(currentPdf.url)" 
			></web-view>
		</view>
      </view>

      <!-- 错误状态 -->
      <view v-if="!loading && (currentType < 1 || currentType > 4)" class="error">
        <text>无效的模块类型</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 定义PDF文件类型
interface PdfItem {
  id: string;
  title: string;
  url: string; // PDF文件路径
}

// 接收type参数
const currentType = ref<number>(1);
const loading = ref(true);
const activeTab = ref(0);
const currentPdf = ref<PdfItem>({ id: '', title: '', url: '' });

// OSS基础路径（根据实际OSS地址修改）
const OSS_BASE_URL = 'https://csf-doc-center.oss-cn-shanghai-finance-1-pub.aliyuncs.com';

// 公司介绍PDF（type=1）- 使用OSS地址
const companyPdf = ref<PdfItem>({
  id: 'company',
  title: '公司介绍',
  url: `${OSS_BASE_URL}/public/company-intro.pdf` // OSS地址
});

// 所有模块的Tab配置（根据type匹配）
const tabConfig = ref<Record<number, PdfItem[]>>({
  2: [ // type=2：案例分享
	{ id: 'case1', title: '规划案例', url: `${OSS_BASE_URL}/cases/planning.pdf` },
    { id: 'case2', title: '团财案例', url: `${OSS_BASE_URL}/cases/group-finance.pdf` }
  ],
  3: [ // type=3：产品分析
    { id: 'product2', title: '港险分析', url: `${OSS_BASE_URL}/products/hk-analysis.pdf` },
	{ id: 'product1', title: '港险明细', url: `${OSS_BASE_URL}/products/hk-detail.pdf` },
  ],
  4: [ // type=4：制度
    { id: 'policy1', title: '个险政策', url: `${OSS_BASE_URL}/policies/individual-policy.pdf` },
    { id: 'policy2', title: '团财政策', url: `${OSS_BASE_URL}/policies/group-policy.pdf` },
    { id: 'policy3', title: '介绍费政策', url: `${OSS_BASE_URL}/policies/commission-policy.pdf` }
  ]
});

// 初始化页面
onLoad((query) => {
	  // 解析type参数（默认1）
  currentType.value = Number(query.type) || 1;
  loading.value = true;
  // 初始化Tab和PDF
  const tabs = tabConfig.value[currentType.value] || [];
  if (currentType.value >= 2 && currentType.value <= 4 && tabs.length > 0) {
    activeTab.value = 0;
    currentPdf.value = tabs[0]; // 直接赋值，避免 computed 延迟
  }

  // 模拟加载延迟（可缩短到 200ms，减少 WebView 等待时间）
  setTimeout(() => {
    loading.value = false;
  }, 200);
});


// 计算当前模块的Tab列表
const currentTabs = computed(() => {
  return tabConfig.value[currentType.value] || [];
});
// 1. 生成随机字符串（比时间戳更唯一，避免快速切换重复）
const getRandomStr = (length = 8) => {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let str = '';
  for (let i = 0; i < length; i++) {
    str += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return str;
};

// 2. 生成 PDF 查看器 URL：添加随机参数+时间戳，确保每次 src 唯一
const getPdfViewerUrl = (pdfUrl: string) => {
  if (!pdfUrl) return '';
  const randomStr = getRandomStr(); // 随机字符串
  const timestamp = new Date().getTime(); // 时间戳
  // 同时添加 random 和 timestamp，双重确保 src 唯一
  return `/static/pdf/web/viewer.html?file=${encodeURIComponent(pdfUrl)}&random=${randomStr}&t=${timestamp}`;
};

// 新增：WebView 加载完成监听
const handleWebViewLoad = (e: any) => {
  const loadedSrc = e.detail.src; // 获取 WebView 实际加载的 src
  console.log('WebView 加载完成：', loadedSrc);
  
  // 解析加载的 file 参数，确认是否正确
  const urlObj = new URL(loadedSrc);
  const fileParam = urlObj.searchParams.get('file');
  if (fileParam) {
    const decodedFileUrl = decodeURIComponent(fileParam);
    console.log('解析的 PDF 地址：', decodedFileUrl);
    // 验证 PDF 地址是否可访问（可选：用 uni.request 测试）
    uni.request({
      url: decodedFileUrl,
      method: 'GET',
      success: (res) => {
        console.log('PDF 地址可访问，响应状态：', res.statusCode);
      },
      fail: (err) => {
        console.error('PDF 地址访问失败：', err);
        uni.showToast({ title: `PDF 地址无效: ${err.errMsg}`, icon: 'none' });
      }
    });
  }
};
// // 切换Tab
// const switchTab = (index: number) => {
//   if (index < 0 || index >= currentTabs.value.length) return;
//   activeTab.value = index;
//   currentPdf.value = currentTabs.value[index];
// };
// 修改 switchTab 方法，添加 100ms 延迟
const switchTab = (index: number) => {
  if (index < 0 || index >= currentTabs.value.length) return;
  // 先显示加载状态（可选，增强用户体验）
  uni.showLoading({ title: '加载中...' });
  // 延迟 100ms 再更新 activeTab 和 currentPdf，避免 WebView 加载冲突
  setTimeout(() => {
    activeTab.value = index;
    currentPdf.value = currentTabs.value[index];
    // 延迟关闭加载提示（给 WebView 启动时间）
    setTimeout(() => {
      uni.hideLoading();
    }, 300);
  }, 100);
};

// 处理PDF加载错误
const handlePdfError = () => {
  uni.showToast({
    title: 'PDF加载失败',
    icon: 'none',
    duration: 2000
  });
};
</script>

<style scoped lang="scss">
.module-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.navbar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;

  .back-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;

    .icon-back {
      font-size: 20px;
      color: #333333;
    }
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 加载状态 */
.loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;

  .spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #eeeeee;
    border-top-color: #20269B;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
  }

  text {
    color: #999999;
    font-size: 14px;
  }
}

/* 错误状态 */
.error {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
  font-size: 16px;
  background-color: #ffffff;
}

/* 单个PDF展示（公司介绍） */
.pdf-single {
  flex: 1;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

/* Tab栏样式 */
.tab-bar {
  display: flex;
  flex-direction: row;
  height: 48px;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    height: 100%;
    position: relative;

    .tab-text {
      font-size: 14px;
      color: #666666;
      transition: color 0.3s;
    }

    .tab-indicator {
      position: absolute;
      bottom: 0;
      width: 24px;
      height: 2px;
      background-color: #20269B;
      border-radius: 1px;
    }

    &.active {
      .tab-text {
        color: #20269B;
        font-weight: 500;
      }
    }
  }
}

/* Tab对应的PDF内容 */
.pdf-tab-content {
  width: 100%;
  position: absolute;
  top: 48px; /* 等于 Tab 栏的高度（.tab-bar { height: 48px; }），从 Tab 栏下方开始 */
  bottom: 0; /* 到屏幕底部结束 */
  background-color: #ffffff;
}

.pdf-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 14px;
}

/* web-view样式 */
.webview {
  width: 100%;
  height: 100%;
}

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