WholeProcessPlatform/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue

<template>
  <div class="guoYuSheShiShuJuTianBao-page">
    <GuoYuSheShiShuJuTianBaoSearch
      ref="searchRef"
      :guoyuStatus="guoyuStatus"
      :direction="direction"
      :handle-add="handleAdd"
      :batchData="batchData"
      :importBtn="importBtn"
      :batchDelBtn="batchDelBtn"
      :submitBtn="submitBtn"
      :successBtn="successBtn"
      @reset="handleReset"
      @search-finish="handleSearchFinish"
    />
    <!-- 主表格 -->
    <BasicTable
      ref="tableRef"
      :columns="columns"
      :list-url="getFishDraftPage"
      :search-params="{}"
      :enable-row-selection="true"
      :get-checkbox-props="getCheckboxProps"
      :transform-data="customTransform"
      @selection-change="handleSelectionChange"
    >
      <!-- 使用 bodyCell 插槽自定义单元格渲染 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action' || column.dataIndex === 'action'">
          <div class="flex">
            <a-button
              type="link"
              size="small"
              @click="handleSubmit([record.id])"
              v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
              >提交</a-button
            >
            <a-button
              type="link"
              size="small"
              @click="handleEdit(record, 'edit')"
              v-if="
                record.status === 'DRAFT' ||
                record.status === 'REJECTED' ||
                record.status === 'SUBMITTED'
              "
              >编辑</a-button
            >
            <a-button
              type="link"
              danger
              size="small"
              @click="handleDelete([record.id])"
              v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
              >删除</a-button
            >
            <a-button
              type="link"
              size="small"
              @click="handleEdit(record, 'view')"
              v-if="record.status === 'SUBMITTED' || record.status === 'APPROVED'"
              >查看</a-button
            >
            <a-button
              type="link"
              size="small"
              @click="handleSuccess([record.id])"
              v-if="record.status === 'SUBMITTED'"
              >审批</a-button
            >
            <a-button
              type="link"
              danger
              size="small"
              @click="handleReject(record.id)"
              v-if="record.status === 'SUBMITTED'"
              >驳回</a-button
            >
          </div>
        </template>
      </template>
    </BasicTable>
    <!-- 隐藏的文件输入框 -->
    <input
      ref="fileInputRef"
      type="file"
      accept=".zip,application/zip,application/x-zip-compressed"
      style="display: none"
      @change="handleFileSelect"
    />
    <!-- 导入预览 Modal -->
    <a-modal
      title="导入数据预览"
      ok-text="提交导入"
      cancel-text="取消导入"
      :width="1500"
      v-model:open="visible"
      :maskClosable="false"
      :confirm-loading="fileLoading"
    >
      <GuoYuSheShiShuJuTianBaoTable
        ref="modalTableRef"
        :fileLoading="fileLoading"
        :fileTableData="fileTableData"
        :direction="direction"
        @preview-click="handlePreviewClick"
        @update:file-table-data="(val) => (fileTableData = val)"
      />
      <template #footer>
        <a-button key="back" @click="handleCustomCancel">取消导入</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="fileLoading"
          @click="handleModalOk"
        >
          提交导入
        </a-button>
      </template>
    </a-modal>

    <!-- 新增/编辑 Modal (对应 React 的 EditModal) -->
    <EditModal
      v-model:visible="editModalVisible"
      :is-view="isView"
      :direction="direction"
      :initial-values="currentRecord"
      :loading="submitLoading"
      @cancel="editModalCancel"
      @ok="handleEditSubmit"
    />

    <!-- 媒体预览 Modal -->
    <a-modal
      v-model:open="mediaPreviewVisible"
      :title="videoPreviewTitle"
      :footer="null"
      width="900px"
      @cancel="closeMediaPreview"
    >
      <div class="flex h-[60vh] gap-4">
        <!-- 左侧：混合列表 (图片+视频) -->
        <div class="w-1/4 overflow-y-auto border-r pr-2 media-list-container">
          <div
            v-for="(item, index) in previewList"
            :key="index"
            class="mb-2 cursor-pointer list-item"
            :class="{ select: index === currentMediaIndex }"
            @click="currentMediaIndex = index"
          >
            <span class="file-name">{{ item.name }}</span>

            <!-- 删除按钮 -->
            <div class="list-item-delete" @click.stop="handleDeleteMedia(item, index)">
              <CloseCircleOutlined />
            </div>
          </div>
        </div>

        <!-- 右侧：动态预览区域 -->
        <div
          class="w-3/4 flex flex-col items-center justify-center bg-gray-100 relative p-4"
        >
          <!-- 图片预览 -->
          <a-image
            v-if="
              currentMediaItem &&
              currentMediaItem.url != '' &&
              currentMediaItem.type === 'image'
            "
            :src="currentMediaItem.url"
            class="max-w-full max-h-full object-contain"
            :preview="{ visible: false }"
          />
          <div
            v-else-if="
              currentMediaItem &&
              currentMediaItem.url == '' &&
              currentMediaItem.type === 'image'
            "
            class="text-gray-400"
          >
            暂无图片预览
          </div>

          <!-- 视频预览 -->
          <video
            v-else-if="
              currentMediaItem &&
              currentMediaItem.url != '' &&
              currentMediaItem.type === 'video'
            "
            :src="currentMediaItem.url"
            controls
            autoplay
            class="max-w-full max-h-[50vh]"
          >
            您的浏览器不支持视频播放
          </video>
          <div
            v-else-if="
              currentMediaItem &&
              currentMediaItem.url == '' &&
              currentMediaItem.type === 'video'
            "
            class="text-gray-400"
          >
            暂无视频预览
          </div>

          <!-- 底部切换控制 -->
          <div class="absolute bottom-4 flex gap-4 z-10">
            <a-button
              shape="circle"
              :icon="h(LeftOutlined)"
              @click="prevMedia"
              :disabled="currentMediaIndex === 0"
            />
            <span class="self-center text-gray-600 bg-white px-2 rounded shadow-sm">
              {{ currentMediaIndex + 1 }} / {{ previewList.length }}
            </span>
            <a-button
              shape="circle"
              :icon="h(RightOutlined)"
              @click="nextMedia"
              :disabled="currentMediaIndex === previewList.length - 1"
            />
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, h, nextTick } from "vue";
import { message, Modal } from "ant-design-vue"; // 假设使用 ant-design-vue
import { LeftOutlined, RightOutlined, CloseCircleOutlined } from "@ant-design/icons-vue"; // 引入图标组件
import BasicTable from "@/components/BasicTable/index.vue";
import GuoYuSheShiShuJuTianBaoSearch from "./guoYuSheShiShuJuTianBaoSearch.vue";
import GuoYuSheShiShuJuTianBaoTable from "./guoYuSheShiShuJuTianBaoTable.vue";
import EditModal from "./guoYuSheShiShuJuTianBaoForm.vue";

import {
  getFishDraftPage,
  addFishDraft,
  editFishDraft,
  delFishDraft,
  submitFishDraft,
  successFishDraft,
  rejectFishDraft,
  importFishZip,
  cancelImportTask,
  checkImportStatus,
  batchSaveDraft,
  getLastImportResult,
  markImportTaskSuccess,
} from "@/api/guoYuSheShiShuJuTianBao";
import { Tag } from "ant-design-vue"; // 确保导入 Tag
import { getDictItemsByCode } from "@/api/dict";
import dayjs from "dayjs";
// import { FileImageOutlined, VideoCameraOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'

  const baseUrl = import.meta.env.VITE_APP_PREVIEW_URL;
// --- 类型定义 ---
interface FormData {
  [key: string]: any;
}

interface ColumnConfig {
  dataIndex: string;
  key: string;
  title: string;
  width?: number;
  fixed?: string;
  customRender?: (text: any, record: any) => any;
}
const fileInputRef = ref<any>(null);
const tableRef = ref<any>(null);
// 字典项
const direction = ref<any>([]);
const guoyuStatus = ref<any>([]);
// --- 基础配置 ---
const baseColumnsConfig: ColumnConfig[] = [
  {
    dataIndex: "baseName",
    key: "baseName",
    title: "流域",
    width: 120,
    fixed: "left",
  },
  { dataIndex: "ennm", key: "ennm", title: "电站名称", width: 120, fixed: "left" },
  { dataIndex: "stnm", key: "stnm", title: "过鱼设施名称", width: 150, fixed: "left" },
  { dataIndex: "strdt", key: "strdt", title: "过鱼时间", width: 150 },
  { dataIndex: "ftpName", key: "ftpName", title: "鱼种类", width: 120 },
  {
    dataIndex: "isfs",
    key: "isfs",
    title: "是否鱼苗",
    width: 74,
    customRender: ({ text }: any) => {
      const isYes = text === 1 || text === "1";
      return h(
        Tag,
        {
          color: isYes ? "success" : "error", // Antdv Tag 的颜色预设
          style: { margin: 0 }, // 去除默认 margin，使其在表格中对齐更好
        },
        () => (isYes ? "是" : "否")
      );
    },
  },
  {
    dataIndex: "direction",
    key: "direction",
    title: "游向",
    width: 80,
    customRender: ({ text }: any) =>
      direction.value.find((item: any) => item.itemCode === text)?.dictName || "-",
  },
  { dataIndex: "fcnt", key: "fcnt", title: "过鱼数量(尾)", width: 120 },
  { dataIndex: "fsz", key: "fsz", title: "体长(cm)", width: 110 },
  { dataIndex: "fwet", key: "fwet", title: "平均体重(g)", width: 110 },
  { dataIndex: "wt", key: "wt", title: "水温(℃)", width: 80 },
  { dataIndex: "tm", key: "tm", title: "填报时间", width: 150 },
  {
    dataIndex: "status",
    key: "status",
    title: "状态",
    width: 74,
    customRender: ({ text }: any) => {
      let data = guoyuStatus.value.find((item: any) => item.itemCode === text);
      return h(
        Tag,
        {
          color: data?.custom1 || "error", // Antdv Tag 的颜色预设
        },
        () => data?.dictName || "-"
      );
    },
  },
];

// --- 状态定义 ---
const visible = ref(false); // 导入预览 Modal

// 编辑相关状态
const editModalVisible = ref(false);
const isView = ref(false);
const currentRecord = ref<FormData | null>(null);
const submitLoading = ref(false);

const mediaPreviewVisible = ref(false);
const videoPreviewTitle = ref("视频预览");
interface MediaItem {
  type: "image" | "video";
  name: string;
  url: string;
}
const previewList = ref<MediaItem[]>([]);
const currentMediaIndex = ref(0);
const tablePreviewRecord = ref<any>({});

// 计算当前选中的项
const currentMediaItem = computed(() => previewList.value[currentMediaIndex.value]);

// 表格数据
const fileTableData = ref<any[]>([]);
const orgFileTableData = ref<any[]>([]);
const batchData = ref<any[]>([]);

const modalTableRef = ref<any>(null);
const fileLoading = ref(false);
const taskId = ref<string>("");

// 主表格 Columns
const columns = computed(() => {
  return [
    ...baseColumnsConfig.map((col) => {
      if (col.dataIndex === "level5") {
        return {
          ...col,
          customRender: ({ text }: any) => {
            if (!text) return "-";
            // 实际应渲染 Icon 和点击事件，此处简化
            return `<span style="color:#52c41a; cursor:pointer">查看图片</span>`;
          },
        };
      }
      if (col.dataIndex === "level6") {
        return {
          ...col,
          customRender: ({ text }: any) => {
            if (!text) return "-";
            return `<span style="color:#1890ff; cursor:pointer">播放视频</span>`;
          },
        };
      }
      return { ...col, visible: true };
    }),
    {
      title: "操作",
      key: "action",
      dataIndex: "action",
      fixed: "right",
      width: 200,
      align: "center",
    },
  ];
});

// --- 业务逻辑方法 ---

const handleAdd = () => {
  currentRecord.value = null;
  editModalVisible.value = true;
};
// 修改
const handleEdit = (record: any, type: string) => {
  if (type == "view") {
    isView.value = true;
  } else {
    isView.value = false;
  }
  currentRecord.value = { ...record };
  editModalVisible.value = true;
};

// 单个/批量 删除过鱼数据
const handleDelete = (ids: any[]) => {
  Modal.confirm({
    title: "是否确认 删除 选中数据吗?",
    onOk: async () => {
      let res: any = await delFishDraft(ids);
      if (res && res?.code == 0) {
        message.success("删除成功");
        tableRef.value?.getList();
      }
    },
  });
};
// 批量删除 - 按钮
const batchDelBtn = () => {
  handleDelete(batchData.value);
};
//单个/ 批量提交过鱼数据
const handleSubmit = (ids: any[]) => {
  Modal.confirm({
    title: "是否 提交 选中数据吗?",
    onOk: async () => {
      let res: any = await submitFishDraft(ids);
      if (res && res?.code == 0) {
        message.success("提交成功");
        tableRef.value?.getList();
      }
    },
  });
};
// 批量提交-按钮
const submitBtn = async () => {
  handleSubmit(batchData.value);
};

// 单个/ 批量审批过鱼数据
const handleSuccess = (ids: any[]) => {
  let rejectReason = "";
  Modal.confirm({
    title: "是否确认 审批通过 选中数据?",
    // 使用 h 函数创建内容
    content: h("div", { style: "margin-top: 10px;" }, [
      h("div", { style: "margin-bottom: 8px;" }, [
        h("span", { style: "color: red;" }, "* "),
        h("span", "审批原因："),
      ]),
      h("textarea", {
        class: "ant-input", // 使用 antdv 的样式类，使其看起来像 Antdv 输入框
        placeholder: "请输入审批原因",
        rows: 4,
        style: {
          width: "100%",
          resize: "none",
          border: "1px solid #d9d9d9",
          padding: "8px",
          borderRadius: "4px",
        },
        // 监听输入事件，更新局部变量
        onInput: (e: Event) => {
          rejectReason = (e.target as HTMLTextAreaElement).value;
        },
      }),
    ]),
    okText: "确认审批",
    cancelText: "取消",
    onOk: async () => {
      let res: any = await successFishDraft({ ids: ids, approveComment: rejectReason });
      if (res && res?.code == 0) {
        message.success("审批成功");
        tableRef.value?.getList();
      }
    },
  });
};
// 批量审批-按钮
const successBtn = async () => {
  handleSuccess(batchData.value);
};

// 批量驳回过鱼数据
const handleReject = (id: any) => {
  let rejectReason = "";
  Modal.confirm({
    title: "是否确认 驳回 选中数据?",
    // 使用 h 函数创建内容
    content: h("div", { style: "margin-top: 10px;" }, [
      h("div", { style: "margin-bottom: 8px;" }, [
        h("span", { style: "color: red;" }, "* "),
        h("span", "驳回原因："),
      ]),
      h("textarea", {
        class: "ant-input", // 使用 antdv 的样式类，使其看起来像 Antdv 输入框
        placeholder: "请输入驳回原因",
        rows: 4,
        style: {
          width: "100%",
          resize: "none",
          border: "1px solid #d9d9d9",
          padding: "8px",
          borderRadius: "4px",
        },
        // 监听输入事件，更新局部变量
        onInput: (e: Event) => {
          rejectReason = (e.target as HTMLTextAreaElement).value;
        },
      }),
    ]),
    okText: "确认驳回",
    cancelText: "取消",
    onOk: async () => {
      // 校验驳回原因不能为空
      if (!rejectReason || rejectReason.trim() === "") {
        message.warning("请输入驳回原因");
        return Promise.reject(); // 阻止 Modal 关闭
      }

      let res: any = await rejectFishDraft({ id: id, rejectReason: rejectReason });
      if (res && res?.code == 0) {
        message.success("驳回成功");
        tableRef.value?.getList();
      }
    },
  });
};
// 多选禁用
const getCheckboxProps = (record: any) => {
  return {
    disabled:  ['SUBMITTED', 'APPROVED'].includes(record.status),
  };
};
const handleDataLoaded = (params: any, data: any) => {
  console.log(params, data);
  return 
};
// 多选
const handleSelectionChange = (keys: any) => {
  batchData.value = keys;
};
const editModalCancel = () => {
  editModalVisible.value = false;
};
// 编辑/新增-按钮
const handleEditSubmit = async (values: FormData) => {
  submitLoading.value = true;
  if (currentRecord.value) {
    // 编辑逻辑
    let res: any = await editFishDraft({
      ...values,
    });
    if (res && res?.code == 0) {
      message.success("编辑成功");
      editModalVisible.value = false;
      tableRef.value?.getList();
    }
    submitLoading.value = false;
  } else {
    // 新增逻辑
    let res: any = await addFishDraft({
      ...values,
    });
    if (res && res?.code == 0) {
      message.success("新增成功");
      editModalVisible.value = false;
      tableRef.value?.getList();
    }
    submitLoading.value = false;
  }
};
const isRowDataEqual = (oldRow: any, newRow: any, fields: string[]): boolean => {
  for (const field of fields) {
    // 处理 undefined/null 的情况，确保比较的一致性
    let oldVal = oldRow?.[field];
    let newVal = newRow?.[field];

    // 特殊处理：如果都是空值，视为相等
    if (
      (oldVal === undefined || oldVal === null || oldVal === "") &&
      (newVal === undefined || newVal === null || newVal === "")
    ) {
      continue;
    }

    // 严格不相等
    if (oldVal !== newVal) {
      return false;
    }
  }
  return true;
};

const checkTableDataChanges = () => {
  // 1. 定义需要比对的核心字段 (对应 Form 中的字段)
  const oldData = orgFileTableData.value;
  const newData = fileTableData.value;

  // 2. 如果行数不同，肯定有变化
  if (oldData.length !== newData.length) {
    return { hasChanged: true, changedCount: newData.length };
  }

  let changedCount = 0;

  // 3. 逐行比对
  for (let i = 0; i < newData.length; i++) {
    const oldRow = oldData[i];
    const newRow = newData[i];

    // 如果某一行数据不一致，计数+1
    if (!isRowDataEqual(oldRow, newRow, ["baseId"])) {
      changedCount++;
    }
  }

  return { hasChanged: changedCount > 0, changedCount };
};

// 提交导入
const handleModalOk = () => {
  console.log(orgFileTableData.value);
  console.log(fileTableData.value);
  console.log(modalTableRef.value.editingData);
  if (modalTableRef.value.editingData != undefined) {
    message.warning("请点击保存后提交数据！");
    return;
  }
  for (let i = 0; i < fileTableData.value.length; i++) {
    // if (fileTableData.value[i]._warnings?.length > 0) {
    //   message.warning("请检查数据，标红部分数据有误！");
    //   return;
    // }
    if (fileTableData.value[i].picpthsWarnings?.length > 0) {
      message.warning("请检查图片，图片路径有误！");
      return;
    }
    if (fileTableData.value[i].vdpthsWarnings?.length > 0) {
      message.warning("请检查视频，视频路径有误！");
      return;
    }
  }
  fileTableData.value.forEach((item) => {
    item.tm = dayjs().format("YYYY-MM-DD HH:mm:ss");
  });
  // const { hasChanged, changedCount } = checkTableDataChanges();

  // // 3. 如果没有变化，直接返回，不执行后续操作
  // if (!hasChanged) {
  //   message.info("数据未发生任何变化，无需提交");
  //   return;
  // }
  Modal.confirm({
    title: "是否提交导入数据?",
    onOk: async () => {
      let res: any = await batchSaveDraft(fileTableData.value);
      if (res && res?.code == 0) {
        message.success("导入成功");
        tableRef.value?.getList();
        visible.value = false;
        await markImportTaskSuccess({ id: taskId.value });
      } else {
        message.error("导入失败,请检查数据是否正确");
      }
    },
  });
};

// 关闭导入弹窗
const handleCustomCancel = () => {
  Modal.confirm({
    title: "是否取消导入数据?",
    content: "未提交的数据将丢失",
    okText: "确定",
    onOk: async () => {
      // 可选：调用取消接口
      let res: any = await cancelImportTask({ taskId: taskId.value });
      if (res && res?.code == 0) {
        message.success("取消成功");
        tableRef.value?.getList();
        visible.value = false;
      }
    },
  });
};
// 导入-按钮
const importBtn = async () => {
  let res: any = await checkImportStatus();
  taskId.value = "";
  if (res?.code == 0) {
    const { hasImportingTask, currentTask } = res?.data || {};
    if (currentTask) {
      taskId.value = currentTask.id;
    }
    if (hasImportingTask) {
      visible.value = true;
      nextTick(async () => {
        try {
          fileLoading.value = true;
          modalTableRef.value.editingRowIndex = null;
          let res1: any = await getLastImportResult();
          fileTableaAnalysis(res1, "get");
        } catch (error) {
          message.error("导入失败");
        } finally {
          fileLoading.value = false;
        }
      });
    } else {
      fileInputRef.value?.click();
    }
  } else {
    message.error("导入查询失败");
  }
};
// 上传文件
const fileChange = (file: File) => {
  try {
    nextTick(async () => {
      visible.value = true;
      fileLoading.value = true;
      fileTableData.value = [];
      const formData = new FormData();
      formData.append("file", file);
      let res: any = await importFishZip(formData);
      const { code } = res.data || {};
      if (code == 1) {
        message.error("导入失败");
      } else {
        taskId.value = res.data.taskId;
        message.success("导入成功");
        fileTableaAnalysis(res, "file");
      }
    });
  } catch (error) {
  } finally {
    fileLoading.value = false;
  }
};
// 获取文件列表
const handleFileSelect = (e: Event) => {
  const target = e.target as HTMLInputElement;
  const file = target.files?.[0];
  if (!file) return;

  // 校验文件大小 (50MB)
  const maxSize = 50 * 1024 * 1024;
  if (file.size > maxSize) {
    message.error("文件大小不能超过50MB");
    resetFileInput();
    return;
  }

  // 校验文件类型
  const isZip =
    file.name.toLowerCase().endsWith(".zip") ||
    file.type === "application/zip" ||
    file.type === "application/x-zip-compressed";

  if (!isZip) {
    message.error("请选择.zip格式的压缩包");
    resetFileInput();
    return;
  }
  fileChange(file);
  resetFileInput();
};

const resetFileInput = () => {
  if (fileInputRef.value) {
    fileInputRef.value.value = "";
  }
};
const fileTableaAnalysis = (res: any, type: string) => {
  let data = [];
  let list = [];
  if (type == "file") {
    list = res.data.failedRows;
  } else {
    list = res.data.result.failedRowDetails;
  }
  list.forEach((item) => {
    data.push({
      ...item.data,
      vdpthList: item.vdpthList,
      vdpthsWarnings: item.vdpthsWarnings,
      picpthList: item.picpthList,
      picpthsWarnings: item.picpthsWarnings,
      _warnings: item.warnings,
    });
  });
  fileTableData.value = data || [];
  orgFileTableData.value = JSON.parse(JSON.stringify(fileTableData.value));
  fileLoading.value = false;
};
const handleReset = (values) => {
  handleSearchFinish(values);
};
// 自定义数据转换函数
const customTransform = (res: any) => {
  const rawRecords = res?.data?.records || [];
  const modifiedRecords = rawRecords.map((item: any) => {
    return {
      ...item,
      picpthList: item.picpth ? item.picpth.split(",").map((item: string) => baseUrl + "/?" + item) || [] : [],
    };
  });
  return {
    records: modifiedRecords,
    total: res?.data?.total || 0,
  };
};
// 搜索-按钮
const handleSearchFinish = (values: any) => {
  const filters = [
    values.ftp && {
      field: "ftp",
      operator: "eq",
      dataType: "string",
      value: values.ftp,
    },
    {
      field: "TM",
      operator: "gte",
      dataType: "date",
      value: values.strdt[0],
    },
    {
      field: "TM",
      operator: "lte",
      dataType: "date",
      value: values.strdt[1],
    },
    values.direction && {
      field: "direction",
      operator: "eq",
      dataType: "string",
      value: values.direction,
    },
    values.status && {
      field: "status",
      operator: "eq",
      dataType: "string",
      value: values.status,
    },
    values.stcd && {
      field: "stcd",
      operator: "eq",
      dataType: "string",
      value: values.stcd,
    },
    values.rstcd && {
      field: "rstcd",
      operator: "eq",
      dataType: "string",
      value: values.rstcd,
    },
    values.baseId !== "all" && {
      field: "baseId",
      operator: "eq",
      dataType: "string",
      value: values.baseId,
    },
  ].filter(Boolean);

  const filter = {
    logic: "and",
    filters: filters,
  };
  tableRef.value?.getList(filter);
};
// 处理预览点击 (由子组件触发)
const handlePreviewClick = (record: any, type: string, index: number) => {
  const mixedList: MediaItem[] = [];
  tablePreviewRecord.value = record;
  if (type === "image") {
    videoPreviewTitle.value = "图片预览";
    const nameList = record.picpthList;
    nameList.forEach((item: any) => {
      mixedList.push({
        type: "image",
        name: item.name,
        url: item.value ? `${baseUrl}/?${item.value}` : "",
      });
    });
  } else {
    videoPreviewTitle.value = "视频预览";
    const nameList = record.vdpthList;
    nameList.forEach((item: any) => {
      mixedList.push({
        type: "video",
        name: item.name, // 视频通常没有单独的名称字段，可根据需要调整
        url: item.value ? `${baseUrl}/?${item.value}` : "",
      });
    });
  }

  mediaPreviewVisible.value = true;
  currentMediaIndex.value = index;
  nextTick(() => {
    previewList.value = mixedList;
  });
};

// 【新增】统一切换逻辑
const prevMedia = () => {
  if (currentMediaIndex.value > 0) {
    currentMediaIndex.value--;
  }
};

const nextMedia = () => {
  if (currentMediaIndex.value < previewList.value.length - 1) {
    currentMediaIndex.value++;
  }
};

// 【新增】统一删除逻辑
const handleDeleteMedia = (item: any, index: number) => {
  Modal.confirm({
    title: "确认删除",
    content: "确定要从预览列表中移除该项吗？",
    onOk: () => {
      previewList.value.splice(index, 1);
      console.log(previewList.value);
      if (videoPreviewTitle.value == "图片预览") {
        if (previewList.value.length == 0) {
          tablePreviewRecord.value.picpthList = [];
          tablePreviewRecord.value.picpthsWarnings = [];
        } else {
          tablePreviewRecord.value.picpthList.splice(index, 1);
          tablePreviewRecord.value.picpthsWarnings = tablePreviewRecord.value.picpthsWarnings.filter(
            (warningName: any) => warningName !== item.name
          );
        }
      } else {
        if (previewList.value.length == 0) {
          tablePreviewRecord.value.vdpthList = [];
          tablePreviewRecord.value.vdpthsWarnings = [];
        } else {
          tablePreviewRecord.value.vdpthList.splice(index, 1);
          tablePreviewRecord.value.vdpthsWarnings = tablePreviewRecord.value.vdpthsWarnings.filter(
            (warningName: any) => warningName !== item.name
          );
        }
      }

      if (previewList.value.length === 0) {
        mediaPreviewVisible.value = false;
      } else {
        // 调整索引
        if (index <= currentMediaIndex.value) {
          currentMediaIndex.value = Math.max(0, currentMediaIndex.value - 1);
        }
      }
    },
  });
};

const closeMediaPreview = () => {
  mediaPreviewVisible.value = false;
  nextTick(() => {
    previewList.value = [];
    currentMediaIndex.value = 0;
  });
};

// --- 生命周期 ---
onMounted(() => {
  getDictItemsByCode({ dictCode: "direction" }).then((res) => {
    direction.value = res.data;
  });
  getDictItemsByCode({ dictCode: "guoyuStatus" }).then((res) => {
    guoyuStatus.value = res.data;
  });
});
</script>

<style lang="scss" scoped>
.guoYuSheShiShuJuTianBao-page {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  padding: 20px;
}
.media-list-container {
  background-color: rgb(234, 241, 251);
  padding: 10px;

  .list-item {
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      background-color: rgba(255, 255, 255, 0.5);
    }
    .file-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
    }

    &.select {
      color: #ffffff;
      background-color: rgb(37, 93, 138);
    }

    .list-item-delete {
      color: red;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.3s;
      margin-left: 8px;

      &:hover {
        transform: scale(1.1);
      }
    }

    &:hover .list-item-delete {
      opacity: 1;
    }
  }
}
</style>