VideoList.vue

<template>
  <div class="video-list-container">
    <!-- 分类导航（集成筛选功能） -->
    <CategoryNavigation
      :classList="classList"
      :trigger="trigger"
      :hasRecommendVideos="hasRecommendVideos"
      :activeKey="activeKey"
      :filters="props.classList?.filters || {}"
      :selectedFilters="selectedFilters"
      :specialCategoryState="props.specialCategoryState"
      @tab-change="handleTabChange"
      @open-category-modal="openCategoryModal"
      @toggle-filter="handleToggleFilter"
      @reset-filters="handleResetFilters"
      @close-special-category="() => emit('close-special-category')"
    />

    <!-- Folder导航面包屑 -->
    <FolderBreadcrumb
      v-if="folderNavigationState.isActive"
      :breadcrumbs="folderNavigationState.breadcrumbs"
      @navigate="handleFolderNavigate"
      @go-back="handleFolderGoBack"
      @go-home="handleFolderGoHome"
      @exit-folder="handleExitFolder"
    />

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- Folder导航内容 -->
      <div v-if="folderNavigationState.isActive" class="tab-content">
        <VideoGrid
          :videos="folderNavigationState.currentData || []"
          :loading="folderNavigationState.loading || folderLoadingMore[folderNavigationState.currentBreadcrumb?.vod_id] || false"
          :hasMore="folderPageData[folderNavigationState.currentBreadcrumb?.vod_id]?.hasNext || false"
          :statsText="getStatsText()"
          :sourceRoute="props.sourceRoute"
          :module="props.module"
          :extend="props.extend"
          :api-url="props.apiUrl"
          @load-more="loadMoreFolderData(folderNavigationState.currentBreadcrumb?.vod_id)"
          @scroll-bottom="loadMoreFolderData(folderNavigationState.currentBreadcrumb?.vod_id)"
          @refresh-list="handleRefreshList"
          @special-action="(actionType, actionData) => emit('special-action', actionType, actionData)"
          @folder-navigate="handleFolderNavigateFromGrid"
        />
      </div>
      
      <!-- 特殊分类内容 -->
      <div v-else-if="specialCategoryState.isActive" class="tab-content">
        <VideoGrid
          :videos="listData[specialCategoryState.categoryData?.type_id] || []"
          :loading="loadingMore[specialCategoryState.categoryData?.type_id] || false"
          :hasMore="pageData[specialCategoryState.categoryData?.type_id]?.hasNext || false"
          :statsText="`${specialCategoryState.categoryData?.type_name || '特殊分类'}：共 ${listData[specialCategoryState.categoryData?.type_id]?.length || 0} 条`"
          :sourceRoute="props.sourceRoute"
          :module="props.module"
          :extend="props.extend"
          :api-url="props.apiUrl"
          @load-more="loadMoreData(specialCategoryState.categoryData?.type_id)"
          @scroll-bottom="loadMoreData(specialCategoryState.categoryData?.type_id)"
          @refresh-list="handleRefreshList"
          @special-action="(actionType, actionData) => emit('special-action', actionType, actionData)"
          @folder-navigate="handleFolderNavigateFromGrid"
        />
      </div>
      
      <!-- 推荐分类内容 -->
      <div v-else-if="activeKey === 'recommendTuijian404'" class="tab-content">
        <VideoGrid
          :videos="listData[activeKey] || []"
          :loading="loadingMore[activeKey] || false"
          :hasMore="false"
          :statsText="`推荐视频：共 ${listData[activeKey]?.length || 0} 条`"
          :sourceRoute="props.sourceRoute"
          :module="props.module"
          :extend="props.extend"
          :api-url="props.apiUrl"
          @refresh-list="handleRefreshList"
          @special-action="(actionType, actionData) => emit('special-action', actionType, actionData)"
        />
      </div>

      <!-- 其他分类内容 -->
      <div v-else class="tab-content">
        <!-- 视频网格 -->
        <VideoGrid
          ref="videoGridRef"
          :videos="listData[activeKey] || []"
          :loading="loadingMore[activeKey] || false"
          :hasMore="pageData[activeKey]?.hasNext || false"
          :sourceRoute="props.sourceRoute"
          :module="props.module"
          :extend="props.extend"
          :api-url="props.apiUrl"
          @load-more="loadMoreData(activeKey)"
          @scroll-bottom="loadMoreData(activeKey)"
          @refresh-list="handleRefreshList"
          @special-action="(actionType, actionData) => emit('special-action', actionType, actionData)"
          @folder-navigate="handleFolderNavigateFromGrid"
        />
      </div>
    </div>

    <!-- 分类弹窗 -->
    <CategoryModal
      :visible="categoryModalVisible"
      @update:visible="(val) => categoryModalVisible = val"
      :classList="classList"
      :hasRecommendVideos="hasRecommendVideos"
      :activeKey="activeKey"
      @select-category="selectCategory"
    />
  </div>
</template>

<script setup>
import { videoService, siteService } from "@/api/services";
import { ref, reactive, onMounted, watch, computed, nextTick } from "vue";
import { usePaginationStore } from '@/stores/paginationStore';
import { getCategoryData } from '@/api/modules/module';
import { processExtendParam } from '@/utils/apiUtils';
import CategoryNavigation from './CategoryNavigation.vue';
import FilterSection from './FilterSection.vue';
import VideoGrid from './VideoGrid.vue';
import CategoryModal from './CategoryModal.vue';
import FolderBreadcrumb from './FolderBreadcrumb.vue';

const props = defineProps({
  classList: Object,
  recommendVideos: {
    type: Array,
    default: () => []
  },
  trigger: {
    type: String,
    default: "click",
  },
  // 新增：来源页面信息
  sourceRoute: {
    type: Object,
    default: () => ({})
  },
  // 新增：返回时指定的activeKey
  returnToActiveKey: {
    type: String,
    default: ""
  },
  // T4接口调用相关参数
  module: {
    type: String,
    default: ''
  },
  extend: {
    type: Object,
    default: () => ({})
  },
  apiUrl: {
    type: String,
    default: ''
  },
  // 特殊分类状态
  specialCategoryState: {
    type: Object,
    default: () => ({
      isActive: false,
      categoryData: null,
      originalClassList: null,
      originalRecommendVideos: null
    })
  },
  // Folder导航状态
  folderNavigationState: {
    type: Object,
    default: () => ({
      isActive: false,
      breadcrumbs: [],
      currentData: [],
      currentBreadcrumb: null,
      loading: false
    })
  }
});

const emit = defineEmits(['activeKeyChange', 'special-action', 'close-special-category', 'folder-navigate']);

// 使用翻页统计store
const paginationStore = usePaginationStore();

// 响应式数据
const activeKey = ref("");
const listData = reactive({});
const pageData = reactive({});
const loadingMore = reactive({});
const filterVisible = reactive({});
const selectedFilters = reactive({});
const categoryModalVisible = ref(false);
const videoGridRef = ref(null);

// 目录模式翻页状态管理
const folderPageData = reactive({});
const folderLoadingMore = reactive({});

// 计算属性
const hasRecommendVideos = computed(() => {
  return props.recommendVideos && props.recommendVideos.length > 0;
});

// 计算默认的activeKey
const getDefaultActiveKey = () => {
  // 优先使用返回时指定的activeKey
  if (props.returnToActiveKey) {
    return props.returnToActiveKey;
  }
  
  if (hasRecommendVideos.value) {
    return "recommendTuijian404";
  }
  if (props.classList?.class && props.classList.class.length > 0) {
    return props.classList.class[0].type_id;
  }
  return "recommendTuijian404";
};

// 筛选相关方法
const getFiltersForCategory = (categoryId) => {
  if (!props.classList?.filters || !props.classList.filters[categoryId]) {
    return null;
  }
  return props.classList.filters[categoryId];
};

const toggleFilter = (filterKey, filterValue, filterName) => {
  if (!selectedFilters[activeKey.value]) {
    selectedFilters[activeKey.value] = {};
  }
  
  // 如果已选中，则取消选择
  if (selectedFilters[activeKey.value][filterKey] === filterValue) {
    delete selectedFilters[activeKey.value][filterKey];
    // 如果没有任何筛选条件了，删除整个分类的筛选对象
    if (Object.keys(selectedFilters[activeKey.value]).length === 0) {
      delete selectedFilters[activeKey.value];
    }
  } else {
    // 否则选择该筛选条件
    selectedFilters[activeKey.value][filterKey] = filterValue;
  }
  
  // 重新获取数据
  refreshCategoryData(activeKey.value);
};

const resetFilters = (categoryId) => {
  delete selectedFilters[categoryId];
  refreshCategoryData(categoryId);
};

const refreshCategoryData = (categoryId) => {
  // 清除当前分类的所有数据，强制重新加载
  delete listData[categoryId];
  delete pageData[categoryId];
  
  // 重置加载状态
  loadingMore[categoryId] = false;
  
  // 如果是当前激活的分类，立即重新获取数据（强制重新加载）
  if (activeKey.value === categoryId) {
    getListData(categoryId, true);
  }
};

// 获取统计文本
const getStatsText = (categoryId) => {
  const categoryName = props.classList?.class?.find(item => item.type_id === categoryId)?.type_name || '';
  const currentPage = pageData[categoryId]?.page || 1;
  const loadedCount = listData[categoryId]?.length || 0;
  const totalCount = pageData[categoryId]?.total;
  
  let text = `${categoryName}：当前第 ${currentPage} 页，已加载 ${loadedCount} 条`;
  if (totalCount) {
    text += ` / 共 ${totalCount} 条`;
  }
  
  // 如果当前处于folder模式，添加folder统计信息
  if (props.folderNavigationState.isActive && props.folderNavigationState.currentBreadcrumb) {
    const folderName = props.folderNavigationState.currentBreadcrumb.vod_name || '未知目录';
    const folderItemCount = props.folderNavigationState.currentData?.length || 0;
    text += `，当前目录：${folderName}，项目数：${folderItemCount}`;
  }
  
  return text;
};

// 数据获取方法
const getListData = async (key, forceReload = false) => {
  console.log(key, "选中分类id");
  if (!listData.hasOwnProperty(key) || forceReload) {
    try {
      const currentSite = await siteService.getCurrentSite();
      
      let videoList, pagination;
      if (key === "recommendTuijian404") {
        // 使用传入的推荐视频数据 - 首页推荐数据不允许翻页
        videoList = props.recommendVideos || [];
        // 推荐视频数据不允许翻页
        pagination = { page: 1, hasNext: false };
      } else {
        // 获取分类视频，包含筛选参数
        const filters = selectedFilters[key] || {};
        const categoryData = await videoService.getCategoryVideos(currentSite.key, {
          typeId: key,
          page: 1,
          filters: filters,
          extend: currentSite.ext,
          apiUrl: currentSite.api
        });
        videoList = categoryData.videos || [];
        pagination = categoryData.pagination || { page: 1, hasNext: false };
      }
      
      listData[key] = videoList;
      pageData[key] = pagination;
      loadingMore[key] = false;
      
      // 更新全局翻页统计信息
      if (key === activeKey.value) {
        paginationStore.updateStats(getStatsText(key));
      }
    } catch (error) {
      console.error("获取视频列表失败:", error);
      listData[key] = [];
      pageData[key] = { page: 1, hasNext: false };
      loadingMore[key] = false;
    }
  }
};

// 检查是否为无效数据（防无限翻页）
const isInvalidData = (videos) => {
  if (!videos || videos.length === 0) return true;
  return videos.some(video => video.vod_id === 'no_data');
};

// 检查数据是否与上一页重复
const isDuplicateData = (currentList, newVideos) => {
  if (!newVideos || newVideos.length === 0) return true;
  if (!currentList || currentList.length === 0) return false;
  
  const currentIds = currentList.slice(-newVideos.length).map(v => v.vod_id);
  const newIds = newVideos.map(v => v.vod_id);
  
  return JSON.stringify(currentIds) === JSON.stringify(newIds);
};

// 加载更多数据
const loadMoreData = async (key) => {
  if (loadingMore[key] || !pageData[key]?.hasNext) {
    return;
  }
  
  loadingMore[key] = true;
  
  try {
    const currentSite = await siteService.getCurrentSite();
    const nextPage = pageData[key].page + 1;
    
    let newVideos = [];
    let newPagination = { page: nextPage, hasNext: false };
    
    if (key === "recommendTuijian404") {
      // 推荐视频不允许翻页，直接返回
      return;
    } else {
      // 分类视频翻页
      const filters = selectedFilters[key] || {};
      const categoryData = await videoService.getCategoryVideos(currentSite.key, {
        typeId: key,
        page: nextPage,
        filters: filters,
        extend: currentSite.ext,
        apiUrl: currentSite.api
      });
      newVideos = categoryData.videos || [];
      newPagination = categoryData.pagination || { page: nextPage, hasNext: false };
    }
    
    if (isInvalidData(newVideos) || isDuplicateData(listData[key], newVideos)) {
      console.log("检测到无效数据或重复数据，停止翻页");
      pageData[key] = { 
        ...pageData[key], 
        hasNext: false 
      };
      return;
    }
    
    listData[key] = [...listData[key], ...newVideos];
    pageData[key] = newPagination;
    
    // 更新全局翻页统计信息
    if (key === activeKey.value) {
      paginationStore.updateStats(getStatsText(key));
    }
  } catch (error) {
    console.error("加载更多数据失败:", error);
    pageData[key] = { 
      ...pageData[key], 
      hasNext: false 
    };
  } finally {
    loadingMore[key] = false;
  }
};

// 目录模式加载更多数据
const loadMoreFolderData = async (folderId) => {
  if (folderLoadingMore[folderId] || !folderPageData[folderId]?.hasNext) {
    return;
  }
  
  folderLoadingMore[folderId] = true;
  
  try {
    const nextPage = folderPageData[folderId].page + 1;
    
    // 调用T4分类接口获取下一页数据
    const response = await getCategoryData(props.module, {
      t: folderId,
      pg: nextPage,
      extend: processExtendParam(props.extend),
      apiUrl: props.apiUrl
    });
    
    console.log('🗂️ [DEBUG] 目录翻页接口响应:', response);
    
    if (response && response.list && response.list.length > 0) {
      const newVideos = response.list;
      
      // 检查是否为无效数据或重复数据
      if (isInvalidData(newVideos) || isDuplicateData(props.folderNavigationState.currentData, newVideos)) {
        console.log("目录翻页检测到无效数据或重复数据，停止翻页");
        folderPageData[folderId] = { 
          ...folderPageData[folderId], 
          hasNext: false 
        };
        return;
      }
      
      // 合并新数据到当前目录数据
      const updatedData = [...props.folderNavigationState.currentData, ...newVideos];
      
      // 更新目录状态
      const updatedState = {
        ...props.folderNavigationState,
        currentData: updatedData,
        loading: false
      };
      
      // 更新翻页状态
      folderPageData[folderId] = {
        page: nextPage,
        hasNext: response.page < response.pagecount || false,
        total: response.total || 0
      };
      
      emit('folder-navigate', updatedState);
      
      // 更新统计信息
      await nextTick();
      if (activeKey.value) {
        const statsText = getStatsText(activeKey.value);
        paginationStore.updateStats(statsText);
        console.log('🗂️ [DEBUG] 更新目录翻页统计信息:', statsText);
      }
    } else {
      // 没有更多数据
      folderPageData[folderId] = { 
        ...folderPageData[folderId], 
        hasNext: false 
      };
      console.log('🗂️ [DEBUG] 目录没有更多数据');
    }
  } catch (error) {
    console.error("目录加载更多数据失败:", error);
    folderPageData[folderId] = { 
      ...folderPageData[folderId], 
      hasNext: false 
    };
  } finally {
    folderLoadingMore[folderId] = false;
  }
};

// 事件处理方法
const handleTabChange = (key) => {
  activeKey.value = key;
  getListData(key);
  emit('activeKeyChange', key);
};

const handleToggleFilter = (data) => {
  const { filterKey, filterValue, filterName } = data;
  toggleFilter(filterKey, filterValue, filterName);
};

const handleResetFilters = () => {
  resetFilters(activeKey.value);
};

const openCategoryModal = () => {
  categoryModalVisible.value = true;
};

const selectCategory = (categoryId) => {
  activeKey.value = categoryId;
  getListData(categoryId);
  emit('activeKeyChange', categoryId);
  // 更新全局翻页统计信息
  setTimeout(() => {
    paginationStore.updateStats(getStatsText(categoryId));
  }, 100);
};

// 监听器
watch(() => props.recommendVideos, (newVideos) => {
  if (newVideos && newVideos.length > 0) {
    listData["recommendTuijian404"] = newVideos;
    pageData["recommendTuijian404"] = { page: 1, hasNext: false };
    loadingMore["recommendTuijian404"] = false;
    console.log("推荐数据已更新:", newVideos.length, "条");
  } else {
    listData["recommendTuijian404"] = [];
    pageData["recommendTuijian404"] = { page: 1, hasNext: false };
    loadingMore["recommendTuijian404"] = false;
  }
  
  const newActiveKey = getDefaultActiveKey();
  if (activeKey.value !== newActiveKey) {
    activeKey.value = newActiveKey;
    getListData(newActiveKey);
    emit('activeKeyChange', newActiveKey);
  }
}, { immediate: true });

watch(() => props.classList, (newClassList, oldClassList) => {
  if (newClassList !== oldClassList) {
    // 清除筛选状态
    Object.keys(selectedFilters).forEach(key => {
      delete selectedFilters[key];
    });
    Object.keys(filterVisible).forEach(key => {
      delete filterVisible[key];
    });
  }
  
  const newActiveKey = getDefaultActiveKey();
  if (activeKey.value !== newActiveKey) {
    activeKey.value = newActiveKey;
    getListData(newActiveKey);
    emit('activeKeyChange', newActiveKey);
  }
}, { immediate: true });

onMounted(() => {
  activeKey.value = getDefaultActiveKey();
  
  // 如果有returnToActiveKey参数，说明是状态恢复，不立即加载数据
  // 等待父组件调用restoreState方法
  if (!props.returnToActiveKey) {
    getListData(activeKey.value);
  }
  
  emit('activeKeyChange', activeKey.value);
});

// 暴露方法给父组件
defineExpose({
  getCurrentState: () => ({
    activeKey: activeKey.value,
    currentPage: pageData[activeKey.value]?.page || 1,
    videos: listData[activeKey.value] || [],
    hasMore: pageData[activeKey.value]?.hasNext || false,
    hasData: listData[activeKey.value] && listData[activeKey.value].length > 0,
    scrollPosition: videoGridRef.value ? videoGridRef.value.getCurrentScrollPosition() : 0
  }),
  restoreState: (state) => {
    if (state.activeKey && state.activeKey !== activeKey.value) {
      activeKey.value = state.activeKey;
      emit('activeKeyChange', state.activeKey);
      
      // 如果该分类已有数据，不需要重新加载
      if (!listData[state.activeKey] || listData[state.activeKey].length === 0) {
        getListData(state.activeKey);
      }
    }
  },
  restoreFullState: (state) => {
    if (state.activeKey) {
      // 恢复完整状态，包括数据
      activeKey.value = state.activeKey;
      
      if (state.videos && state.videos.length > 0) {
        listData[state.activeKey] = [...state.videos];
        pageData[state.activeKey] = {
          page: state.currentPage || 1,
          hasNext: state.hasMore || false
        };
        console.log(`恢复分类 ${state.activeKey} 的完整状态:`, {
          videos: state.videos.length,
          page: state.currentPage,
          hasMore: state.hasMore,
          scrollPosition: state.scrollPosition
        });
      }
      
      emit('activeKeyChange', state.activeKey);
      
      // 更新全局翻页统计信息
      setTimeout(() => {
        paginationStore.updateStats(getStatsText(state.activeKey));
      }, 100);
      
      // 恢复滚动位置
      if (state.scrollPosition && videoGridRef.value) {
        setTimeout(() => {
          videoGridRef.value.restoreScrollPosition(state.scrollPosition);
        }, 200);
      }
    }
  },
  refreshCurrentCategory: () => {
    if (activeKey.value) {
      console.log('刷新当前分类:', activeKey.value);
      // 重置当前分类的数据
      listData[activeKey.value] = [];
      pageData[activeKey.value] = { page: 1, hasNext: true };
      loadingMore[activeKey.value] = false;
      // 重新加载数据
      getListData(activeKey.value);
    }
  },
  setSpecialCategoryData: (categoryId, videos, pagination) => {
    console.log('设置特殊分类数据:', { categoryId, videosCount: videos?.length, pagination });
    
    // 直接设置特殊分类的数据
    listData[categoryId] = videos || [];
    pageData[categoryId] = {
      page: pagination?.page || 1,
      hasNext: pagination?.hasNext || false,
      total: pagination?.total || 0
    };
    loadingMore[categoryId] = false;
    
    // 更新全局翻页统计信息
    setTimeout(() => {
      paginationStore.updateStats(getStatsText(categoryId));
    }, 100);
    
    console.log('特殊分类数据设置完成:', {
      categoryId,
      videosCount: listData[categoryId]?.length || 0,
      pageInfo: pageData[categoryId]
    });
  }
});

// Folder导航相关方法
const handleFolderNavigateFromGrid = async (video) => {
  console.log('🗂️ [DEBUG] VideoList收到folder导航请求:', video);
  
  try {
    // 设置加载状态
    const loadingState = {
      isActive: true,
      breadcrumbs: [{ vod_id: video.vod_id, vod_name: video.vod_name }],
      currentData: [],
      currentBreadcrumb: { vod_id: video.vod_id, vod_name: video.vod_name },
      loading: true
    };
    
    emit('folder-navigate', loadingState);
    
    // 调用T4分类接口
    const response = await getCategoryData(props.module, {
      t: video.vod_id, // 使用vod_id作为type_id
      pg: 1,
      extend: processExtendParam(props.extend),
      apiUrl: props.apiUrl
    });
    
    console.log('🗂️ [DEBUG] T4分类接口响应:', response);
    
    if (response && response.list && response.list.length > 0) {
      // 解析返回的分类数据
      const folderData = response.list;
      
      // 初始化翻页状态
      folderPageData[video.vod_id] = {
        page: response.page || 1,
        hasNext: response.page < response.pagecount || false,
        total: response.total || 0
      };
      folderLoadingMore[video.vod_id] = false;
      
      // 更新folder导航状态
      const updatedState = {
        isActive: true,
        breadcrumbs: [{ vod_id: video.vod_id, vod_name: video.vod_name }],
        currentData: folderData,
        currentBreadcrumb: { vod_id: video.vod_id, vod_name: video.vod_name },
        loading: false
      };
      
      emit('folder-navigate', updatedState);
      
      // 等待状态更新后，使用getStatsText生成正确的统计信息
      await nextTick();
      if (activeKey.value) {
        const statsText = getStatsText(activeKey.value);
        paginationStore.updateStats(statsText);
        console.log('🗂️ [DEBUG] 更新folder统计信息:', statsText);
      }
    } else {
      console.warn('🗂️ [DEBUG] T4分类接口返回数据为空');
      // 返回空数据状态
      const emptyState = {
        isActive: true,
        breadcrumbs: [{ vod_id: video.vod_id, vod_name: video.vod_name }],
        currentData: [],
        currentBreadcrumb: { vod_id: video.vod_id, vod_name: video.vod_name },
        loading: false
      };
      
      emit('folder-navigate', emptyState);
      
      // 等待状态更新后，使用getStatsText生成正确的统计信息
      await nextTick();
      if (activeKey.value) {
        const statsText = getStatsText(activeKey.value);
        paginationStore.updateStats(statsText);
        console.log('🗂️ [DEBUG] 更新folder统计信息(空):', statsText);
      }
    }
  } catch (error) {
    console.error('🗂️ [ERROR] Folder导航失败:', error);
    
    // 返回错误状态
    const errorState = {
      isActive: true,
      breadcrumbs: [{ vod_id: video.vod_id, vod_name: video.vod_name }],
      currentData: [],
      currentBreadcrumb: { vod_id: video.vod_id, vod_name: video.vod_name },
      loading: false
    };
    
    emit('folder-navigate', errorState);
    
    // 等待状态更新后，使用getStatsText生成正确的统计信息
    await nextTick();
    if (activeKey.value) {
      const statsText = getStatsText(activeKey.value);
      paginationStore.updateStats(statsText);
      console.log('🗂️ [DEBUG] 更新folder统计信息(错误):', statsText);
    }
  }
};

const handleFolderNavigate = async (breadcrumb) => {
  console.log('🗂️ [DEBUG] 面包屑导航到:', breadcrumb);
  
  try {
    // 设置加载状态
    const currentBreadcrumbs = props.folderNavigationState.breadcrumbs;
    const targetIndex = currentBreadcrumbs.findIndex(b => b.vod_id === breadcrumb.vod_id);
    const newBreadcrumbs = targetIndex >= 0 ? currentBreadcrumbs.slice(0, targetIndex + 1) : currentBreadcrumbs;
    
    const loadingState = {
      ...props.folderNavigationState,
      breadcrumbs: newBreadcrumbs,
      currentBreadcrumb: breadcrumb,
      loading: true
    };
    
    emit('folder-navigate', loadingState);
    
    // 调用T4分类接口
    const response = await getCategoryData(props.module, {
      t: breadcrumb.vod_id,
      pg: 1,
      extend: processExtendParam(props.extend),
      apiUrl: props.apiUrl
    });
    
    if (response && response.list && response.list.length > 0) {
      const folderData = response.list;
      
      // 更新翻页状态
      folderPageData[breadcrumb.vod_id] = {
        page: response.page || 1,
        hasNext: response.page < response.pagecount || false,
        total: response.total || 0
      };
      folderLoadingMore[breadcrumb.vod_id] = false;
      
      const updatedState = {
        ...props.folderNavigationState,
        breadcrumbs: newBreadcrumbs,
        currentData: folderData,
        currentBreadcrumb: breadcrumb,
        loading: false
      };
      
      emit('folder-navigate', updatedState);
      
      // 等待状态更新后，使用getStatsText生成正确的统计信息
      await nextTick();
      if (activeKey.value) {
        const statsText = getStatsText(activeKey.value);
        paginationStore.updateStats(statsText);
        console.log('🗂️ [DEBUG] 面包屑导航更新统计信息:', statsText);
      }
    }
  } catch (error) {
    console.error('🗂️ [ERROR] 面包屑导航失败:', error);
  }
};

const handleFolderGoBack = () => {
  console.log('🗂️ [DEBUG] 返回上一级folder');
  
  const currentBreadcrumbs = props.folderNavigationState.breadcrumbs;
  if (currentBreadcrumbs.length > 1) {
    const newBreadcrumbs = currentBreadcrumbs.slice(0, -1);
    const targetBreadcrumb = newBreadcrumbs[newBreadcrumbs.length - 1];
    handleFolderNavigate(targetBreadcrumb);
  } else {
    // 如果只有一级，返回到正常列表模式
    handleFolderGoHome();
  }
};

const handleFolderGoHome = () => {
  console.log('🗂️ [DEBUG] 返回folder根目录');
  
  const homeState = {
    isActive: false,
    breadcrumbs: [],
    currentData: [],
    currentBreadcrumb: null,
    loading: false
  };
  
  emit('folder-navigate', homeState);
  
  // 恢复正常分类的统计信息
  if (activeKey.value && listData[activeKey.value]) {
    const statsText = getStatsText(activeKey.value);
    paginationStore.updateStats(statsText);
    console.log('🗂️ [DEBUG] 退出folder模式，恢复统计信息:', statsText);
  }
};

const handleExitFolder = () => {
  console.log('🗂️ [DEBUG] 退出folder模式');
  
  const exitState = {
    isActive: false,
    breadcrumbs: [],
    currentData: [],
    currentBreadcrumb: null,
    loading: false
  };
  
  emit('folder-navigate', exitState);
  
  // 恢复正常分类的统计信息
  if (activeKey.value && listData[activeKey.value]) {
    const statsText = getStatsText(activeKey.value);
    paginationStore.updateStats(statsText);
    console.log('🗂️ [DEBUG] 退出folder模式，恢复统计信息:', statsText);
  }
};

// 处理刷新列表事件
const handleRefreshList = () => {
  console.log('VideoList收到刷新列表请求');
  if (activeKey.value) {
    console.log('刷新当前分类:', activeKey.value);
    // 重置当前分类的数据
    listData[activeKey.value] = [];
    pageData[activeKey.value] = { page: 1, hasNext: true };
    loadingMore[activeKey.value] = false;
    // 重新加载数据
    getListData(activeKey.value);
  }
};
</script>

<style scoped>
.video-list-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>