<template>
  <div class="photo-album-container">
    <!-- 头部：Tabs和新建按钮 -->
    <div class="header-section">
      <el-tabs v-if="albumList.length > 0" v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane v-for="album in albumList" :key="album.id" :label="album.name" :name="String(album.id)" />
      </el-tabs>
      <div class="header-actions">
        <el-button v-if="albumList.length > 0" type="primary" link @click="handleEditAlbum"> 编辑 </el-button>
        <el-button type="primary" @click="openCreateDialog"> 新建相册 </el-button>
      </div>
    </div>

    <!-- 内容区域 -->
    <div v-if="albumList.length > 0" class="content-section">
      <!-- 图片上传说明 -->
      <div class="upload-tips">
        <span>照片宽高不小于500像素</span>
        <span>大小不超过10M</span>
        <span>暂不支持上传动图</span>
        <span>不可上传手机截屏、含清晰人脸/电话/二维码/第三方水印/LOGO等图片。</span>
      </div>

      <!-- 图片上传和展示区域 -->
      <div class="image-grid">
        <!-- 上传按钮 -->
        <div class="upload-item upload-box">
          <UploadImgs
            v-model:file-list="currentAlbum.images"
            :limit="60"
            :file-size="9999"
            :file-type="['image/jpeg', 'image/png', 'image/gif', 'image/webp']"
            :width="'100%'"
            :height="'200px'"
            :border-radius="'8px'"
            :api="customUploadApi"
          >
            <template #tip>
              <div class="upload-tip-text">上传图片 ({{ currentAlbum.images.length }}/60)</div>
            </template>
          </UploadImgs>
        </div>

        <!-- 已上传的图片 -->
        <div v-for="(image, index) in displayImages" :key="image.uid || index" class="image-item">
          <div class="image-wrapper">
            <img :src="image.url || ''" alt="相册图片" />
            <div class="image-overlay">
              <el-button type="primary" link @click="viewImage(image.url || '')"> 查看 </el-button>
              <el-button type="primary" link @click="deleteImage(index)"> 删除 </el-button>
            </div>
            <el-tag v-if="isFirstImage(index)" type="danger" class="cover-tag"> 封面 </el-tag>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
          v-model:current-page="pageable.pageNum"
          v-model:page-size="pageable.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pageable.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <div class="empty-text">暂无相册,快来创建吧</div>
    </div>

    <!-- 新建/编辑相册弹窗 -->
    <el-dialog v-model="createDialogVisible" :title="editId ? '修改相册名称' : '新建相册'" width="500px" @close="resetCreateForm">
      <el-form :model="createForm" :rules="createRules" ref="createFormRef" label-width="0">
        <el-form-item prop="name">
          <el-input v-model="createForm.name" placeholder="请输入相册名称" maxlength="6" clearable show-word-limit />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div class="footer-left">
            <el-button v-if="editId" type="danger" @click="handleDeleteAlbum"> 删除相册 </el-button>
          </div>
          <div class="footer-right">
            <el-button @click="createDialogVisible = false"> 取消 </el-button>
            <el-button type="primary" @click="handleCreateAlbum"> 确定 </el-button>
          </div>
        </div>
      </template>
    </el-dialog>

    <!-- 图片预览对话框 -->
    <el-dialog v-model="previewVisible" width="800px" align-center>
      <img :src="previewImageUrl" alt="预览图片" style="width: 100%; height: auto" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import type { UploadUserFile } from "element-plus";
import UploadImgs from "@/components/Upload/Imgs.vue";
import { localGet } from "@/utils";
import {
  getOfficialAlbumList,
  createOrUpdateOfficialAlbum,
  deleteOfficialAlbum,
  saveOfficialImg,
  getOfficialImgList,
  deleteOfficialImg
} from "@/api/modules/storeDecoration";
import { uploadImg } from "@/api/modules/newLoginApi";

// 扩展图片类型
interface AlbumImage extends UploadUserFile {
  isCover?: boolean;
  businessId?: number; // 相册ID
  imgSort?: number; // 排序
  imgType?: number; // 图片类型，固定为2
  imgId?: number; // 图片ID（从服务器返回）
}

// 相册接口
interface Album {
  id: string | number;
  name: string;
  albumName?: string; // API返回的字段名
  images: AlbumImage[];
  coverImageId?: string | number;
}

const createDialogVisible = ref(false);
const createFormRef = ref<FormInstance>();
const activeTab = ref("");
const previewVisible = ref(false);
const previewImageUrl = ref("");
const editId = ref<string | number | null>(null);

// 正在保存的图片URL集合，防止重复保存
const savingImages = ref<Set<string>>(new Set());
// 已处理过的图片URL集合，防止重复处理
const processedImages = ref<Set<string>>(new Set());
// 是否正在加载相册图片（用于跳过watch触发）
const isLoadingAlbumImages = ref(false);

// 相册列表
const albumList = ref<Album[]>([]);

// 当前相册
const currentAlbum = computed(() => {
  if (albumList.value.length === 0) {
    return { id: "", name: "", images: [] };
  }
  return albumList.value.find(album => String(album.id) === String(activeTab.value)) || albumList.value[0];
});

// 分页数据
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0
});

// 显示图片列表（分页后）
const displayImages = computed(() => {
  if (!currentAlbum.value || !currentAlbum.value.images) {
    return [];
  }
  const images = currentAlbum.value.images;
  const start = (pageable.pageNum - 1) * pageable.pageSize;
  const end = start + pageable.pageSize;
  return images.slice(start, end);
});

// 新建相册表单
const createForm = reactive({
  name: ""
});

// 新建相册表单校验规则
const createRules = reactive<FormRules>({
  name: [
    { required: true, message: "请输入相册名称", trigger: "blur" },
    { min: 1, max: 6, message: "相册名称长度在1到6个字符", trigger: "blur" }
  ]
});

// 图片尺寸校验函数（不小于500像素）
const validateImageDimensions = (file: File): Promise<boolean> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e: ProgressEvent<FileReader>) => {
      const img = new Image();
      img.onload = () => {
        const width = img.width;
        const height = img.height;

        // 检查尺寸：不小于500像素
        if (width < 500 || height < 500) {
          ElMessage.warning("照片宽高不小于500像素");
          reject(new Error("图片尺寸不符合要求"));
          return;
        }

        resolve(true);
      };
      img.onerror = () => {
        reject(new Error("图片加载失败"));
      };
      if (e.target?.result) {
        img.src = e.target.result as string;
      }
    };
    reader.onerror = () => {
      reject(new Error("文件读取失败"));
    };
    reader.readAsDataURL(file);
  });
};

// 自定义上传API
const customUploadApi = async (formData: FormData): Promise<any> => {
  const file = formData.get("file") as File;

  // 先进行尺寸校验
  try {
    await validateImageDimensions(file);
  } catch (error) {
    throw error;
  }

  // 校验通过后调用实际上传接口
  const result: any = await uploadImg(formData);

  // 处理返回格式：可能是 { data: { fileUrl: string } } 或 { data: string[] }
  const fileUrl = result?.data?.fileUrl || result?.data?.[0] || result?.fileUrl;

  // 返回组件期望的格式
  return {
    data: {
      fileUrl: fileUrl
    }
  };
};

// 保存图片到服务器
const saveImageToServer = async (imgUrl: string) => {
  // 如果正在保存，直接返回，防止重复保存
  if (savingImages.value.has(imgUrl)) {
    return;
  }

  try {
    const userInfo: any = localGet("geeker-user")?.userInfo || {};
    const storeId = userInfo.storeId;
    if (!storeId || !currentAlbum.value.id) {
      return;
    }

    const currentImages = currentAlbum.value.images || [];
    // 找到对应的图片（通过URL匹配）
    const targetImage = currentImages.find((img: AlbumImage) => img.url === imgUrl && !img.imgId);
    if (!targetImage) {
      return; // 如果图片已经有ID或找不到，不重复保存
    }

    // 标记为正在保存
    savingImages.value.add(imgUrl);

    const imgSort = currentImages.filter((img: AlbumImage) => img.imgId).length + 1; // 排序为已保存图片数量+1

    const params = [
      {
        businessId: Number(currentAlbum.value.id),
        imgSort: imgSort,
        imgType: 2,
        imgUrl: imgUrl,
        storeId: Number(storeId)
      }
    ];

    const res: any = await saveOfficialImg(params);
    if (res && (res.code === 200 || res.code === "200") && res.data && res.data[0]) {
      // 保存成功后，更新图片的ID和其他信息
      targetImage.imgId = res.data[0].id;
      targetImage.businessId = res.data[0].businessId;
      targetImage.imgSort = res.data[0].imgSort;
      // 保存成功后，从已处理集合中移除，允许后续更新
      processedImages.value.delete(imgUrl);
    }
  } catch (error) {
    console.error("保存图片信息失败:", error);
    // 保存失败时，也从已处理集合中移除，允许重试
    processedImages.value.delete(imgUrl);
  } finally {
    // 无论成功或失败，都移除保存标记
    savingImages.value.delete(imgUrl);
  }
};

// 打开新建相册弹窗
const openCreateDialog = () => {
  editId.value = null;
  createDialogVisible.value = true;
  resetCreateForm();
};

// 重置新建表单
const resetCreateForm = () => {
  createForm.name = "";
  editId.value = null;
  createFormRef.value?.clearValidate();
};

// 创建/更新相册
const handleCreateAlbum = async () => {
  if (!createFormRef.value) return;

  try {
    await createFormRef.value.validate();
  } catch (error) {
    return;
  }

  if (!createForm.name.trim()) {
    ElMessage.warning("请输入相册名称");
    return;
  }

  try {
    const userInfo: any = localGet("geeker-user")?.userInfo || {};
    const storeId = userInfo.storeId;
    if (!storeId) {
      ElMessage.error("未找到店铺ID");
      return;
    }

    const params: any = {
      albumName: createForm.name.trim(),
      storeId: Number(storeId)
    };

    if (editId.value) {
      params.id = editId.value;
    }

    const res: any = await createOrUpdateOfficialAlbum(params);
    if (res && (res.code === 200 || res.code === "200")) {
      ElMessage.success(editId.value ? "修改相册成功" : "新建相册成功");
      createDialogVisible.value = false;

      // 保存当前选中的相册ID
      const currentAlbumId = activeTab.value;

      resetCreateForm();
      await getAlbumList();

      // 如果是编辑相册，重新加载当前相册的图片
      if (editId.value && currentAlbumId) {
        activeTab.value = currentAlbumId;
        await loadAlbumImages(currentAlbumId);
      } else if (!editId.value && albumList.value.length > 0) {
        // 如果是新建相册，切换到新创建的相册并加载图片
        const newAlbum = albumList.value[albumList.value.length - 1];
        activeTab.value = String(newAlbum.id);
        await loadAlbumImages(String(newAlbum.id));
      }
    } else {
      ElMessage.error(res?.msg || (editId.value ? "修改相册失败" : "新建相册失败"));
    }
  } catch (error: any) {
    console.error("保存相册失败:", error);
    ElMessage.error(error?.msg || "操作失败，请重试");
  }
};

// Tab切换
const handleTabClick = async (tab: any) => {
  activeTab.value = String(tab.props.name);
  pageable.pageNum = 1;
  // 切换相册时加载图片列表
  await loadAlbumImages(String(tab.props.name));
  updatePagination();
};

// 编辑相册
const handleEditAlbum = () => {
  const current = albumList.value.find(album => String(album.id) === activeTab.value);
  if (!current) {
    ElMessage.warning("请先选择要编辑的相册");
    return;
  }
  editId.value = current.id;
  createForm.name = current.name || current.albumName || "";
  createDialogVisible.value = true;
  createFormRef.value?.clearValidate();
};

// 删除相册
const handleDeleteAlbum = async () => {
  if (!editId.value) {
    return;
  }

  try {
    await ElMessageBox.confirm("确认删除该相册吗？删除后相册内的所有图片也将被删除。", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    });

    // 找到要删除的相册
    const albumToDelete = albumList.value.find(album => album.id === editId.value);
    if (!albumToDelete) {
      ElMessage.error("未找到要删除的相册");
      return;
    }

    // 调用删除接口
    const res: any = await deleteOfficialAlbum([albumToDelete]);
    if (res && (res.code === 200 || res.code === "200")) {
      ElMessage.success("删除相册成功");
      createDialogVisible.value = false;
      resetCreateForm();

      // 重新获取相册列表
      await getAlbumList();

      // 如果删除的是当前选中的相册，切换到第一个相册
      if (String(editId.value) === activeTab.value) {
        if (albumList.value.length > 0) {
          activeTab.value = String(albumList.value[0].id);
          await loadAlbumImages(String(albumList.value[0].id));
        } else {
          activeTab.value = "";
        }
      }
    } else {
      ElMessage.error(res?.msg || "删除相册失败");
    }
  } catch (error: any) {
    if (error !== "cancel") {
      console.error("删除相册失败:", error);
      ElMessage.error(error?.msg || "删除失败，请重试");
    }
  }
};

// 查看图片
const viewImage = (url: string) => {
  previewImageUrl.value = url;
  previewVisible.value = true;
};

// 删除图片
const deleteImage = async (index: number) => {
  const actualIndex = (pageable.pageNum - 1) * pageable.pageSize + index;
  const image = currentAlbum.value.images[actualIndex] as AlbumImage;

  try {
    // 如果图片有ID，说明已保存到服务器，需要调用删除接口
    if (image.imgId) {
      // 调用删除接口，参数是图片ID数组
      const params = [image.imgId];

      const res: any = await deleteOfficialImg(params);
      if (res && (res.code === 200 || res.code === "200")) {
        currentAlbum.value.images.splice(actualIndex, 1);
        updatePagination();
        ElMessage.success("删除成功");
      } else {
        ElMessage.error(res?.msg || "删除失败");
      }
    } else {
      // 如果图片还没有保存到服务器，直接删除本地数据
      currentAlbum.value.images.splice(actualIndex, 1);
      updatePagination();
      ElMessage.success("删除成功");
    }
  } catch (error: any) {
    console.error("删除图片失败:", error);
    ElMessage.error(error?.msg || "删除失败，请重试");
  }
};

// 判断是否是第一张图片（封面）
const isFirstImage = (displayIndex: number): boolean => {
  // 计算在整个图片列表中的实际索引
  const actualIndex = (pageable.pageNum - 1) * pageable.pageSize + displayIndex;
  // 第一张图片（索引为0）是封面
  return actualIndex === 0;
};

// 更新分页总数
const updatePagination = () => {
  if (currentAlbum.value && currentAlbum.value.images) {
    pageable.total = currentAlbum.value.images.length;
  } else {
    pageable.total = 0;
  }
};

// 分页大小改变
const handleSizeChange = (size: number) => {
  pageable.pageSize = size;
  pageable.pageNum = 1;
};

// 当前页改变
const handleCurrentChange = (page: number) => {
  pageable.pageNum = page;
};

// 监听图片列表变化，更新分页并保存新上传的图片
watch(
  () => currentAlbum.value?.images || [],
  async (newImages, oldImages) => {
    updatePagination();

    // 如果正在加载相册图片（从服务器加载），跳过处理，避免重复保存
    if (isLoadingAlbumImages.value) {
      return;
    }

    // 如果没有相册ID，不处理
    if (!currentAlbum.value.id) {
      return;
    }

    // 找出真正新增的图片（通过对比URL）
    const oldUrls = new Set((oldImages || []).map((img: AlbumImage) => img.url).filter((url): url is string => Boolean(url)));
    const newUrls = new Set((newImages || []).map((img: AlbumImage) => img.url).filter((url): url is string => Boolean(url)));

    // 找出新增的URL（在新列表中存在，但在旧列表中不存在）
    const addedUrls = Array.from(newUrls).filter(url => !oldUrls.has(url));

    // 处理新增的图片：没有imgId、有url、且未处理过、且不在保存中的图片
    // 批量处理所有新增的图片
    const imagesToSave = addedUrls
      .map(url => newImages.find((img: AlbumImage) => img.url === url))
      .filter((image): image is AlbumImage => {
        return (
          image !== undefined &&
          !image.imgId &&
          image.url !== undefined &&
          image.url !== null &&
          image.url !== "" &&
          !savingImages.value.has(image.url) &&
          !processedImages.value.has(image.url)
        );
      });

    // 并发保存所有新上传的图片
    for (const image of imagesToSave) {
      const imageUrl = image.url;
      if (imageUrl) {
        // 标记为已处理，防止重复处理
        processedImages.value.add(imageUrl);
        // 不等待，让所有图片并发上传
        saveImageToServer(imageUrl).catch(error => {
          console.error("保存图片失败:", error);
          // 保存失败时，从已处理集合中移除，允许重试
          processedImages.value.delete(imageUrl);
        });
      }
    }
  },
  { deep: true }
);

// 监听相册切换，加载图片列表
watch(
  () => activeTab.value,
  async newVal => {
    if (newVal) {
      await loadAlbumImages(newVal);
      updatePagination();
      pageable.pageNum = 1;
    }
  }
);

// 获取相册列表
const getAlbumList = async () => {
  try {
    const userInfo: any = localGet("geeker-user")?.userInfo || {};
    const storeId = userInfo.storeId;
    if (!storeId) {
      console.warn("未找到店铺ID");
      return;
    }

    const params = {
      storeId: Number(storeId)
    };
    const res: any = await getOfficialAlbumList(params);
    if (res && (res.code === 200 || res.code === "200") && res.data) {
      const dataList = Array.isArray(res.data) ? res.data : [];
      albumList.value = dataList.map((album: any) => ({
        id: album.id,
        name: album.albumName || album.name,
        albumName: album.albumName,
        images: [],
        coverImageId: album.coverImageId
      }));
      // 如果没有选中的相册，默认选中第一个
      if (albumList.value.length > 0 && !activeTab.value) {
        activeTab.value = String(albumList.value[0].id);
        // 加载第一个相册的图片
        await loadAlbumImages(String(albumList.value[0].id));
      }
      // 如果已有选中的相册，确保该相册在列表中还存在，如果不存在则选中第一个
      else if (albumList.value.length > 0 && activeTab.value) {
        const exists = albumList.value.some(album => String(album.id) === activeTab.value);
        if (!exists) {
          activeTab.value = String(albumList.value[0].id);
          await loadAlbumImages(String(albumList.value[0].id));
        }
      }
    }
  } catch (error) {
    console.error("获取相册列表失败:", error);
  }
};

// 加载相册图片列表
const loadAlbumImages = async (albumId: string) => {
  try {
    isLoadingAlbumImages.value = true; // 标记正在加载，避免触发watch

    const userInfo: any = localGet("geeker-user")?.userInfo || {};
    const storeId = userInfo.storeId;
    if (!storeId || !albumId) {
      return;
    }

    const res: any = await getOfficialImgList(Number(albumId), Number(storeId));
    if (res && (res.code === 200 || res.code === "200") && res.data) {
      const imageList = Array.isArray(res.data) ? res.data : [];
      // 转换为页面显示格式
      const images: AlbumImage[] = imageList
        .filter((img: any) => img.deleteFlag !== 1) // 过滤已删除的图片
        .map((img: any) => ({
          uid: img.id || Date.now() + Math.random(),
          name: img.imgUrl?.split("/").pop() || "image",
          url: img.imgUrl,
          status: "success",
          imgId: img.id,
          businessId: img.businessId,
          imgSort: img.imgSort,
          imgType: img.imgType,
          isCover: false // 可以根据coverImageId判断
        }))
        .sort((a: AlbumImage, b: AlbumImage) => (a.imgSort || 0) - (b.imgSort || 0)); // 按排序字段排序

      // 更新当前相册的图片列表
      const current = albumList.value.find(album => String(album.id) === albumId);
      if (current) {
        // 清空已处理图片集合，因为加载的是服务器数据，不需要再保存
        processedImages.value.clear();
        current.images = images;
        // 更新分页信息，确保视图刷新
        updatePagination();
      }
    } else {
      // 如果没有数据，也要清空当前相册的图片列表
      const current = albumList.value.find(album => String(album.id) === albumId);
      if (current) {
        processedImages.value.clear();
        current.images = [];
        updatePagination();
      }
    }
  } catch (error) {
    console.error("获取相册图片列表失败:", error);
    // 出错时也要更新分页信息
    const current = albumList.value.find(album => String(album.id) === albumId);
    if (current) {
      processedImages.value.clear();
      current.images = [];
      updatePagination();
    }
  } finally {
    // 使用 nextTick 确保在下一个事件循环中重置标志，避免立即触发 watch
    await nextTick();
    isLoadingAlbumImages.value = false;
  }
};

// 页面初始化
onMounted(async () => {
  await getAlbumList();
});
</script>

<style scoped lang="scss">
.photo-album-container {
  min-height: 100%;
  padding: 20px;
  background-color: white;
  .header-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    :deep(.el-tabs) {
      flex: 1;
      .el-tabs__header {
        margin: 0;
      }
    }
    .header-actions {
      display: flex;
      gap: 12px;
      align-items: center;
    }
  }
  .content-section {
    .upload-tips {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 20px;
      font-size: 14px;
      color: #606266;
    }
    .image-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      margin-bottom: 24px;
      .upload-item {
        position: relative;
        width: 100%;
        min-height: 200px;

        // 只隐藏已上传的图片列表项，保留上传按钮
        :deep(.el-upload-list__item) {
          display: none !important;
        }

        // 确保上传按钮容器正常
        :deep(.upload-box) {
          display: block !important;
          width: 100% !important;
        }

        // 确保上传组件容器正常
        :deep(.upload) {
          display: block !important;
          width: 100% !important;
        }

        // 确保上传列表容器宽度正确
        :deep(.el-upload-list--picture-card) {
          display: block !important;
          width: 100% !important;
        }

        // 确保上传按钮正常显示和可点击，覆盖组件内部的固定宽度
        :deep(.el-upload--picture-card) {
          position: relative !important;
          box-sizing: border-box !important;
          display: inline-block !important;
          width: 100% !important;
          max-width: 100% !important;
          height: 200px !important;
          pointer-events: auto !important;
          cursor: pointer !important;
        }

        // 确保上传输入框覆盖整个按钮区域
        :deep(.el-upload--picture-card .el-upload__input) {
          position: absolute !important;
          top: 0 !important;
          left: 0 !important;
          z-index: 10 !important;
          width: 100% !important;
          height: 100% !important;
          cursor: pointer !important;
          opacity: 0 !important;
        }

        // 确保上传按钮内容不阻挡点击
        :deep(.el-upload--picture-card .upload-empty) {
          position: relative !important;
          z-index: 1 !important;
          pointer-events: none !important;
        }
      }
      .image-item {
        position: relative;
        min-height: 200px;
        .image-wrapper {
          position: relative;
          width: 100%;
          height: 200px;
          overflow: hidden;
          background-color: #f0f0f0;
          border-radius: 8px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .image-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            gap: 12px;
            align-items: center;
            justify-content: center;
            background-color: rgb(0 0 0 / 60%);
            opacity: 0;
            transition: opacity 0.3s;
            .el-button {
              color: white;
            }
          }
          &:hover .image-overlay {
            opacity: 1;
          }
          .cover-tag {
            position: absolute;
            top: 8px;
            right: 8px;
          }
          .set-cover-btn {
            position: absolute;
            top: 8px;
            right: 8px;
          }
        }
      }
    }
    .pagination-section {
      display: flex;
      justify-content: center;
      margin-top: 24px;
    }
  }
  .empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    .empty-text {
      font-size: 16px;
      color: #909399;
    }
  }
  .upload-tip-text {
    margin-top: 8px;
    font-size: 12px;
    color: #909399;
    text-align: center;
  }
  .dialog-footer {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    .footer-left {
      display: flex;
      gap: 12px;
    }
    .footer-right {
      display: flex;
      gap: 12px;
    }
  }
}
</style>
