<template>
  <div class="modern-page-container">
    <div class="page-wrapper">
      <!-- 内容卡片 -->
      <el-card class="content-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span class="card-title">
              <el-icon class="title-icon"><Document /></el-icon>
              学工文件管理
            </span>
            <div class="header-actions">
              <el-button 
                icon="FolderAdd" 
                type="primary" 
                @click="handleAddFolder">
                新建文件夹
              </el-button>
              <el-button 
                icon="FolderAdd" 
                type="success" 
                class="ml10" 
                @click="handleAddFile">
                上传文件
              </el-button>
              <el-button 
                icon="Refresh" 
                class="ml10" 
                @click="getDataList">
                刷新
              </el-button>
            </div>
          </div>
        </template>

        <!-- 面包屑导航 -->
        <div class="breadcrumb-wrapper mb16" v-if="breadcrumbList.length > 0">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>
              <el-button link @click="handleBreadcrumbClick(null)">
                <el-icon><Folder /></el-icon>
                根目录
              </el-button>
            </el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.id">
              <el-button 
                link 
                @click="handleBreadcrumbClick(item)"
                :disabled="index === breadcrumbList.length - 1">
                {{ item.classification || item.fileName }}
              </el-button>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <!-- 表格 -->
        <el-table 
          :data="state.dataList" 
          v-loading="state.loading"
          stripe
          :cell-style="tableStyle.cellStyle"
          :header-cell-style="tableStyle.headerCellStyle"
          class="modern-table">
          <el-table-column type="index" label="序号" width="70" align="center">
            <template #header>
              <el-icon><List /></el-icon>
            </template>
            <template #default="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="classification" label="文件夹名称" min-width="200" show-overflow-tooltip>
            <template #header>
              <el-icon><Folder /></el-icon>
              <span style="margin-left: 4px">文件夹名称</span>
            </template>
            <template #default="scope">
              <span v-if="scope.row.classification">{{ scope.row.classification }}</span>
              <span v-else class="text-gray-400">-</span>
            </template>
          </el-table-column>
          <el-table-column prop="fileName" label="文件名称" min-width="200" show-overflow-tooltip>
            <template #header>
              <el-icon><Document /></el-icon>
              <span style="margin-left: 4px">文件名称</span>
            </template>
            <template #default="scope">
              <span v-if="scope.row.fileName">{{ scope.row.fileName }}</span>
              <span v-else class="text-gray-400">-</span>
            </template>
          </el-table-column>
          <el-table-column prop="level" label="层级" width="80" align="center">
            <template #header>
              <el-icon><Grid /></el-icon>
              <span style="margin-left: 4px">层级</span>
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注" min-width="150" show-overflow-tooltip>
            <template #header>
              <el-icon><EditPen /></el-icon>
              <span style="margin-left: 4px">备注</span>
            </template>
            <template #default="scope">
              <span v-if="scope.row.remarks">{{ scope.row.remarks }}</span>
              <span v-else class="text-gray-400">-</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" align="center">
            <template #header>
              <el-icon><Clock /></el-icon>
              <span style="margin-left: 4px">创建时间</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250" align="center" fixed="right">
            <template #header>
              <el-icon><Setting /></el-icon>
              <span style="margin-left: 4px">操作</span>
            </template>
            <template #default="scope">
              <!-- 文件夹：进入、编辑、删除 -->
              <template v-if="scope.row.classification">
                <el-button 
                  icon="FolderOpened" 
                  link 
                  type="primary" 
                  @click="handleEnterFolder(scope.row)">
                  进入
                </el-button>
                <el-button 
                  icon="Edit" 
                  link 
                  type="primary" 
                  @click="handleEditFolder(scope.row)">
                  编辑
                </el-button>
                <el-button 
                  icon="Delete" 
                  link 
                  type="danger" 
                  @click="handleDelete(scope.row)">
                  删除
                </el-button>
              </template>
              <!-- 文件：下载、编辑、删除 -->
              <template v-else>
                <el-button 
                  icon="Download" 
                  link 
                  type="primary" 
                  @click="handleDownload(scope.row)">
                  下载
                </el-button>
                <el-button 
                  icon="Edit" 
                  link 
                  type="primary" 
                  @click="handleEditFile(scope.row)">
                  编辑
                </el-button>
                <el-button 
                  icon="Delete" 
                  link 
                  type="danger" 
                  @click="handleDelete(scope.row)">
                  删除
                </el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 新增/编辑文件弹窗 -->
    <form-dialog ref="formDialogRef" @refresh="getDataList" />

    <!-- 新增/编辑文件夹弹窗 -->
    <folder-dialog ref="folderDialogRef" @refresh="getDataList" />
  </div>
</template>

<script setup lang="ts" name="FileManager">
import { reactive, ref, onMounted, computed } from 'vue'
import { BasicTableProps, useTable } from "/@/hooks/table";
import { fetchList, delObj } from "/@/api/stuwork/filemanager";
import { useMessage, useMessageBox } from "/@/hooks/message";
import FormDialog from './form.vue'
import FolderDialog from './folder.vue'
import { List, Document, Folder, Grid, EditPen, Clock, Setting, FolderOpened, Download } from '@element-plus/icons-vue'

// 定义变量内容
const formDialogRef = ref()
const folderDialogRef = ref()
const currentParentId = ref<string | null>(null)
const breadcrumbList = ref<any[]>([])

// 配置 useTable（接口返回数组，非分页结构）
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    parentId: null as string | null
  },
  pageList: async (params: any) => {
    const res = await fetchList(params)
    // 数据链是 data.data.records，需要正确解析
    let list: any[] = []
    if (res?.data) {
      // 如果 res.data 是数组，直接使用
      if (Array.isArray(res.data)) {
        list = res.data
      } 
      // 如果 res.data.data 存在且是对象，尝试取 records
      else if (res.data.data && res.data.data.records && Array.isArray(res.data.data.records)) {
        list = res.data.data.records
      }
      // 如果 res.data.records 存在且是数组，直接使用
      else if (res.data.records && Array.isArray(res.data.records)) {
        list = res.data.records
      }
    }
    return {
      data: list  // isPage: false 时，直接返回数组
    }
  },
  props: {
    item: 'records',
    totalCount: 'total'
  },
  createdIsNeed: true,
  isPage: false // 不分页
})

// table hook
const {
  getDataList,
  tableStyle
} = useTable(state)

// 进入文件夹
const handleEnterFolder = (row: any) => {
  currentParentId.value = row.id
  breadcrumbList.value.push(row)
  state.queryForm.parentId = row.id
  getDataList()
}

// 面包屑点击
const handleBreadcrumbClick = (item: any | null) => {
  if (item === null) {
    // 返回根目录
    currentParentId.value = null
    breadcrumbList.value = []
    state.queryForm.parentId = null
  } else {
    // 返回指定目录
    const index = breadcrumbList.value.findIndex(b => b.id === item.id)
    if (index >= 0) {
      breadcrumbList.value = breadcrumbList.value.slice(0, index + 1)
      currentParentId.value = item.id
      state.queryForm.parentId = item.id
    }
  }
  getDataList()
}

// 新增文件夹
const handleAddFolder = () => {
  folderDialogRef.value?.openDialog('add', { parentId: currentParentId.value })
}

// 新增文件
const handleAddFile = () => {
  formDialogRef.value?.openDialog('add', { parentId: currentParentId.value })
}

// 编辑文件夹
const handleEditFolder = (row: any) => {
  folderDialogRef.value?.openDialog('edit', row)
}

// 编辑文件
const handleEditFile = (row: any) => {
  formDialogRef.value?.openDialog('edit', row)
}

// 下载文件
const handleDownload = (row: any) => {
  if (!row.fileUrl) {
    useMessage().warning('文件地址无效')
    return
  }
  // fileUrl 可能是完整 URL 或相对路径
  if (row.fileUrl.startsWith('http://') || row.fileUrl.startsWith('https://')) {
    window.open(row.fileUrl, '_blank')
  } else {
    // 相对路径，需要拼接 baseURL
    const baseURL = import.meta.env.VITE_API_URL || ''
    const url = baseURL + (row.fileUrl.startsWith('/') ? row.fileUrl : '/' + row.fileUrl)
    window.open(url, '_blank')
  }
}

// 删除
const handleDelete = async (row: any) => {
  const { confirm } = useMessageBox()
  try {
    const name = row.classification || row.fileName || '该项'
    await confirm(`确定要删除${name}吗？`)
    await delObj([row.id])
    useMessage().success('删除成功')
    getDataList()
  } catch (err: any) {
    if (err !== 'cancel') {
      useMessage().error(err?.msg || '删除失败')
    }
  }
}

// 初始化
onMounted(() => {
  getDataList()
})
</script>

<style scoped lang="scss">
@import '/@/assets/styles/modern-page.scss';

.breadcrumb-wrapper {
  padding: 12px 16px;
  background: #f5f7fa;
  border-radius: 4px;
  
  :deep(.el-breadcrumb) {
    .el-breadcrumb__item {
      .el-button {
        padding: 0;
        font-size: 14px;
      }
    }
  }
}

.mb16 {
  margin-bottom: 16px;
}
</style>
