<template>
  <div>
    <el-card shadow="never">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold">{{ t('document.document.header.title') }}</span>
          <el-button type="primary" @click="handleBack">{{ t('document.document.header.backToList') }}</el-button>
        </div>
      </template>

      <div class="content-wrapper">
        <!-- 文件夹树组件 -->
        <FolderTree ref="folderTreeRef" :project-id="projectId" @folder-click="handleFolderClick"
          @refresh="handleTreeRefresh" />

        <!-- 文档列表组件 -->
        <div class="content-container">
          <DocumentList ref="documentListRef" :selected-folder="selectedFolder" :tree-data="treeData"
            :project-id="projectId" @refresh-tree="handleTreeRefresh" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted, getCurrentInstance, type ComponentInternalInstance } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { FolderListVO } from '@/api/document/folder/types';
import FolderTree from './FolderTree.vue';
import DocumentList from './DocumentList.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { t } = useI18n();
const route = useRoute();
const router = useRouter();

// 从路由参数获取项目ID，并转换为数字类型
const projectId = computed(() => {
  const id = route.query.projectId;
  if (!id) return undefined;
  const numId = typeof id === 'string' ? parseInt(id) : id;
  console.log('Document Index - projectId:', numId, 'from route.query:', route.query.projectId);
  return numId;
});

// 组件引用
const folderTreeRef = ref<InstanceType<typeof FolderTree>>();
const documentListRef = ref<InstanceType<typeof DocumentList>>();

// 当前选中的文件夹
const selectedFolder = ref<FolderListVO | null>(null);

// 树数据（用于传递给DocumentList）
const treeData = ref<FolderListVO[]>([]);

// 返回项目列表
const handleBack = () => {
  router.push('/document/folder');
};

// 处理文件夹点击
const handleFolderClick = (folder: FolderListVO) => {
  // 国家、中心、文件夹都可以显示文档列表
  if (folder.type === 0 || folder.type === 1 || folder.type === 2) {
    selectedFolder.value = folder;
  } else {
    selectedFolder.value = null;
  }
  // 更新树数据
  handleTreeRefresh();
};

// 处理树刷新
const handleTreeRefresh = () => {
  // 刷新树数据以传递给DocumentList
  if (folderTreeRef.value) {
    // 可以通过ref访问子组件的数据
    treeData.value = (folderTreeRef.value as any).treeData || [];
    // 刷新临时文件夹数量
    (folderTreeRef.value as any).getTempDocumentCount?.();
  }
  // 刷新文档列表
  if (documentListRef.value) {
    (documentListRef.value as any).getDocumentList?.();
  }
};

// 监听路由参数变化
watch(() => route.query.projectId, (newProjectId) => {
  if (newProjectId) {
    // projectId 是 computed，会自动更新
    // 重新加载数据
    handleTreeRefresh();
  }
});

// 初始化时更新树数据
watch(
  () => folderTreeRef.value,
  () => {
    handleTreeRefresh();
  },
  { immediate: true }
);

// 组件挂载
onMounted(() => {
  // 初始化
});
</script>

<style scoped lang="scss">
.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.text-lg {
  font-size: 1.125rem;
}

.font-bold {
  font-weight: 700;
}

.content-wrapper {
  display: flex;
  height: calc(100vh - 250px);
  min-height: 500px;
}

.content-container {
  flex: 1;
  padding: 20px;
  overflow: auto;
}
</style>
