<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"
          @load="handleWebViewLoad"
        ></web-view>
      </view>

      <!-- 2-4. 带Tab的模块（根据type显示不同Tab，且仅显示有权限的Tab） -->
      <view v-if="!loading && currentType >= 2 && currentType <= 4">
        <!-- Tab切换栏（仅渲染有权限的Tab） -->
        <view class="tab-bar">
          <view 
            v-for="(tab, index) in filteredCurrentTabs" 
            :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内容（无权限时显示空状态） -->
        <view class="pdf-tab-content">
          <template v-if="filteredCurrentTabs.length > 0">
            <web-view 
              :src="getPdfViewerUrl(currentPdf.url)" 
              class="webview"
              @error="handlePdfError"
              @load="handleWebViewLoad"
              :key="getPdfViewerUrl(currentPdf.url)" 
            ></web-view>
          </template>
          <template v-else>
            <view class="pdf-empty">暂无访问权限</view>
          </template>
        </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';
import api from "@/api/api";

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

// 权限数据类型（与接口返回结构对齐）
interface PermissionRight {
  key: string;
}
interface PermissionItem {
  key: string; // 对应菜单的key（如cases、products）
  rights: PermissionRight[]; // 子权限（对应Tab的id）
}

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

// 接收URL参数的type（默认1：公司介绍）
const currentType = ref<number>(1);
// 加载状态
const loading = ref(true);
// 当前激活的Tab索引
const activeTab = ref(0);
// 当前显示的PDF信息
const currentPdf = ref<PdfItem>({ id: '', title: '', url: '' });
// 接口返回的权限列表
const permissionList = ref<PermissionItem[]>([]);

// 公司介绍PDF（type=1，固定配置）
const companyPdf = ref<PdfItem>({
  id: 'company',
  title: '公司介绍',
  url: `${OSS_BASE_URL}/public/company-intro.pdf`
});

// 所有模块的原始Tab配置（未过滤权限）
const rawTabConfig = ref<Record<number, PdfItem[]>>({
  2: [ // type=2：案例分享（对应权限key=cases）
    { id: 'case1', title: '规划案例', url: `${OSS_BASE_URL}/cases/planning.pdf` },
    { id: 'case2', title: '团财案例', url: `${OSS_BASE_URL}/cases/CorporateServiceDeliveryCase-GroupandPropertyInsurance.pdf` }
  ],
  3: [ // type=3：产品分析（对应权限key=products）
    { id: 'product2', title: '港险分析', url: `${OSS_BASE_URL}/products/hk-analysis.pdf` },
    { id: 'product1', title: '港险明细', url: `${OSS_BASE_URL}/products/2025Q3-hk-detail.pdf` },
    { id: 'product3', title: '产品搜索', url: '' },
  ],
  4: [ // type=4：制度（对应权限key=policies）
    { 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` }
  ]
});

// 类型与权限key的映射关系（关键：建立type和权限key的关联）
const typeToPermissionKey = ref<Record<number, string>>({
  2: 'cases',    // type=2（案例分享）→ 权限key=cases
  3: 'products', // type=3（产品分析）→ 权限key=products
  4: 'policies'  // type=4（制度）→ 权限key=policies
});

// ========================== 生命周期 ==========================
onLoad((query) => {
  // 1. 解析URL中的type参数（默认1）
  currentType.value = Number(query.type) || 1;
  // 2. 查询用户信息和权限
  queryUserInfoAndPermission();
});

// ========================== 核心逻辑 ==========================
/**
 * 查询用户信息和权限列表
 */
const queryUserInfoAndPermission = () => {
  const userId = uni.getStorageSync('cffp_userId');
  if (!userId) {
    uni.setStorageSync('loginType', 'visitor');
    initPdfAfterPermission();
    return;
  }

  api.queryInfo({ userId }).then(res => {
    if (res.success) {
      // 存储接口返回的权限列表（格式：[{key: 'cases', rights: [{key: 'case1'}]}]）
      permissionList.value = res.data.accessPermission || [];
    } else {
      uni.setStorageSync('loginType', 'visitor');
      permissionList.value = []; // 游客无权限
    }
    // 权限获取后初始化PDF显示
    initPdfAfterPermission();
  }).catch(() => {
    uni.setStorageSync('loginType', 'visitor');
    permissionList.value = [];
    initPdfAfterPermission();
  });
};

/**
 * 权限获取后初始化PDF（过滤Tab + 设置默认显示项）
 */
const initPdfAfterPermission = () => {
  loading.value = true;

  // 1. 过滤当前type对应的有权限的Tab
  const filteredTabs = filteredCurrentTabs.value;
  
  // 2. 处理不同type的初始化逻辑
  if (currentType.value >= 2 && currentType.value <= 4) {
    if (filteredTabs.length > 0) {
      // 有有权限的Tab：默认显示第一个
      activeTab.value = 0;
      currentPdf.value = filteredTabs[0];
    } else {
      // 无权限：清空当前PDF
      currentPdf.value = { id: '', title: '', url: '' };
    }
  }

  // 3. 模拟加载延迟（优化用户体验）
  setTimeout(() => {
    loading.value = false;
  }, 200);
};

/**
 * 计算属性：过滤当前type对应的有权限的Tab列表
 */
const filteredCurrentTabs = computed(() => {
  // 1. 获取当前type的原始Tab列表
  const originalTabs = rawTabConfig.value[currentType.value] || [];
  // 2. 若为游客/无权限列表：返回空
  if (permissionList.value.length === 0) return [];
  // 3. 获取当前type对应的权限key（如type=2→key=cases）
  const targetPermissionKey = typeToPermissionKey.value[currentType.value];
  if (!targetPermissionKey) return [];
  // 4. 找到权限列表中对应的权限项
  const targetPermission = permissionList.value.find(
    item => item.key === targetPermissionKey
  );
  if (!targetPermission || targetPermission.rights.length === 0) return [];
  // 5. 提取有权限的Tab id集合（如['case1', 'case2']）
  const allowedTabIds = new Set(
    targetPermission.rights.map(right => right.key)
  );
  // 6. 过滤原始Tab列表：仅保留有权限的项
  return originalTabs.filter(tab => allowedTabIds.has(tab.id));
});

/**
 * 切换Tab
 * @param index 目标Tab索引
 */
const switchTab = (index: number) => {
  const tabs = filteredCurrentTabs.value;
  // 边界校验：索引无效或无权限Tab时不处理
  if (index < 0 || index >= tabs.length || tabs.length === 0) return;

  // 显示加载状态（优化体验）
  uni.showLoading({ title: '加载中...' });
  
  // 延迟100ms更新：避免WebView加载冲突
  setTimeout(() => {
    activeTab.value = index;
    currentPdf.value = tabs[index];
    
    // 延迟关闭加载提示（给WebView启动时间）
    setTimeout(() => {
      uni.hideLoading();
    }, 300);
  }, 100);
};

/**
 * 生成PDF查看器URL（添加随机参数+时间戳，避免缓存）
 * @param pdfUrl PDF原始URL
 */
const getPdfViewerUrl = (pdfUrl: string) => {
  if (!pdfUrl) return '';
  const randomStr = getRandomStr(); // 随机字符串
  const timestamp = new Date().getTime(); // 时间戳
  // 编码PDF URL + 拼接唯一参数
  return `/static/pdf/web/viewer.html?file=${encodeURIComponent(pdfUrl)}&random=${randomStr}&t=${timestamp}`;
};

/**
 * 生成指定长度的随机字符串（用于URL唯一标识）
 * @param length 字符串长度（默认8）
 */
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;
};

// ========================== 事件处理 ==========================
/**
 * WebView加载完成监听（调试用）
 */
const handleWebViewLoad = (e: any) => {
  const loadedSrc = e.detail.src;
  console.log('WebView加载完成：', loadedSrc);

  // 解析并验证PDF地址（可选：调试时用）
  const urlObj = new URL(loadedSrc);
  const fileParam = urlObj.searchParams.get('file');
  if (fileParam) {
    const decodedFileUrl = decodeURIComponent(fileParam);
    console.log('当前加载的PDF地址：', decodedFileUrl);
    // 可选：验证PDF地址可用性
    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' });
      }
    });
  }
};

/**
 * 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;
}

.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; /* 隐藏滚动条（Chrome/Safari） */
  }

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

    .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;
      transition: all 0.3s;
    }

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

/* Tab对应的PDF内容区域 */
.pdf-tab-content {
  width: 100%;
  position: absolute;
  top: 48px; /* 与Tab栏高度一致，避免重叠 */
  bottom: 0;
  background-color: #ffffff;
}

/* 无权限/无Tab时的空状态 */
.pdf-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 14px;
  background-color: #ffffff;
}

/* WebView样式（占满父容器） */
.webview {
  width: 100%;
  height: 100%;
}

/* 加载动画 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>