<template>
  <Page
    description="管理系统文件上传、存储和分类"
    title="文件管理"
  >
    <!-- 搜索表单 -->
    <el-card>
        <el-form
          ref="searchFormRef"
          :model="searchForm"
          :inline="true"
          label-width="80px"
        >
          <el-form-item label="文件名称" prop="filename">
            <el-input
              v-model="searchForm.filename"
              placeholder="请输入文件名称"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          
          <el-form-item label="文件类型" prop="type">
            <el-select
              v-model="searchForm.type"
              placeholder="请选择文件类型"
              clearable
              style="width: 150px"
            >
              <el-option label="图片" value="image" />
              <el-option label="视频" value="video" />
              <el-option label="音频" value="audio" />
              <el-option label="文档" value="document" />
              <el-option label="压缩包" value="archive" />
              <el-option label="其他" value="other" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="存储驱动" prop="driver">
            <el-select
              v-model="searchForm.driver"
              placeholder="请选择存储驱动"
              clearable
              style="width: 150px"
            >
              <el-option label="本地存储" value="local" />
              <el-option label="阿里云OSS" value="oss" />
              <el-option label="腾讯云COS" value="cos" />
              <el-option label="七牛云" value="qiniu" />
              <el-option label="又拍云" value="upyun" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="分类" prop="categoryId">
            <el-tree-select
              v-model="searchForm.categoryId"
              :data="categoryTree"
              placeholder="请选择分类"
              clearable
              check-strictly
              :render-after-expand="false"
              style="width: 200px"
            />
          </el-form-item>
          
          <el-form-item label="上传时间" prop="dateRange">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 240px"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <Icon icon="ep:search" class="mr-1" />
              搜索
            </el-button>
            <el-button @click="handleResetSearch">
              <Icon icon="ep:refresh" class="mr-1" />
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    
    <!-- 操作栏 -->
    <div class="action-bar">
      <div class="action-left">
        <el-button type="primary" @click="handleUpload">
          <Icon icon="ep:upload" class="mr-1" />
          上传文件
        </el-button>
        <el-button @click="handleCreateCategory">
          <Icon icon="ep:folder-add" class="mr-1" />
          新建分类
        </el-button>
        <el-button
          type="danger"
          :disabled="!selectedFiles.length"
          @click="handleBatchDelete"
        >
          <Icon icon="ep:delete" class="mr-1" />
          批量删除
        </el-button>
        <el-button
          :disabled="!selectedFiles.length"
          @click="handleBatchMove"
        >
          <Icon icon="ep:folder" class="mr-1" />
          批量移动
        </el-button>
      </div>
      
      <div class="action-right">
        <el-radio-group v-model="viewMode" size="small">
          <el-radio-button label="grid">
            <Icon icon="ep:grid" />
          </el-radio-button>
          <el-radio-button label="list">
            <Icon icon="ep:list" />
          </el-radio-button>
        </el-radio-group>
      </div>
    </div>
    
    <!-- 文件列表 -->
    <div class="file-content">
      <el-row :gutter="20">
        <!-- 分类树 -->
        <el-col :span="6">
          <el-card class="category-card">
            <template #header>
              <div class="card-header">
                <span>文件分类</span>
                <el-button type="primary" text @click="handleCreateCategory">
                  <Icon icon="ep:plus" />
                </el-button>
              </div>
            </template>
            
            <el-tree
              ref="categoryTreeRef"
              :data="categoryTree"
              :props="{ label: 'name', children: 'children' }"
              node-key="id"
              :current-node-key="currentCategoryId"
              :expand-on-click-node="false"
              @node-click="handleCategoryClick"
            >
              <template #default="{ node, data }">
                <div class="category-node">
                  <Icon icon="ep:folder" class="mr-1" />
                  <span>{{ data.name }}</span>
                  <span class="file-count">({{ data.fileCount || 0 }})</span>
                  <div class="node-actions">
                    <el-button
                      type="primary"
                      text
                      size="small"
                      @click.stop="handleEditCategory(data)"
                    >
                      <Icon icon="ep:edit" />
                    </el-button>
                    <el-button
                      type="danger"
                      text
                      size="small"
                      @click.stop="handleDeleteCategory(data)"
                    >
                      <Icon icon="ep:delete" />
                    </el-button>
                  </div>
                </div>
              </template>
            </el-tree>
          </el-card>
        </el-col>
        
        <!-- 文件区域 -->
        <el-col :span="18">
          <el-card class="file-card">
            <!-- 网格视图 -->
            <div v-if="viewMode === 'grid'" class="file-grid" v-loading="loading">
              <div
                v-for="file in fileList"
                :key="file.id"
                class="file-item"
                :class="{ selected: selectedFiles.includes(file.id) }"
                @click="handleFileSelect(file)"
              >
                <div class="file-checkbox">
                  <el-checkbox
                    :model-value="selectedFiles.includes(file.id)"
                    @change="handleFileCheck(file.id, $event)"
                    @click.stop
                  />
                </div>
                
                <div class="file-preview">
                  <el-image
                    v-if="isImage(file.type)"
                    :src="file.url"
                    :preview-src-list="[file.url]"
                    fit="cover"
                    class="file-image"
                  />
                  <div v-else class="file-icon">
                    <Icon :icon="getFileIcon(file.type)" size="48" />
                  </div>
                </div>
                
                <div class="file-info">
                  <div class="file-name" :title="file.originalName">
                    {{ file.originalName }}
                  </div>
                  <div class="file-meta">
                    <span class="file-size">{{ formatFileSize(file.size) }}</span>
                    <span class="file-time">{{ formatTime(file.createdAt) }}</span>
                  </div>
                </div>
                
                <div class="file-actions">
                  <el-dropdown trigger="click" @click.stop>
                    <el-button type="primary" text>
                      <Icon icon="ep:more" />
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="handlePreview(file)">
                          <Icon icon="ep:view" class="mr-1" />
                          预览
                        </el-dropdown-item>
                        <el-dropdown-item @click="handleDownload(file)">
                          <Icon icon="ep:download" class="mr-1" />
                          下载
                        </el-dropdown-item>
                        <el-dropdown-item @click="handleCopyUrl(file)">
                          <Icon icon="ep:copy-document" class="mr-1" />
                          复制链接
                        </el-dropdown-item>
                        <el-dropdown-item @click="handleEditFile(file)">
                          <Icon icon="ep:edit" class="mr-1" />
                          编辑
                        </el-dropdown-item>
                        <el-dropdown-item @click="handleMoveFile(file)">
                          <Icon icon="ep:folder" class="mr-1" />
                          移动
                        </el-dropdown-item>
                        <el-dropdown-item divided @click="handleDeleteFile(file)">
                          <Icon icon="ep:delete" class="mr-1" />
                          删除
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>
            
            <!-- 列表视图 -->
            <div v-else class="file-list">
              <el-table
                :data="fileList"
                v-loading="loading"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" />
                
                <el-table-column label="文件名" min-width="200">
                  <template #default="{ row }">
                    <div class="file-name-cell">
                      <div class="file-icon-small">
                        <Icon :icon="getFileIcon(row.type)" size="20" />
                      </div>
                      <div class="file-info-text">
                        <div class="file-name">{{ row.originalName }}</div>
                        <div class="file-path">{{ row.path }}</div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                
                <el-table-column label="类型" width="100">
                  <template #default="{ row }">
                    <el-tag size="small">{{ getFileTypeLabel(row.type) }}</el-tag>
                  </template>
                </el-table-column>
                
                <el-table-column label="大小" width="100">
                  <template #default="{ row }">
                    {{ formatFileSize(row.size) }}
                  </template>
                </el-table-column>
                
                <el-table-column label="存储驱动" width="100">
                  <template #default="{ row }">
                    <el-tag type="info" size="small">{{ row.driver }}</el-tag>
                  </template>
                </el-table-column>
                
                <el-table-column label="上传时间" width="180">
                  <template #default="{ row }">
                    {{ formatTime(row.createdAt) }}
                  </template>
                </el-table-column>
                
                <el-table-column label="操作" width="200" fixed="right">
                  <template #default="{ row }">
                    <el-button type="primary" text @click="handlePreview(row)">
                      预览
                    </el-button>
                    <el-button type="primary" text @click="handleDownload(row)">
                      下载
                    </el-button>
                    <el-button type="primary" text @click="handleEditFile(row)">
                      编辑
                    </el-button>
                    <el-button type="danger" text @click="handleDeleteFile(row)">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            
            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="pagination.page"
                v-model:page-size="pagination.size"
                :total="pagination.total"
                :page-sizes="[20, 50, 100, 200]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 上传对话框 -->
    <el-dialog
      v-model="uploadDialogVisible"
      title="上传文件"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-upload
        ref="uploadRef"
        :action="uploadAction"
        :headers="uploadHeaders"
        :data="uploadData"
        :multiple="true"
        :drag="true"
        :auto-upload="false"
        :on-change="handleFileChange"
        :before-upload="handleBeforeUpload"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        class="upload-area"
      >
        <Icon icon="ep:upload-filled" size="48" class="upload-icon" />
        <div class="upload-text">
          <p>将文件拖到此处，或<em>点击上传</em></p>
          <p class="upload-tip">支持多文件上传，单个文件不超过 {{ maxFileSize }}MB</p>
        </div>
      </el-upload>
      
      <div class="upload-options">
        <el-form :model="uploadForm" label-width="80px">
          <el-form-item label="上传分类">
            <el-tree-select
              v-model="uploadForm.categoryId"
              :data="categoryTree"
              placeholder="请选择分类"
              clearable
              check-strictly
              :render-after-expand="false"
            />
          </el-form-item>
          
          <el-form-item label="存储驱动">
            <el-select v-model="uploadForm.driver" placeholder="请选择存储驱动">
              <el-option label="本地存储" value="local" />
              <el-option label="阿里云OSS" value="oss" />
              <el-option label="腾讯云COS" value="cos" />
              <el-option label="七牛云" value="qiniu" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleStartUpload" :loading="uploading">
          开始上传
        </el-button>
      </template>
    </el-dialog>
    
    <!-- 分类对话框 -->
    <el-dialog
      v-model="categoryDialogVisible"
      :title="categoryForm.id ? '编辑分类' : '新建分类'"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="categoryFormRef"
        :model="categoryForm"
        :rules="categoryRules"
        label-width="80px"
      >
        <el-form-item label="上级分类" prop="parentId">
          <el-tree-select
            v-model="categoryForm.parentId"
            :data="categoryTree"
            placeholder="请选择上级分类（不选则为顶级分类）"
            clearable
            check-strictly
            :render-after-expand="false"
          />
        </el-form-item>
        
        <el-form-item label="分类名称" prop="name">
          <el-input
            v-model="categoryForm.name"
            placeholder="请输入分类名称"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="categoryForm.sort"
            :min="0"
            :max="9999"
            placeholder="排序值"
          />
        </el-form-item>
        
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="categoryForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="categoryDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveCategory" :loading="saveLoading">
          确定
        </el-button>
      </template>
    </el-dialog>
    
    <!-- 文件编辑对话框 -->
    <el-dialog
      v-model="editFileDialogVisible"
      title="编辑文件"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="editFileFormRef"
        :model="editFileForm"
        :rules="editFileRules"
        label-width="80px"
      >
        <el-form-item label="文件名称" prop="originalName">
          <el-input
            v-model="editFileForm.originalName"
            placeholder="请输入文件名称"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="所属分类" prop="categoryId">
          <el-tree-select
            v-model="editFileForm.categoryId"
            :data="categoryTree"
            placeholder="请选择分类"
            clearable
            check-strictly
            :render-after-expand="false"
          />
        </el-form-item>
        
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="editFileForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="editFileDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveFile" :loading="saveLoading">
          确定
        </el-button>
      </template>
    </el-dialog>
  </Page>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage, ElMessageBox, type FormInstance, type UploadInstance } from 'element-plus';
import { Icon } from '@iconify/vue';
import { Page } from '@vben/common-ui';
import {
  getFileListApi,
  getFileCategoriesApi,
  createFileCategoryApi,
  updateFileCategoryApi,
  deleteFileCategoryApi,
  updateFileApi,
  deleteFileApi,
  batchDeleteFilesApi,
  moveFileApi,
  batchMoveFilesApi,
  type FileItem,
  type FileCategory,
  type FileListParams,
  type CreateFileCategoryParams,
  type UpdateFileCategoryParams,
  type UpdateFileParams,
} from '#/api/upload';
import { useUserStore } from '#/store/modules/user';

// 响应式数据
const loading = ref(false);
const saveLoading = ref(false);
const uploading = ref(false);
const viewMode = ref<'grid' | 'list'>('grid');
const currentCategoryId = ref<number | null>(null);
const selectedFiles = ref<number[]>([]);
const fileList = ref<FileItem[]>([]);
const categoryTree = ref<FileCategory[]>([]);
const uploadDialogVisible = ref(false);
const categoryDialogVisible = ref(false);
const editFileDialogVisible = ref(false);

const searchFormRef = ref<FormInstance>();
const categoryFormRef = ref<FormInstance>();
const editFileFormRef = ref<FormInstance>();
const uploadRef = ref<UploadInstance>();
const categoryTreeRef = ref();

const userStore = useUserStore();

// 搜索表单
const searchForm = reactive({
  filename: '',
  type: '',
  driver: '',
  categoryId: null as number | null,
  dateRange: [] as string[],
});

// 分页
const pagination = reactive({
  page: 1,
  size: 20,
  total: 0,
});

// 上传表单
const uploadForm = reactive({
  categoryId: null as number | null,
  driver: 'local',
});

// 分类表单
const categoryForm = reactive({
  id: null as number | null,
  parentId: null as number | null,
  name: '',
  sort: 0,
  remark: '',
});

// 文件编辑表单
const editFileForm = reactive({
  id: null as number | null,
  originalName: '',
  categoryId: null as number | null,
  remark: '',
});

// 表单验证规则
const categoryRules = {
  name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { min: 1, max: 50, message: '分类名称长度为 1-50 个字符', trigger: 'blur' },
  ],
};

const editFileRules = {
  originalName: [
    { required: true, message: '请输入文件名称', trigger: 'blur' },
    { min: 1, max: 255, message: '文件名称长度为 1-255 个字符', trigger: 'blur' },
  ],
};

// 计算属性
const uploadAction = computed(() => '/api/upload/file');
const uploadHeaders = computed(() => ({
  Authorization: `Bearer ${userStore.token}`,
}));
const uploadData = computed(() => ({
  categoryId: uploadForm.categoryId,
  driver: uploadForm.driver,
}));
const maxFileSize = computed(() => 100); // MB

// 方法
const loadFileList = async () => {
  loading.value = true;
  try {
    const params: FileListParams = {
      page: pagination.page,
      size: pagination.size,
      filename: searchForm.filename || undefined,
      type: searchForm.type || undefined,
      driver: searchForm.driver || undefined,
      categoryId: searchForm.categoryId || currentCategoryId.value || undefined,
      startDate: searchForm.dateRange[0] || undefined,
      endDate: searchForm.dateRange[1] || undefined,
    };
    
    const result = await getFileListApi(params);
    fileList.value = result.list;
    pagination.total = result.total;
  } catch (error) {
    ElMessage.error('加载文件列表失败');
  } finally {
    loading.value = false;
  }
};

const loadCategories = async () => {
  try {
    categoryTree.value = await getFileCategoriesApi();
  } catch (error) {
    ElMessage.error('加载分类列表失败');
  }
};

const handleSearch = () => {
  pagination.page = 1;
  loadFileList();
};

const handleResetSearch = () => {
  searchFormRef.value?.resetFields();
  pagination.page = 1;
  loadFileList();
};

const handleSizeChange = (size: number) => {
  pagination.size = size;
  pagination.page = 1;
  loadFileList();
};

const handleCurrentChange = (page: number) => {
  pagination.page = page;
  loadFileList();
};

const handleCategoryClick = (data: FileCategory) => {
  currentCategoryId.value = data.id;
  pagination.page = 1;
  loadFileList();
};

const handleFileSelect = (file: FileItem) => {
  const index = selectedFiles.value.indexOf(file.id);
  if (index > -1) {
    selectedFiles.value.splice(index, 1);
  } else {
    selectedFiles.value.push(file.id);
  }
};

const handleFileCheck = (fileId: number, checked: boolean) => {
  if (checked) {
    if (!selectedFiles.value.includes(fileId)) {
      selectedFiles.value.push(fileId);
    }
  } else {
    const index = selectedFiles.value.indexOf(fileId);
    if (index > -1) {
      selectedFiles.value.splice(index, 1);
    }
  }
};

const handleSelectionChange = (selection: FileItem[]) => {
  selectedFiles.value = selection.map(item => item.id);
};

const handleUpload = () => {
  uploadDialogVisible.value = true;
};

const handleFileChange = (file: any, fileList: any[]) => {
  // 文件选择变化处理
};

const handleBeforeUpload = (file: File) => {
  const isValidSize = file.size / 1024 / 1024 < maxFileSize.value;
  if (!isValidSize) {
    ElMessage.error(`文件大小不能超过 ${maxFileSize.value}MB`);
    return false;
  }
  return true;
};

const handleStartUpload = () => {
  uploadRef.value?.submit();
};

const handleUploadSuccess = (response: any, file: any) => {
  ElMessage.success('文件上传成功');
  loadFileList();
};

const handleUploadError = (error: any) => {
  ElMessage.error('文件上传失败');
};

const handleCreateCategory = () => {
  Object.assign(categoryForm, {
    id: null,
    parentId: currentCategoryId.value,
    name: '',
    sort: 0,
    remark: '',
  });
  categoryDialogVisible.value = true;
};

const handleEditCategory = (category: FileCategory) => {
  Object.assign(categoryForm, {
    id: category.id,
    parentId: category.parentId,
    name: category.name,
    sort: category.sort,
    remark: category.remark,
  });
  categoryDialogVisible.value = true;
};

const handleSaveCategory = async () => {
  if (!categoryFormRef.value) return;
  
  try {
    await categoryFormRef.value.validate();
    saveLoading.value = true;
    
    if (categoryForm.id) {
      const updateData: UpdateFileCategoryParams = {
        name: categoryForm.name,
        parentId: categoryForm.parentId,
        sort: categoryForm.sort,
        remark: categoryForm.remark,
      };
      await updateFileCategoryApi(categoryForm.id, updateData);
      ElMessage.success('分类更新成功');
    } else {
      const createData: CreateFileCategoryParams = {
        name: categoryForm.name,
        parentId: categoryForm.parentId,
        sort: categoryForm.sort,
        remark: categoryForm.remark,
      };
      await createFileCategoryApi(createData);
      ElMessage.success('分类创建成功');
    }
    
    categoryDialogVisible.value = false;
    await loadCategories();
  } catch (error) {
    ElMessage.error('保存失败');
  } finally {
    saveLoading.value = false;
  }
};

const handleDeleteCategory = async (category: FileCategory) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除分类 "${category.name}" 吗？删除后该分类下的文件将移动到未分类。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );
    
    await deleteFileCategoryApi(category.id);
    ElMessage.success('分类删除成功');
    await loadCategories();
    
    if (currentCategoryId.value === category.id) {
      currentCategoryId.value = null;
      loadFileList();
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败');
    }
  }
};

const handlePreview = (file: FileItem) => {
  if (isImage(file.type)) {
    // 图片预览
    window.open(file.url, '_blank');
  } else {
    // 其他文件类型预览或下载
    handleDownload(file);
  }
};

const handleDownload = (file: FileItem) => {
  const link = document.createElement('a');
  link.href = file.url;
  link.download = file.originalName;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

const handleCopyUrl = async (file: FileItem) => {
  try {
    await navigator.clipboard.writeText(file.url);
    ElMessage.success('链接已复制到剪贴板');
  } catch (error) {
    ElMessage.error('复制失败');
  }
};

const handleEditFile = (file: FileItem) => {
  Object.assign(editFileForm, {
    id: file.id,
    originalName: file.originalName,
    categoryId: file.categoryId,
    remark: file.remark,
  });
  editFileDialogVisible.value = true;
};

const handleSaveFile = async () => {
  if (!editFileFormRef.value) return;
  
  try {
    await editFileFormRef.value.validate();
    saveLoading.value = true;
    
    const updateData: UpdateFileParams = {
      originalName: editFileForm.originalName,
      categoryId: editFileForm.categoryId,
      remark: editFileForm.remark,
    };
    
    await updateFileApi(editFileForm.id!, updateData);
    ElMessage.success('文件更新成功');
    editFileDialogVisible.value = false;
    loadFileList();
  } catch (error) {
    ElMessage.error('保存失败');
  } finally {
    saveLoading.value = false;
  }
};

const handleDeleteFile = async (file: FileItem) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除文件 "${file.originalName}" 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );
    
    await deleteFileApi(file.id);
    ElMessage.success('文件删除成功');
    loadFileList();
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败');
    }
  }
};

const handleMoveFile = async (file: FileItem) => {
  // 实现文件移动逻辑
  ElMessage.info('移动功能开发中');
};

const handleBatchDelete = async () => {
  if (!selectedFiles.value.length) return;
  
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedFiles.value.length} 个文件吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );
    
    await batchDeleteFilesApi(selectedFiles.value);
    ElMessage.success('批量删除成功');
    selectedFiles.value = [];
    loadFileList();
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量删除失败');
    }
  }
};

const handleBatchMove = async () => {
  if (!selectedFiles.value.length) return;
  ElMessage.info('批量移动功能开发中');
};

// 工具方法
const isImage = (type: string) => {
  return type === 'image' || type.startsWith('image/');
};

const getFileIcon = (type: string) => {
  const iconMap: Record<string, string> = {
    image: 'ep:picture',
    video: 'ep:video-play',
    audio: 'ep:headphones',
    document: 'ep:document',
    archive: 'ep:box',
    pdf: 'ep:document',
    excel: 'ep:document',
    word: 'ep:document',
    ppt: 'ep:document',
  };
  return iconMap[type] || 'ep:document';
};

const getFileTypeLabel = (type: string) => {
  const labelMap: Record<string, string> = {
    image: '图片',
    video: '视频',
    audio: '音频',
    document: '文档',
    archive: '压缩包',
    pdf: 'PDF',
    excel: 'Excel',
    word: 'Word',
    ppt: 'PPT',
  };
  return labelMap[type] || '其他';
};

const formatFileSize = (size: number) => {
  if (size < 1024) {
    return `${size} B`;
  } else if (size < 1024 * 1024) {
    return `${(size / 1024).toFixed(1)} KB`;
  } else if (size < 1024 * 1024 * 1024) {
    return `${(size / 1024 / 1024).toFixed(1)} MB`;
  } else {
    return `${(size / 1024 / 1024 / 1024).toFixed(1)} GB`;
  }
};

const formatTime = (time: string) => {
  return new Date(time).toLocaleString('zh-CN');
};

// 生命周期
onMounted(() => {
  loadFileList();
  loadCategories();
});
</script>

<style scoped>
.file-management-page {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.action-left {
  display: flex;
  gap: 12px;
}

.action-right {
  display: flex;
  align-items: center;
}

.category-card {
  height: calc(100vh - 300px);
  overflow-y: auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-node {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4px 0;
}

.file-count {
  margin-left: auto;
  color: #999;
  font-size: 12px;
}

.node-actions {
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.category-node:hover .node-actions {
  opacity: 1;
}

.file-card {
  height: calc(100vh - 300px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}

.file-item {
  position: relative;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s;
}

.file-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.file-item.selected {
  border-color: var(--el-color-primary);
}

.file-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}

.file-preview {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 6px 6px 0 0;
}

.file-image {
  width: 100%;
  height: 100%;
  border-radius: 6px 6px 0 0;
}

.file-icon {
  color: #999;
}

.file-info {
  padding: 12px;
}

.file-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.file-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.file-item:hover .file-actions {
  opacity: 1;
}

.file-list {
  flex: 1;
  overflow: hidden;
}

.file-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-icon-small {
  flex-shrink: 0;
}

.file-info-text {
  flex: 1;
  min-width: 0;
}

.file-path {
  font-size: 12px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  border-top: 1px solid #ebeef5;
}

.upload-area {
  margin-bottom: 20px;
}

:deep(.el-upload-dragger) {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-icon {
  color: #c0c4cc;
  margin-bottom: 16px;
}

.upload-text {
  text-align: center;
}

.upload-text p {
  margin: 0;
  color: #606266;
}

.upload-text em {
  color: var(--el-color-primary);
  font-style: normal;
}

.upload-tip {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

.upload-options {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}
</style>