<template>
  <el-dialog
    v-model="dialogVisible"
    :title="t('welcomeSidebar.scheduledTask')"
    width="600px"
    class="scheduled-task-dialog"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="scheduled-task-form">
      <!-- 开始 -->
      <div class="form-item form-item-horizontal">
        <label class="form-label">{{ t("welcomeSidebar.start") }}</label>
        <div class="form-content">
          <div class="start-time-wrapper">
            <el-date-picker
              v-model="formData.startDate"
              type="date"
              :placeholder="t('welcomeSidebar.start')"
              format="M月D日 dddd"
              value-format="YYYY-MM-DD"
              class="start-date-picker"
            />
            <el-time-picker
              v-model="formData.startTime"
              :placeholder="t('welcomeSidebar.start')"
              format="HH:mm"
              value-format="HH:mm"
              class="start-time-picker"
            />
          </div>
        </div>
      </div>

      <!-- 提醒 -->
      <div class="form-item form-item-horizontal">
        <label class="form-label">{{ t("welcomeSidebar.reminder") }}</label>
        <div class="form-content">
          <el-select
            v-model="formData.reminder"
            :placeholder="t('welcomeSidebar.reminder')"
            class="form-select"
          >
            <el-option
              v-for="option in reminderOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
              :disabled="option.disabled"
            />
          </el-select>
        </div>
      </div>

      <!-- 重复 -->
      <div class="form-item form-item-horizontal">
        <label class="form-label">{{ t("welcomeSidebar.repeat") }}</label>
        <div class="form-content">
          <div class="repeat-wrapper">
            <el-select
              v-model="formData.repeat"
              :placeholder="t('welcomeSidebar.repeat')"
              class="form-select repeat-select"
              @change="handleRepeatChange"
            >
              <el-option
                v-for="option in repeatOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
            <!-- 结束于（当选择重复时显示） -->
            <div v-if="showEndsOn" class="ends-on-wrapper">
              <label class="ends-on-label">{{
                t("welcomeSidebar.endsOn")
              }}</label>
              <el-date-picker
                v-model="formData.endsOn"
                type="date"
                :placeholder="t('welcomeSidebar.endsOn')"
                format="YYYY年M月D日"
                value-format="YYYY-MM-DD"
                class="ends-on-picker"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 自定义重复弹窗 -->
    <el-dialog
      v-model="customRepeatDialogVisible"
      width="350px"
      class="custom-repeat-dialog"
      @close="handleCustomRepeatClose"
    >
      <div class="custom-repeat-form" v-if="formData.customRepeatData">
        <div class="from-title">{{ t("welcomeSidebar.customRepeat") }}</div>
        <!-- 频率 -->
        <div class="form-item form-item-horizontal">
          <label class="form-label">{{ t("welcomeSidebar.frequency") }}</label>
          <div class="form-content">
            <el-select
              v-model="formData.customRepeatData!.frequency"
              :placeholder="t('welcomeSidebar.frequency')"
              class="form-select"
              @change="handleFrequencyChange"
            >
              <el-option
                :label="t('welcomeSidebar.customRepeatDaily')"
                value="daily"
              />
              <el-option
                :label="t('welcomeSidebar.customRepeatWeekly')"
                value="weekly"
              />
              <el-option
                :label="t('welcomeSidebar.customRepeatMonthly')"
                value="monthly"
              />
            </el-select>
          </div>
        </div>

        <!-- 每X天 -->
        <div
          v-if="formData.customRepeatData?.frequency === 'daily'"
          class="form-item form-item-horizontal"
        >
          <label class="form-label">{{ t("welcomeSidebar.every") }}</label>
          <div class="form-content">
            <div class="interval-wrapper">
              <el-input-number
                v-model="formData.customRepeatData!.interval"
                :min="1"
                :max="intervalMax"
                :controls="true"
                class="interval-input"
              />
              <span class="interval-unit">{{ t("welcomeSidebar.day") }}</span>
            </div>
          </div>
        </div>

        <!-- 每周的（按周重复时显示） -->
        <div
          v-if="formData.customRepeatData?.frequency === 'weekly'"
          class="form-item form-item-horizontal"
        >
          <label class="form-label">{{ t("welcomeSidebar.ofTheWeek") }}</label>
          <div class="form-content">
            <div class="weekdays-wrapper">
              <button
                v-for="(day, index) in weekdays"
                :key="index"
                :class="[
                  'weekday-btn',
                  {
                    active:
                      formData.customRepeatData?.selectedDays.includes(index),
                  },
                ]"
                @click="toggleWeekday(index)"
              >
                {{ day }}
              </button>
            </div>
          </div>
        </div>

        <!-- 每月的（按月重复时显示） -->
        <div
          v-if="formData.customRepeatData?.frequency === 'monthly'"
          class="form-item form-item-horizontal"
        >
          <label class="form-label">{{ t("welcomeSidebar.ofTheMonth") }}</label>
          <div class="form-content">
            <div class="month-days-wrapper">
              <div
                v-for="day in 31"
                :key="day"
                size
                :class="[
                  'month-day-btn',
                  {
                    active:
                      formData.customRepeatData?.selectedMonthDays.includes(
                        day,
                      ),
                  },
                ]"
                @click="toggleMonthDay(day)"
              >
                {{ day }}
              </div>
            </div>
          </div>
        </div>

        <!-- 结束于 -->
        <div class="form-item form-item-horizontal">
          <label class="form-label">{{ t("welcomeSidebar.endsOn") }}</label>
          <div class="form-content">
            <el-date-picker
              v-model="formData.endsOn"
              type="date"
              :placeholder="t('welcomeSidebar.endsOn')"
              format="YYYY年M月D日"
              value-format="YYYY-MM-DD"
              class="ends-on-picker"
            />
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCustomRepeatCancel">{{
            t("common.cancel")
          }}</el-button>
          <el-button type="primary" @click="handleCustomRepeatConfirm">{{
            t("common.confirm")
          }}</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 知识库选择弹窗 -->
    <el-dialog
      v-model="knowledgeBaseDialogVisible"
      :title="t('welcomeSidebar.selectFromKnowledgeBaseTitle')"
      width="900px"
      class="knowledge-base-dialog"
      destroy-on-close
      @opened="handleKnowledgeBaseDialogOpened"
    >
      <div class="knowledge-base-content">
        <!-- 左右布局 -->
        <div class="knowledge-base-layout">
          <!-- 左侧文件夹树 -->
          <div class="knowledge-base-left">
            <div class="knowledge-base-tree-container">
              <el-tree
                :data="knowledgeBaseTreeData"
                :props="{ ...knowledgeBaseTreeProps, isLeaf: 'isLeaf' }"
                :expand-on-click-node="false"
                :highlight-current="true"
                :default-expanded-keys="knowledgeBaseExpandedKeys"
                :current-node-key="knowledgeBaseCurrentFolderId ?? undefined"
                node-key="id"
                lazy
                :load="handleKnowledgeBaseLazyLoad"
                @node-click="handleKnowledgeBaseFolderClick"
                @node-expand="handleKnowledgeBaseNodeExpand"
                @node-collapse="handleKnowledgeBaseNodeCollapse"
                class="knowledge-base-tree"
                ref="knowledgeBaseTreeRef"
              >
                <template #default="{ data }">
                  <span class="knowledge-base-tree-node">
                    <i class="fas fa-folder knowledge-base-folder-icon"></i>
                    <span class="knowledge-base-folder-name">{{
                      data.name === "我的文档" && locale !== "zh-CN"
                        ? "My Documents"
                        : data.name
                    }}</span>
                  </span>
                </template>
              </el-tree>
            </div>
          </div>
          <!-- 右侧文件列表 -->
          <div class="knowledge-base-right">
            <div class="knowledge-base-file-list-container">
              <el-table
                :data="knowledgeBaseFileList"
                @selection-change="handleKnowledgeBaseSelectionChange"
                @row-click="handleKnowledgeBaseFileClick"
                :highlight-current-row="true"
                class="knowledge-base-file-table"
                style="width: 100%"
              >
                <el-table-column type="selection" width="40" align="center" />
                <el-table-column
                  prop="name"
                  :label="t('KnowledgeBase.fileName') || '文件名称'"
                  min-width="200"
                >
                  <template #default="scope">
                    <div class="knowledge-base-file-info" :class="{ 'is-processing': scope.row.knowledgeStatus === 'processing' }">
                      <img
                        v-if="scope.row.knowledgeStatus !== 'processing'"
                        :src="getFileIcon(scope.row.name)"
                        class="knowledge-base-file-icon"
                        :alt="scope.row.name"
                      />
                      <el-icon v-else class="knowledge-base-file-icon is-loading"><Loading /></el-icon>
                      <span class="knowledge-base-file-name">{{
                        scope.row.name
                      }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="knowledgeStatus"
                  :label="t('KnowledgeBase.knowledgeStatus') || '知识库状态'"
                  width="120"
                  align="center"
                >
                  <template #default="scope">
                    <el-tag
                      v-if="scope.row.knowledgeStatus"
                      :type="getStatusTagType(scope.row.knowledgeStatus)"
                      size="small"
                    >
                      {{ getStatusLabel(scope.row.knowledgeStatus) }}
                    </el-tag>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="type"
                  :label="t('KnowledgeBase.fileType') || '类型'"
                  width="80"
                  align="center"
                >
                  <template #default="scope">
                    <div class="knowledge-base-file-type-badge">
                      {{ getFileTypeText(scope.row.name) }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="size"
                  :label="t('KnowledgeBase.fileSize') || '大小'"
                  width="120"
                  align="center"
                >
                  <template #default="scope">
                    {{ formatFileSize(scope.row.size || 0) }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="knowledgeBaseDialogVisible = false">{{
            t("common.cancel")
          }}</el-button>
          <el-button type="primary" @click="handleKnowledgeBaseConfirm">{{
            t("common.confirm")
          }}</el-button>
        </div>
      </template>
    </el-dialog>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">{{ t("common.cancel") }}</el-button>
        <el-button type="primary" @click="handleConfirm">{{
          t("common.confirm")
        }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, computed, nextTick } from "vue";
import { ElMessage, ElTag } from "element-plus";
import { useI18n } from "vue-i18n";
import { Loading } from "@element-plus/icons-vue";
import {
  getFolders,
  getFiles,
  type FolderItem,
  type FileItem,
} from "@/api/files";
import { ElTree } from "element-plus";
import { formatFileSize } from "@/utils/fileDragHandler";
import { useSettingsStore } from "@/stores/settings";
import { useSchedulesStore } from "@/stores/schedules";

const { t, locale } = useI18n();
const settingsStore = useSettingsStore();
const schedulesStore = useSchedulesStore();

// Props
interface Props {
  modelValue: boolean;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  "update:modelValue": [value: boolean];
  cancel: [];
  created: [];
}>();

// 附件文件接口
interface AttachmentFile {
  name: string;
  file: File | null;
  type: "local" | "knowledgeBase"; // 文件来源类型
  knowledgeBaseId?: string; // 知识库文件ID（如果来自知识库）
}

// 自定义重复数据接口
interface CustomRepeatData {
  frequency: "daily" | "weekly" | "monthly"; // 频率类型
  interval: number; // 每X天/周/月
  selectedDays: number[]; // 每周的星期几（0-6，0是周一）
  selectedMonthDays: number[]; // 每月的日期（1-31）
}

// 表单数据接口
export interface ScheduledTaskForm {
  // 开始时间
  startDate: string;
  startTime: string;
  // 提醒时间
  reminder: string;
  // 重复选项
  repeat: string; // 重复选项的值（"noRepeat", "daily", "weekly", "monthly", "biweekly", "custom_xxx" 等）
  // 结束日期（当 repeat !== "noRepeat" 时存在）
  endsOn?: string;
  // 自定义重复数据（当 repeat === "custom_xxx" 时存在）
  customRepeatData?: CustomRepeatData;
}

// 任务项接口
export interface ScheduledTaskItem {
  id: string; // 任务唯一标识
  formData: ScheduledTaskForm; // 表单数据
  createdAt: string; // 创建时间
  updatedAt?: string; // 更新时间
  enabled?: boolean; // 是否启用（默认 true）
}

// 弹窗显示状态
const dialogVisible = ref(false);

// 知识库选择弹窗状态
const knowledgeBaseDialogVisible = ref(false);

// 知识库文件夹树数据
const knowledgeBaseTreeData = ref<FolderItem[]>([]);
const knowledgeBaseTreeProps = {
  children: "children",
  label: "name",
  isLeaf: "isLeaf",
};
const knowledgeBaseExpandedKeys = ref<(string | number)[]>([]);
const knowledgeBaseCurrentFolderId = ref<string | number | null>(null);
const knowledgeBaseTreeRef = ref<InstanceType<typeof ElTree>>();

// 知识库文件列表
const knowledgeBaseFileList = ref<FileItem[]>([]);
const knowledgeBaseSelectedFiles = ref<FileItem[]>([]);

// 表单数据
const formData = ref<ScheduledTaskForm>({
  // 开始时间
  startDate: "",
  startTime: "",
  // 提醒时间（默认邮箱）
  reminder: "email",
  // 重复选项（默认不重复）
  repeat: "noRepeat",
  // 结束日期（当有重复时）
  endsOn: undefined,
  // 自定义重复数据（当选择自定义时）
  customRepeatData: undefined,
});

// 提醒选项
const reminderOptions = computed(() => [
  {
    label: t("welcomeSidebar.reminderEmail"),
    value: "email",
    disabled: false,
  },
  // {
  //   label: t("welcomeSidebar.reminderSMS"),
  //   value: "sms",
  //   disabled: true,
  // },
  // {
  //   label: t("welcomeSidebar.reminderWeChat"),
  //   value: "wechat",
  //   disabled: true,
  // },
]);

// 基础重复选项
const baseRepeatOptions = computed(() => [
  {
    label: t("welcomeSidebar.noRepeat"),
    value: "noRepeat",
  },
  {
    label: t("welcomeSidebar.repeatDaily"),
    value: "daily",
  },
  {
    label: t("welcomeSidebar.repeatEveryWorkday"),
    value: "workday",
  },
  {
    label: t("welcomeSidebar.repeatWeekly"),
    value: "weekly",
  },
  {
    label: t("welcomeSidebar.repeatBiweekly"),
    value: "biweekly",
  },
  {
    label: t("welcomeSidebar.repeatMonthly"),
    value: "monthly",
  },
  {
    label: t("welcomeSidebar.custom"),
    value: "custom",
  },
]);

// 自定义重复选项列表
const customRepeatOptionsList = ref<
  Array<{ label: string; value: string; customData?: any }>
>([]);

// 任务列表
const taskList = ref<ScheduledTaskItem[]>([]);

// 重复选项（包含基础选项和自定义选项）
const repeatOptions = computed(() => {
  return [...baseRepeatOptions.value, ...customRepeatOptionsList.value];
});

// 计算是否显示结束日期
const showEndsOn = computed(() => {
  return formData.value.repeat !== "noRepeat";
});

// 自定义重复弹窗状态
const customRepeatDialogVisible = ref(false);

// 监听自定义重复弹窗打开，确保 customRepeatData 已初始化
watch(customRepeatDialogVisible, (isVisible) => {
  if (isVisible) {
    // 如果 customRepeatData 不存在，初始化它
    if (!formData.value.customRepeatData) {
      formData.value.customRepeatData = {
        frequency: "daily",
        interval: 1,
        selectedDays: [],
        selectedMonthDays: [],
      };
    } else {
      // 如果已存在自定义重复选项，尝试从 customRepeatOptionsList 中恢复数据
      const currentRepeat = formData.value.repeat;
      if (currentRepeat.startsWith("custom_")) {
        const customOption = customRepeatOptionsList.value.find(
          (opt) => opt.value === currentRepeat,
        );
        if (customOption && customOption.customData) {
          formData.value.customRepeatData = {
            ...customOption.customData,
          };
        }
      }
    }
  }
});

// 星期数组
const weekdays = computed(() => [
  t("welcomeSidebar.monday"),
  t("welcomeSidebar.tuesday"),
  t("welcomeSidebar.wednesday"),
  t("welcomeSidebar.thursday"),
  t("welcomeSidebar.friday"),
  t("welcomeSidebar.saturday"),
  t("welcomeSidebar.sunday"),
]);

// 间隔最大值（根据频率动态变化）
const intervalMax = computed(() => {
  const frequency = formData.value.customRepeatData?.frequency || "daily";
  if (frequency === "daily") {
    return 99;
  } else if (frequency === "weekly") {
    return 12;
  } else {
    return 12; // monthly
  }
});

// 处理重复选项变化
const handleRepeatChange = (value: string) => {
  if (value === "custom") {
    // 先设置 repeat 为 "custom"，这样 watch 可以正确初始化 customRepeatData
    formData.value.repeat = "custom";
    // 打开自定义重复弹窗
    customRepeatDialogVisible.value = true;
  } else if (value === "noRepeat") {
    // 如果选择不重复，清除 endsOn 和 customRepeatData
    formData.value.endsOn = undefined;
    formData.value.customRepeatData = undefined;
    formData.value.repeat = "noRepeat";
  } else {
    // 如果选择其他重复选项，清除 customRepeatData，但保留 endsOn（用户需要设置）
    formData.value.customRepeatData = undefined;
    formData.value.repeat = value;
  }
};

// 处理频率变化
const handleFrequencyChange = () => {
  if (!formData.value.customRepeatData) return;

  // 切换频率时重置相关数据
  if (formData.value.customRepeatData.frequency === "weekly") {
    formData.value.customRepeatData.selectedMonthDays = [];
  } else if (formData.value.customRepeatData.frequency === "monthly") {
    formData.value.customRepeatData.selectedDays = [];
  }
  // 如果当前 interval 超过新频率的最大值，重置为1
  const max = intervalMax.value;
  if (formData.value.customRepeatData.interval > max) {
    formData.value.customRepeatData.interval = 1;
  }
};

// 切换星期几
const toggleWeekday = (index: number) => {
  if (!formData.value.customRepeatData) return;

  const idx = formData.value.customRepeatData.selectedDays.indexOf(index);
  if (idx > -1) {
    formData.value.customRepeatData.selectedDays.splice(idx, 1);
  } else {
    formData.value.customRepeatData.selectedDays.push(index);
  }
};

// 切换月份日期
const toggleMonthDay = (day: number) => {
  if (!formData.value.customRepeatData) return;

  const idx = formData.value.customRepeatData.selectedMonthDays.indexOf(day);
  if (idx > -1) {
    formData.value.customRepeatData.selectedMonthDays.splice(idx, 1);
  } else {
    formData.value.customRepeatData.selectedMonthDays.push(day);
  }
};

// 处理自定义重复弹窗关闭
const handleCustomRepeatClose = () => {
  // 如果用户关闭弹窗但没有确认，恢复重复选项
  if (formData.value.repeat === "custom") {
    formData.value.repeat = "noRepeat";
    formData.value.customRepeatData = undefined;
  }
};

// 处理自定义重复取消
const handleCustomRepeatCancel = () => {
  customRepeatDialogVisible.value = false;
};

// 生成自定义重复选项的显示文本
const generateCustomRepeatLabel = () => {
  if (!formData.value.customRepeatData) return "";

  const { frequency, interval, selectedDays, selectedMonthDays } =
    formData.value.customRepeatData;

  if (frequency === "daily") {
    return t("welcomeSidebar.customRepeatEveryNDays", {
      interval: interval.toString(),
    });
  } else if (frequency === "weekly") {
    if (selectedDays.length === 0) {
      return "";
    }
    // 排序选中的星期
    const sortedDays = [...selectedDays].sort((a, b) => a - b);
    const dayNames = sortedDays.map((day) => weekdays.value[day]);
    const daysText = dayNames.join("、");
    // 如果超过一定长度，截断并添加省略号
    const maxLength = 15;
    const displayDays =
      daysText.length > maxLength
        ? daysText.substring(0, maxLength) + "..."
        : daysText;
    // 如果间隔为1，使用"每周的"，否则使用"每X周的"
    if (interval === 1) {
      return t("welcomeSidebar.customRepeatWeeklyOnDays", {
        days: displayDays,
      });
    } else {
      return t("welcomeSidebar.customRepeatEveryNWeeksOnDays", {
        interval: interval.toString(),
        days: displayDays,
      });
    }
  } else if (frequency === "monthly") {
    if (selectedMonthDays.length === 0) {
      return "";
    }
    // 排序选中的日期
    const sortedDays = [...selectedMonthDays].sort((a, b) => a - b);
    const daysText = sortedDays.join("、");
    // 如果超过一定长度，截断并添加省略号
    const maxLength = 15;
    const displayDays =
      daysText.length > maxLength
        ? daysText.substring(0, maxLength) + "..."
        : daysText;
    // 如果间隔为1，使用"每月的"，否则使用"每X月的"
    if (interval === 1) {
      return t("welcomeSidebar.customRepeatMonthlyOnDays", {
        days: displayDays,
      });
    } else {
      return t("welcomeSidebar.customRepeatEveryNMonthsOnDays", {
        interval: interval.toString(),
        days: displayDays,
      });
    }
  }
  return "";
};

// 处理自定义重复确认
const handleCustomRepeatConfirm = () => {
  if (!formData.value.customRepeatData) return;

  // 验证数据
  if (
    formData.value.customRepeatData.frequency === "weekly" &&
    formData.value.customRepeatData.selectedDays.length === 0
  ) {
    ElMessage.warning(t("welcomeSidebar.selectAtLeastOneDay"));
    return;
  }
  if (
    formData.value.customRepeatData.frequency === "monthly" &&
    formData.value.customRepeatData.selectedMonthDays.length === 0
  ) {
    ElMessage.warning(t("welcomeSidebar.selectAtLeastOneDate"));
    return;
  }

  // 生成自定义重复选项的显示文本
  const customLabel = generateCustomRepeatLabel();
  if (!customLabel) {
    return;
  }

  // 生成唯一的值
  const customValue = `custom_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;

  // 创建自定义选项
  const customOption = {
    label: customLabel,
    value: customValue,
    customData: {
      ...formData.value.customRepeatData,
    },
  };

  // 添加到自定义选项列表
  customRepeatOptionsList.value.push(customOption);

  // 设置当前选择的值为新创建的自定义选项
  // customRepeatData 已经存储在 formData 中，不需要额外存储
  formData.value.repeat = customValue;

  // 关闭弹窗
  customRepeatDialogVisible.value = false;
};

// 从 store 加载自定义重复选项
const loadCustomRepeatOptions = () => {
  const scheduledTask = settingsStore.searchSettings?.scheduledTask;
  if (
    scheduledTask?.customRepeatOptions &&
    Array.isArray(scheduledTask.customRepeatOptions)
  ) {
    customRepeatOptionsList.value = scheduledTask.customRepeatOptions.map(
      (opt: any) => ({
        label: opt.label,
        value: opt.value,
        customData: opt.customData,
      }),
    );
  }
};

// 从 store 加载任务列表
const loadTaskList = () => {
  const scheduledTask = settingsStore.searchSettings?.scheduledTask;
  if (scheduledTask?.taskList && Array.isArray(scheduledTask.taskList)) {
    taskList.value = scheduledTask.taskList.map((task: any) => ({
      id:
        task.id ||
        `task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      formData: task.formData,
      createdAt: task.createdAt || new Date().toISOString(),
      updatedAt: task.updatedAt,
      enabled: task.enabled !== undefined ? task.enabled : true,
    }));
  }
};

// 监听 store 中 scheduledTask.customRepeatOptions 的变化
watch(
  () => settingsStore.searchSettings?.scheduledTask?.customRepeatOptions,
  () => {
    loadCustomRepeatOptions();
  },
  { deep: true },
);

// 监听 store 中 scheduledTask.taskList 的变化
watch(
  () => settingsStore.searchSettings?.scheduledTask?.taskList,
  () => {
    loadTaskList();
  },
  { deep: true },
);

// 监听 modelValue 变化
watch(
  () => props.modelValue,
  async (newVal) => {
    dialogVisible.value = newVal;
    if (newVal) {
      // 如果 store 中没有数据，先获取
      if (
        !settingsStore.searchSettings ||
        Object.keys(settingsStore.searchSettings).length === 0
      ) {
        await settingsStore.fetchSearchSettings();
      }

      // 加载自定义重复选项
      loadCustomRepeatOptions();

      // 加载任务列表
      loadTaskList();

      // 从 store 恢复表单数据
      const scheduledTask = settingsStore.searchSettings?.scheduledTask;
      if (scheduledTask?.formData) {
        const savedFormData = scheduledTask.formData;
        formData.value = {
          startDate: savedFormData.startDate || "",
          startTime: savedFormData.startTime || "",
          reminder: savedFormData.reminder || "email",
          repeat: savedFormData.repeat || "noRepeat",
          endsOn: savedFormData.endsOn,
          customRepeatData: savedFormData.customRepeatData,
        };
      } else {
        // 如果没有保存的数据，设置默认时间
        const now = new Date();
        const dateStr = now.toISOString().split("T")[0];
        formData.value.startDate = dateStr || "";
        formData.value.startTime = `${now.getHours().toString().padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}`;
      }
    }
  },
  { immediate: true },
);

// 监听 dialogVisible 变化，同步到父组件
watch(dialogVisible, (newVal) => {
  emit("update:modelValue", newVal);
});

// 获取文件图标
const getFileIcon = (fileName: string): string => {
  const ext = fileName.split(".").pop()?.toLowerCase();
  const iconMap: Record<string, string> = {
    doc: "/word_icon.svg",
    docx: "/word_icon.svg",
    xls: "/excel_icon.svg",
    xlsx: "/excel_icon.svg",
    ppt: "/PPT_icon.svg",
    pptx: "/PPT_icon.svg",
    pdf: "/pdf_icon.svg",
    md: "/md_icon.svg",
    txt: "/TXT_icon.svg",
    // 图片文件使用专门的图标
    jpg: "/jpg_icon.svg",
    jpeg: "/jpg_icon.svg",
    png: "/png_icon.svg",
    gif: "/gif_icon.svg",
    // 其他图片格式
    webp: "/jpg_icon.svg", // 使用 jpg 图标作为默认图片图标
    svg: "/jpg_icon.svg",
    bmp: "/jpg_icon.svg",
    ico: "/jpg_icon.svg",
    tiff: "/jpg_icon.svg",
    tif: "/jpg_icon.svg",
    // 音频文件
    mp3: "/mp3.svg",
    wav: "/mp3.svg",
    ogg: "/mp3.svg",
    m4a: "/mp3.svg",
    aac: "/mp3.svg",
    flac: "/mp3.svg",
    wma: "/mp3.svg",
    // 视频文件
    mp4: "/mp4.svg",
    avi: "/mp4.svg",
    mkv: "/mp4.svg",
    mov: "/mp4.svg",
    wmv: "/mp4.svg",
    flv: "/mp4.svg",
    webm: "/mp4.svg",
    m4v: "/mp4.svg",
  };
  return iconMap[ext || ""] || "/wenjian.svg";
};

// 获取文件类型文本
const getFileTypeText = (fileName: string): string => {
  const ext = fileName.split(".").pop()?.toUpperCase();
  return ext || "FILE";
};

// 获取知识库状态显示文本
const getStatusLabel = (status?: string): string => {
  const statusMap: Record<string, string> = {
    not_supported: t("KnowledgeBase.statusNotSupported") || "不支持",
    not_processed: t("KnowledgeBase.statusNotProcessed") || "未处理",
    processing: t("KnowledgeBase.statusProcessing") || "处理中",
    completed: t("KnowledgeBase.statusCompleted") || "已完成",
    failed: t("KnowledgeBase.statusFailed") || "失败",
  };
  return statusMap[status || ""] || status || "未处理";
};

// 获取状态标签类型
const getStatusTagType = (status?: string): "success" | "primary" | "danger" | "info" => {
  switch (status) {
    case "completed":
      return "success";
    case "processing":
      return "primary";
    case "failed":
      return "danger";
    case "not_processed":
    case "not_supported":
      return "info";
    default:
      return "info";
  }
};

// 转换文件夹树结构
const transformKnowledgeBaseFolderTree = (nodes: any[]): FolderItem[] => {
  if (!Array.isArray(nodes)) return [];

  return nodes
    .filter(
      (node) => node && (node.folder || node.type === "folder" || !node.type || node.id === -1),
    )
    .map((node) => ({
      id: (node.id === 0 || node.id === "0") ? -1 : node.id,
      name: node.name || node.folderName || (node.id === -1 ? "我的文档" : ""),
      parentId: (node.parentId === 0 || node.parentId === "0") ? -1 : node.parentId,
      isLeaf: false, // 统一标记为非叶子节点以支持懒加载
      children: node.children
        ? transformKnowledgeBaseFolderTree(node.children)
        : [],
    }));
};

// 知识库树懒加载处理
const handleKnowledgeBaseLazyLoad = async (node: any, resolve: Function) => {
  try {
    // 根节点加载
    if (node.level === 0) {
      const response = await getFolders();
      if (response.data) {
        const rootNode = transformKnowledgeBaseFolderTree([response.data])[0];
        resolve([rootNode]);
        
        // 初始展开并选中根节点
        nextTick(() => {
          knowledgeBaseExpandedKeys.value = [rootNode.id];
          knowledgeBaseCurrentFolderId.value = rootNode.id;
          knowledgeBaseTreeRef.value?.setCurrentKey(rootNode.id);
          loadKnowledgeBaseFiles(rootNode.id);
        });
      } else {
        resolve([]);
      }
      return;
    }

    // 子节点加载
    const folderId = node.data.id === -1 ? undefined : node.data.id;
    const response = await getFiles(folderId);
    if (response.data) {
      const items = Array.isArray(response.data)
        ? response.data
        : response.data.files || response.data.items || [];
      
      const folders = items
        .filter((item: any) => !!(item.isFolder || item.folder || item.type === "folder"))
        .map((item: any) => ({
          ...item,
          id: (item.id === 0 || item.id === "0") ? -1 : item.id,
          name: item.name || item.folderName || item.fileName,
          isLeaf: false
        }));
      
      resolve(folders);
    } else {
      resolve([]);
    }
  } catch (error) {
    console.error("懒加载知识库目录失败:", error);
    resolve([]);
  }
};

// 获取所有文件夹ID（用于默认展开）
const getAllKnowledgeBaseFolderIds = (
  folders: FolderItem[],
): (string | number)[] => {
  const ids: (string | number)[] = [];
  const collect = (folders: FolderItem[]) => {
    folders.forEach((folder) => {
      ids.push(folder.id);
      if (folder.children) {
        collect(folder.children);
      }
    });
  };
  collect(folders);
  return ids;
};

// 加载知识库文件夹树
const loadKnowledgeBaseFolders = async () => {
  // 开启懒加载模式后，由 handleKnowledgeBaseLazyLoad 处理初始加载
  knowledgeBaseFileList.value = [];
  knowledgeBaseCurrentFolderId.value = null;
};

// 加载知识库文件列表
const loadKnowledgeBaseFiles = async (folderId: string | number) => {
  try {
    const id = folderId === "root" ? undefined : folderId;
    const response = await getFiles(id);

    if (response.data) {
      let files = Array.isArray(response.data)
        ? response.data
        : response.data.files || [];

      // 过滤掉文件夹类型的数据
      knowledgeBaseFileList.value = files.filter(
        (item: any) => !item.isFolder && !item.folder && item.type !== "folder",
      );
    }
  } catch (error) {
    console.error("加载知识库文件列表失败:", error);
    knowledgeBaseFileList.value = [];
  }
};

// 处理知识库弹窗打开
const handleKnowledgeBaseDialogOpened = () => {
  loadKnowledgeBaseFolders();
};

// 处理知识库文件夹点击
const handleKnowledgeBaseFolderClick = (data: FolderItem) => {
  knowledgeBaseCurrentFolderId.value = data.id;
  knowledgeBaseTreeRef.value?.setCurrentKey(data.id);
  loadKnowledgeBaseFiles(data.id);
  // 清空已选文件
  knowledgeBaseSelectedFiles.value = [];
};

// 处理知识库节点展开
const handleKnowledgeBaseNodeExpand = (data: FolderItem) => {
  if (!knowledgeBaseExpandedKeys.value.includes(data.id)) {
    knowledgeBaseExpandedKeys.value.push(data.id);
  }
};

// 处理知识库节点收起
const handleKnowledgeBaseNodeCollapse = (data: FolderItem) => {
  const index = knowledgeBaseExpandedKeys.value.indexOf(data.id);
  if (index > -1) {
    knowledgeBaseExpandedKeys.value.splice(index, 1);
  }
};

// 处理知识库文件选择变化
const handleKnowledgeBaseSelectionChange = (selection: FileItem[]) => {
  knowledgeBaseSelectedFiles.value = selection;
};

// 处理知识库文件点击
const handleKnowledgeBaseFileClick = (_row: FileItem) => {
  // 可以在这里添加双击打开文件的逻辑
};

// 处理知识库选择确认
const handleKnowledgeBaseConfirm = () => {
  if (knowledgeBaseSelectedFiles.value.length === 0) {
    ElMessage.warning(t("welcomeSidebar.selectFilesToDownload"));
    return;
  }

  // 将选中的知识库文件添加到附件列表
  // knowledgeBaseSelectedFiles.value.forEach((file) => {
  //   formData.value.attachmentFiles.push({
  //     name: file.name,
  //     file: null,
  //     type: "knowledgeBase",
  //     knowledgeBaseId: file.id?.toString(),
  //   });
  // });

  knowledgeBaseDialogVisible.value = false;
  // 清空选择
  knowledgeBaseSelectedFiles.value = [];
};

// 处理关闭
const handleClose = () => {
  resetForm();
  emit("cancel");
};

// 处理取消
const handleCancel = () => {
  dialogVisible.value = false;
  resetForm();
  emit("cancel");
};

// 转换函数：将 customRepeatData 转换为 Cron 表达式
const convertToCron = (data: CustomRepeatData): string => {
  // 先根据表单的开始时间设置 时、分、秒
  // Cron 采用 6 位格式：秒 分 时 日 月 周
  let second = "0";
  let minute = "0";
  let hour = "0";

  const startTime = formData.value.startTime;
  if (startTime) {
    const [hStr, mStr] = startTime.split(":");
    const hNum = Number(hStr);
    const mNum = Number(mStr);

    if (!Number.isNaN(hNum) && hNum >= 0 && hNum <= 23) {
      hour = hNum.toString();
    }
    if (!Number.isNaN(mNum) && mNum >= 0 && mNum <= 59) {
      minute = mNum.toString();
    }
  }

  // 初始化 日 / 月 / 周 字段，默认值为 * 或 ?
  let dayOfDay = "*";
  let dayOfMonth = "*";
  let dayOfWeek = "?";

  // 根据 frequency 类型处理（结合 interval）
  switch (data.frequency) {
    // 日
    case "daily":
      if (data.interval && data.interval > 1) {
        dayOfDay = `*/${data.interval}`;
      } else {
        dayOfDay = "*";
      }

      dayOfMonth = "*";
      dayOfWeek = "?";
      break;
    // 月
    case "monthly":
      const cronMonthDays = data.selectedMonthDays.map((day) => {
        return day;
      });
      if (data.interval && data.interval > 1) {
        if (cronMonthDays.length > 0) {
          dayOfDay = cronMonthDays.join(",");
          dayOfMonth = `*/${data.interval}`;
        } else {
          dayOfDay = "*";
          dayOfMonth = `*/${data.interval}`;
        }
      } else {
        if (cronMonthDays.length > 0) {
          dayOfDay = cronMonthDays.join(",");
          dayOfMonth = "*";
        }
      }
      dayOfWeek = "?";
      break;
    // 周
    case "weekly":
      const cronWeekDays = data.selectedDays.map((day) => {
        return day === 6 ? 0 : day + 1;
      });
      if (data.interval && data.interval > 1) {
        if (cronWeekDays.length > 0) {
          let WeekDays = cronWeekDays.join(",");
          dayOfWeek = `${WeekDays}/${data.interval}`;
        } else {
          dayOfWeek = `*/${data.interval}`;
        }
      } else {
        if (cronWeekDays.length > 0) {
          dayOfWeek = cronWeekDays.join(",");
        }
      }
      dayOfDay = "?";
      dayOfMonth = "*";
      break;
  }

  // 组合 Cron 表达式（秒 分 时 日 月 周）
  return `${second} ${minute} ${hour} ${dayOfDay} ${dayOfMonth} ${dayOfWeek}`;
};

// 处理确认
const handleConfirm = async () => {
  try {
    // 验证：如果是单次任务，开始时间必须在当前时间之后
    if (formData.value.repeat === "noRepeat") {
      const startDateTime = new Date(
        `${formData.value.startDate}T${formData.value.startTime}:00`,
      );
      const currentDateTime = new Date();

      if (startDateTime <= currentDateTime) {
        ElMessage.error("单次任务的开始时间必须在当前时间之后");
        return;
      }
    }

    // 验证：如果是重复任务，必须选择结束时间
    if (formData.value.repeat !== "noRepeat") {
      if (!formData.value.endsOn) {
        ElMessage.error("重复任务必须选择结束时间");
        return;
      }
    }

    // 构建 startTime（格式：YYYY-MM-DDTHH:mm:ss，ISO 8601 格式）
    const startTime = `${formData.value.startDate}T${formData.value.startTime}:00`;

    // 构建 repeatType
    let repeatType: string | undefined;
    if (formData.value.repeat.startsWith("custom_")) {
      // 自定义重复，只传递 "custom"
      repeatType = "custom";
    } else {
      // 其他重复类型直接传递
      repeatType = formData.value.repeat;
    }

    // 构建 repeatExpr（如果有 customRepeatData）
    let repeatExpr: string | undefined;
    if (formData.value.customRepeatData) {
      repeatExpr = convertToCron(formData.value.customRepeatData);
    }

    // 构建 repeatEndTime（如果有 endsOn）
    let repeatEndTime: string | undefined;
    if (formData.value.endsOn) {
      // 将日期转换为完整的时间格式（使用当天的 23:59:59，ISO 8601 格式）
      repeatEndTime = `${formData.value.endsOn}T23:59:59`;
    }

    // 存储定时任务信息到 store（不包括 description，description 在 Welcome 组件中设置）
    schedulesStore.startTask = true; // 启用定时任务
    schedulesStore.setScheduleInfo({
      startTime: startTime,
      notifyType: formData.value.reminder,
      repeatType: repeatType,
      repeatExpr: repeatExpr,
      repeatEndTime: repeatEndTime,
    });

    // 提示成功并关闭弹窗
    ElMessage.success("定时任务信息已保存");
    // emit("created");
    dialogVisible.value = false;
    resetForm();
  } catch (error: any) {
    console.error("保存定时任务信息失败:", error);
    ElMessage.error(error?.message || "保存定时任务信息失败");
  }
};

// 重置表单
const resetForm = () => {
  formData.value = {
    // 开始时间
    startDate: "",
    startTime: "",
    // 提醒时间（默认邮箱）
    reminder: "email",
    // 重复选项（默认不重复）
    repeat: "noRepeat",
    // 结束日期（当有重复时）
    endsOn: undefined,
    // 自定义重复数据（当选择自定义时）
    customRepeatData: undefined,
  };
};
</script>

<style lang="scss">
// 定时任务弹窗样式
.scheduled-task-dialog {
  .scheduled-task-form {
    .form-item {
      margin-bottom: 12px;

      &.form-item-horizontal {
        display: flex;
        align-items: flex-start;
        gap: 16px;

        .form-label {
          min-width: 32px;
          text-align: left;
          padding-top: 8px;
          margin-bottom: 0;
          color: var(--color-text, #333);
          font-size: 14px;
          flex-shrink: 0;
        }

        .form-content {
          flex: 1;
          min-width: 0;
        }

        .ends-on-picker {
          flex: 1;
          min-width: 0;
        }
      }

      .form-label {
        display: block;
        margin-bottom: 8px;
        color: var(--color-text, #333);
        font-size: 14px;
        font-weight: 500;
      }

      .start-time-wrapper {
        display: flex;
        gap: 8px;
        align-items: center;
        width: 100%;

        .start-date-picker,
        .start-time-picker {
          flex: 1;
        }
      }

      .attachment-dropdown {
        width: 100%;

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

      .attachment-list {
        margin-top: 8px;
        display: flex;
        flex-direction: column;
        border-radius: 4px;
        border: 1px solid var(--color-border, #dcdfe6);

        .attachment-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 6px 12px;
          gap: 8px;

          .file-icon {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            object-fit: contain;
          }

          .file-name {
            flex: 1;
            font-size: 14px;
            color: var(--color-text, #333);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .delete-icon {
            margin-left: 8px;
            cursor: pointer;
            color: var(--color-text-secondary, #999);
            font-size: 16px;
            flex-shrink: 0;
            transition: color 0.2s;

            &:hover {
              color: #f56c6c;
            }
          }
        }
      }

      .description-textarea {
        width: 100%;
      }

      .form-select {
        width: 100%;
      }

      .repeat-wrapper {
        display: flex;
        gap: 8px;
        align-items: center;
        width: 100%;
        box-sizing: border-box;

        .repeat-select {
          flex: 1;
          min-width: 0;
        }

        .ends-on-wrapper {
          display: flex;
          align-items: center;
          gap: 8px;
          flex: 1;
          min-width: 0;

          .ends-on-label {
            font-size: 14px;
            color: var(--color-text, #333);
            white-space: nowrap;
            flex-shrink: 0;
          }

          .ends-on-picker {
            flex: 1;
            min-width: 0;
          }
        }
      }

      // 确保重复下拉框和结束于的总宽度与开始时间的两个选择器对齐
      .start-time-wrapper,
      .repeat-wrapper {
        box-sizing: border-box;
        width: 100%;

        // 确保 Element Plus 组件内部宽度一致
        :deep(.el-date-editor),
        :deep(.el-time-picker),
        :deep(.el-select) {
          width: 100%;
        }
      }

      // 确保所有输入框与时间选择器对齐
      .form-content {
        .attachment-upload,
        .description-textarea,
        .form-select {
          width: 100%;
        }

        // 确保 Element Plus 组件内部也占满宽度
        :deep(.el-input),
        :deep(.el-textarea),
        :deep(.el-select) {
          width: 100%;
        }

        :deep(.el-input__wrapper),
        :deep(.el-textarea__inner),
        :deep(.el-select__wrapper) {
          width: 100%;
        }
      }
    }
  }
}

// 深色主题下的定时任务弹窗样式
@media (prefers-color-scheme: dark) {
  .scheduled-task-dialog {
    .scheduled-task-form {
      .form-item {
        &.form-item-horizontal {
          .form-label {
            color: var(--color-text, #ccc);
          }

          .repeat-wrapper {
            .ends-on-label {
              color: var(--color-text, #ccc);
            }
          }
        }
      }
    }
  }
}

// 自定义重复弹窗样式
.custom-repeat-dialog {
  .custom-repeat-form {
    .from-title {
      color: var(--color-text, #333);
      font-size: 16px;
      padding-bottom: 18px;
      display: flex;
      justify-content: center;
    }
    .form-item {
      margin-bottom: 12px;

      &.form-item-horizontal {
        display: flex;
        align-items: flex-start;
        gap: 16px;

        .form-label {
          min-width: 42px;
          text-align: right;
          padding-top: 8px;
          margin-bottom: 0;
          color: var(--color-text, #333);
          font-size: 14px;
          flex-shrink: 0;
        }

        .form-content {
          flex: 1;
          min-width: 0;
        }
      }
    }

    .interval-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;

      .interval-input {
        width: 120px;
      }

      .interval-unit {
        font-size: 14px;
        color: var(--color-text, #333);
      }
    }

    .weekdays-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 2px;

      .weekday-btn {
        padding: 4px 6px;
        border: 1px solid var(--color-border, #dcdfe6);
        border-radius: 4px;
        background: var(--color-bg, #fff);
        color: var(--color-text, #333);
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
        min-width: 50px;

        &:hover {
          border-color: #1890ff;
          color: #1890ff;
        }

        &.active {
          background: #1890ff;
          border-color: #1890ff;
          color: #fff;
        }
      }
    }

    .month-days-wrapper {
      display: grid;
      grid-template-columns: repeat(7, 0fr);
      gap: 8px;

      .month-day-btn {
        padding: 4px;
        width: 30px;
        height: 30px;
        border: 1px solid var(--color-border, #dcdfe6);
        border-radius: 4px;
        background: var(--color-bg, #fff);
        color: var(--color-text, #333);
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;

        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          border-color: #1890ff;
          color: #1890ff;
        }

        &.active {
          background: #1890ff;
          border-color: #1890ff;
          color: #fff;
        }
      }
    }

    // 确保频率下拉框和结束于日期选择器宽度一致，都占满父容器宽度
    .form-select {
      width: 100% !important;

      :deep(.el-select__wrapper) {
        width: 100% !important;
      }
    }

    .ends-on-picker {
      width: 100% !important;
      max-width: 100% !important;

      // 覆盖 Element Plus 默认的 220px 宽度
      :deep(.el-date-editor) {
        width: 100% !important;
        max-width: 100% !important;
      }

      :deep(.el-input__wrapper) {
        width: 100% !important;
        max-width: 100% !important;
      }

      :deep(.el-input__inner) {
        width: 100% !important;
      }
    }
  }
}

// 深色主题下的自定义重复弹窗样式
@media (prefers-color-scheme: dark) {
  .custom-repeat-dialog {
    .custom-repeat-form {
      .form-item {
        &.form-item-horizontal {
          .form-label {
            color: var(--color-text, #ccc);
          }
        }
      }

      .interval-wrapper {
        .interval-unit {
          color: var(--color-text, #ccc);
        }
      }

      .weekdays-wrapper {
        .weekday-btn {
          background: var(--color-bg, #1a1a1a);
          border-color: var(--color-border, #444);
          color: var(--color-text, #ccc);

          &:hover {
            border-color: #1890ff;
            color: #1890ff;
          }

          &.active {
            background: #1890ff;
            border-color: #1890ff;
            color: #fff;
          }
        }
      }

      .month-days-wrapper {
        .month-day-btn {
          background: var(--color-bg, #1a1a1a);
          border-color: var(--color-border, #444);
          color: var(--color-text, #ccc);

          &:hover {
            border-color: #1890ff;
            color: #1890ff;
          }

          &.active {
            background: #1890ff;
            border-color: #1890ff;
            color: #fff;
          }
        }
      }
    }
  }
}

// 知识库选择弹窗样式
.knowledge-base-dialog {
  .knowledge-base-content {
    padding: 0;
    min-height: 500px;
  }

  .knowledge-base-layout {
    display: flex;
    height: 500px;
    border-bottom: 1px solid var(--color-border, #e4e7ed);
    overflow: hidden;
  }

  .knowledge-base-left {
    width: 200px;
    border-right: 1px solid var(--color-border, #e4e7ed);
    background: var(--color-bg, #fff);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .knowledge-base-tree-container {
    flex: 1;
    overflow-y: auto;
    padding-right: 12px;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--color-border);
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }

  .knowledge-base-tree {
    background: transparent !important;
    color: var(--color-text) !important;

    :deep(.el-tree-node__content) {
      height: auto !important;
      min-height: 38px;
      max-height: 40px;
      padding: 0 8px;
      background: transparent !important;
      color: var(--color-text) !important;

      &:hover {
        background: var(--tab-selected) !important;
      }
    }

    :deep(.el-tree-node.is-current > .el-tree-node__content) {
      background: var(--tab-selected) !important;
      color: var(--color-text) !important;
      position: relative !important;

      .knowledge-base-folder-name {
        color: var(--color-text) !important;
        font-weight: 600 !important;
      }

      .knowledge-base-folder-icon {
        color: #1e6fff !important;
        opacity: 1 !important;
      }

      &:hover {
        background: var(--tab-selected) !important;
        transform: translateY(-1px) !important;
      }
    }

    :deep(.el-tree-node__expand-icon) {
      font-size: 12px;
    }

    :deep(.el-tree-node) {
      background: transparent !important;
    }

    :deep(.el-tree-node__label) {
      color: var(--color-text) !important;
    }
  }

  .knowledge-base-tree-node {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .knowledge-base-folder-icon {
    color: #1e6fff;
    font-size: 18px !important;
    margin-right: 6px !important;
    opacity: 0.9;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
  }

  .knowledge-base-tree-node:hover .knowledge-base-folder-icon {
    opacity: 1;
    transform: scale(1.05);
  }

  .knowledge-base-folder-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }

  .knowledge-base-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--color-bg, #fff);
    overflow: hidden;
  }

  .knowledge-base-file-list-container {
    flex: 1;
    overflow: auto;
    padding: 0 12px 12px 12px;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--color-border);
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }

  .knowledge-base-file-table {
    :deep(.el-table__header-wrapper),
    :deep(.el-table__body-wrapper) {
      background: var(--color-bg);
    }

    :deep(th) {
      background: var(--color-bg);
      color: var(--color-text);
      font-weight: 600;
    }

    :deep(td) {
      background: var(--color-bg);
      color: var(--color-text);
    }

    :deep(tr:hover td) {
      background: var(--color-hover);
    }

    :deep(.el-table__body tr.current-row > td) {
      background: var(--color-primary-light);
    }
  }

  .knowledge-base-file-info {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .knowledge-base-file-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .knowledge-base-file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .knowledge-base-file-type-badge {
    display: inline-block;
    color: var(--color-primary, #409eff);
    font-size: 12px;
    font-weight: 500;
  }
}
</style>