<script lang="ts" setup>
// Vue 核心 API
import { onMounted, onUnmounted, ref } from 'vue';

// 项目组件
import { Page } from '@vben/common-ui';

// Element Plus 组件
import {
  ElButton,
  ElCard,
  ElDrawer,
  ElInput,
  ElInputNumber,
  ElLoading,
  ElMessage,
  ElMessageBox,
  ElTabs,
  ElTabPane
} from 'element-plus';




export type QuestionType = 
  | 'single_choice'    // 单选题
  | 'multiple_choice'  // 多选题
  | 'true_false'       // 判断题
  | 'fill_blank'       // 填空题
  | 'short_answer';    // 简答题

export interface Category {
  id: number;
  name: string;
  updateTime: string;
  count: number;
}

export interface Question {
  id: number;
  type: QuestionType;
  content: string;
  options?: string[];
  answer: string;
  explanation?: string;
  score?: number;
}

// 题目类型配置
const QUESTION_TYPES = [
  { value: 'single_choice' as QuestionType, label: '单项选择题' },
  { value: 'multiple_choice' as QuestionType, label: '多项选择题' },
  { value: 'true_false' as QuestionType, label: '判断题' },
  { value: 'fill_blank' as QuestionType, label: '填空题' },
  { value: 'short_answer' as QuestionType, label: '简答题' },
];

// 题目类型标签映射
const QUESTION_TYPE_LABELS: Record<QuestionType, string> = {
  single_choice: '(单项选择题)',
  multiple_choice: '(多项选择题)',
  true_false: '(判断题)',
  fill_blank: '(填空题)',
  short_answer: '(简答题)',
};

// ---------------------------
// 状态管理
// ---------------------------

// 题库分类数据
const categories = ref<Category[]>([
  { id: 1, name: '人员管理题库', updateTime: '2025-11-11', count: 199 },
  { id: 2, name: '运营管理题库', updateTime: '2025-11-11', count: 199 },
  { id: 3, name: '消防知识题库', updateTime: '2025-11-11', count: 199 },
  { id: 4, name: '日常操作题库', updateTime: '2025-11-11', count: 199 },
  { id: 5, name: '安全管理题库', updateTime: '2025-11-11', count: 199 },
  { id: 6, name: '质量管理题库', updateTime: '2025-11-11', count: 199 },
  { id: 7, name: '设备维护题库', updateTime: '2025-11-11', count: 199 },
  { id: 8, name: '环境管理题库', updateTime: '2025-11-11', count: 199 },
]);

// 题目数据
const questions = ref<Question[]>([
  {
    id: 1,
    type: 'single_choice',
    content: '1.题目题目题目题目题目题目题目题目题目题目。',
    options: ['选项A', '选项B', '选项C', '选项D'],
    answer: '选项A',
  },
  {
    id: 2,
    type: 'single_choice',
    content: '2.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
    options: ['选项A', '选项B', '选项C', '选项D'],
    answer: '选项A',
  },
  {
    id: 3,
    type: 'multiple_choice',
    content: '3.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
    options: ['选项A', '选项B', '选项C', '选项D'],
    answer: '选项A、选项B、选项C',
  },
  {
    id: 4,
    type: 'multiple_choice',
    content: '4.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
    options: ['选项A', '选项B', '选项C', '选项D'],
    answer: '选项A、选项B、选项C',
  },
  {
    id: 5,
    type: 'fill_blank',
    content: '5.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
    answer: '答案答案答案答案答案答案答案答案答案 ______ 答案答案答案答案答案答案答案答案答案答案答案答案。',
  },
  {
    id: 6,
    type: 'fill_blank',
    content: '6.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
    answer: '答案答案答案答案答案答案答案 ______、______、______ 答案答案答案答案答案答案答案。',
  },
  {
    id: 7,
    type: 'short_answer',
    content: '7.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
    answer: '答案答案答案答案答案...',
  },
]);

// 模态框状态
const isModalVisible = ref(false);
const modalTitle = ref('');
const currentQuestion = ref<Question | null>(null);
const currentCategory = ref<Category | null>(null);

// 题目类型表单
const newCategoryName = ref('');
const categoryError = ref('');

// 题目添加/编辑表单
const newQuestions = ref<Question[]>([]);
const activeQuestionIndex = ref(0);
const questionErrors = ref<Record<number, string>>({});

// 选中状态
const selectedCategoryId = ref(1);

// 滚动加载
const categoryListRef = ref<HTMLElement | null>(null);
const isLoadingCategories = ref(false);
const hasMoreCategories = ref(true);

// 删除确认对话框状态
const categoryToDelete = ref<number | null>(null);

// ---------------------------
// 工具函数
// ---------------------------

/**
 * 获取题目类型标签
 */
const getQuestionTypeLabel = (type: QuestionType): string => {
  return QUESTION_TYPE_LABELS[type] || '';
};

/**
 * 替换填空题的空白处为输入框
 */
const renderBlankInputs = (content: string): string => {
  return content.replaceAll('______', '<input type="text" class="blank-input" />');
};

/**
 * 创建新题目
 */
const createNewQuestion = (type: QuestionType): Question => {
  return {
    id: 0, // 临时ID，保存时会生成
    type,
    content: '',
    options: type === 'true_false' 
      ? ['正确', '错误'] 
      : (type === 'single_choice' || type === 'multiple_choice') 
        ? [''] 
        : undefined,
    answer: '',
    explanation: '',
    score: 0,
  };
};

// ---------------------------
// 表单验证
// ---------------------------

/**
 * 验证题目类型名称
 */
const validateCategoryName = (name: string): boolean => {
  if (!name.trim()) {
    categoryError.value = '请输入题目类型名称';
    return false;
  }
  if (name.length > 50) {
    categoryError.value = '题目类型名称不能超过50个字';
    return false;
  }
  categoryError.value = '';
  return true;
};

/**
 * 验证单个题目
 */
const validateQuestion = (question: Question, index?: number): boolean => {
  let error = '';
  
  if (!question.content.trim()) {
    error = '请输入题目内容';
  } else if (
    (question.type === 'single_choice' || 
     question.type === 'multiple_choice' || 
     question.type === 'true_false') &&
    (!question.options || question.options.length < 2)
  ) {
    error = '请至少添加两个选项';
  } else if (
    question.options && question.options.some(option => !option.trim())
  ) {
    error = '选项内容不能为空';
  } else if (!question.answer.trim()) {
    error = '请输入答案';
  }
  
  if (index !== undefined) {
    questionErrors.value[index] = error;
  }
  
  return !error;
};

// ---------------------------
// 事件处理
// ---------------------------

/**
 * 选择题库分类
 */
const selectCategory = (id: number) => {
  selectedCategoryId.value = id;
};

/**
 * 添加选项
 */
const addOption = (question: Question) => {
  if (question.options) {
    question.options.push('');
  }
};

/**
 * 删除选项
 */
const removeOption = (question: Question, index: number) => {
  if (question.options && question.options.length > 1) {
    question.options.splice(index, 1);
  }
};

// ---------------------------
// 模态框操作
// ---------------------------

/**
 * 打开新增题目类型模态框
 */
const openAddCategoryModal = () => {
  modalTitle.value = '添加题目类型';
  currentCategory.value = null;
  newCategoryName.value = '';
  categoryError.value = '';
  isModalVisible.value = true;
};

/**
 * 打开编辑题目类型模态框
 */
const openEditCategoryModal = (category: Category) => {
  modalTitle.value = '修改题目类型';
  currentCategory.value = { ...category };
  newCategoryName.value = category.name;
  categoryError.value = '';
  isModalVisible.value = true;
};

/**
 * 打开新增题目模态框
 */
const openAddQuestionModal = () => {
  modalTitle.value = '添加题目';
  newQuestions.value = [createNewQuestion('single_choice')];
  activeQuestionIndex.value = 0;
  questionErrors.value = {};
  isModalVisible.value = true;
};

/**
 * 打开编辑题目模态框
 */
const openEditQuestionModal = (question: Question) => {
  modalTitle.value = '编辑题目';
  currentQuestion.value = { ...question };
  
  // 确保判断题有选项
  if (question.type === 'true_false' && !currentQuestion.value.options) {
    currentQuestion.value.options = ['正确', '错误'];
  }
  
  isModalVisible.value = true;
};

/**
 * 关闭模态框
 */
const closeModal = () => {
  isModalVisible.value = false;
  currentQuestion.value = null;
  currentCategory.value = null;
  newQuestions.value = [];
  activeQuestionIndex.value = 0;
  categoryError.value = '';
  questionErrors.value = {};
};

// 处理题目类型变化
const handleQuestionTypeChange = (type: string) => {
  if (!currentQuestion.value) return;
  
  currentQuestion.value.type = type as QuestionType;
  
  if (
    (type === 'single_choice' ||
      type === 'multiple_choice' ||
      type === 'true_false') &&
    !currentQuestion.value.options
  ) {
    currentQuestion.value.options =
      type === 'true_false' ? ['正确', '错误'] : [''];
  } else if (
    type !== 'single_choice' &&
    type !== 'multiple_choice' &&
    type !== 'true_false'
  ) {
    currentQuestion.value.options = undefined;
  }
};

// ---------------------------
// 数据操作
// ---------------------------

/**
 * 保存题目类型
 */
const saveCategory = () => {
  if (!validateCategoryName(newCategoryName.value)) {
    return;
  }
  
  const now = new Date().toISOString().split('T')[0];
  
  if (currentCategory.value) {
    // 修改现有分类
    const index = categories.value.findIndex(cat => cat.id === currentCategory.value!.id);
    if (index !== -1) {
      categories.value[index] = {
        ...categories.value[index],
        name: newCategoryName.value,
        updateTime: now,
      };
    }
  } else {
    // 添加新分类
    const newId = Math.max(...categories.value.map(cat => cat.id), 0) + 1;
    categories.value.push({
      id: newId,
      name: newCategoryName.value,
      updateTime: now,
      count: 0,
    });
  }
  
  closeModal();
};

/**
 * 删除题目类型
 */
const deleteCategory = (id: number) => {
  ElMessageBox.confirm('确定要删除这个题目类型吗？', '确认删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      categories.value = categories.value.filter(category => category.id !== id);
      
      // 如果删除的是当前选中的分类，切换到第一个分类
      if (selectedCategoryId.value === id && categories.value.length > 0) {
        selectedCategoryId.value = categories.value[0].id;
      }
    })
    .catch(() => {
      // 用户取消删除
    });
};

/**
 * 保存所有新添加的题目
 */
const saveAllQuestions = () => {
  // 验证所有题目
  let isValid = true;
  newQuestions.value.forEach((question, index) => {
    if (!validateQuestion(question, index)) {
      isValid = false;
    }
  });
  
  if (!isValid) {
    return;
  }
  
  // 为每个新题目生成唯一ID
  const maxId = Math.max(...questions.value.map(q => q.id), 0);
  newQuestions.value.forEach((q, index) => {
    q.id = maxId + index + 1;
    questions.value.push(q);
  });
  
  closeModal();
};

/**
 * 保存单个编辑的题目
 */
const saveSingleQuestion = () => {
  if (!currentQuestion.value || !validateQuestion(currentQuestion.value)) {
    return;
  }
  
  const index = questions.value.findIndex(q => q.id === currentQuestion.value!.id);
  if (index !== -1) {
    questions.value[index] = { ...currentQuestion.value };
  }
  
  closeModal();
};

/**
 * 添加新题目
 */
const addNewQuestion = (type: QuestionType) => {
  newQuestions.value.push(createNewQuestion(type));
  activeQuestionIndex.value = newQuestions.value.length - 1;
};

/**
 * 切换当前编辑的题目
 */
const switchActiveQuestion = (index: number) => {
  activeQuestionIndex.value = index;
};

// ---------------------------
// 滚动加载
// ---------------------------

/**
 * 防抖函数
 */
const debounce = <T extends (...args: any[]) => any>(
  func: T,
  wait: number
): ((...args: Parameters<T>) => void) => {
  let timeout: NodeJS.Timeout | null = null;
  return (...args: Parameters<T>) => {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
};

/**
 * 滚动事件处理
 */
const handleCategoryScroll = debounce((e: Event) => {
  const target = e.target as HTMLElement;
  const { scrollTop, scrollHeight, clientHeight } = target;
  
  // 当滚动到底部30px内时触发加载，增加触发距离提高用户体验
  if (scrollTop + clientHeight >= scrollHeight - 30 && 
      !isLoadingCategories.value && 
      hasMoreCategories.value) {
    loadMoreCategories();
  }
}, 100);

/**
 * 加载更多分类
 */
const loadMoreCategories = async () => {
  if (isLoadingCategories.value || !hasMoreCategories.value) return;
  
  isLoadingCategories.value = true;
  
  // 模拟异步加载
  await new Promise(resolve => setTimeout(resolve, 1000));
  
  // 添加新的模拟数据
  const newCategories = Array.from({ length: 4 }, (_, index) => ({
    id: categories.value.length + index + 1,
    name: `新题库${categories.value.length + index + 1}`,
    updateTime: '2025-11-11',
    count: 199,
  }));
  
  categories.value = [...categories.value, ...newCategories];
  
  // 模拟没有更多数据
  if (categories.value.length >= 20) {
    hasMoreCategories.value = false;
  }
  
  isLoadingCategories.value = false;
};

// ---------------------------
// 生命周期
// ---------------------------

onMounted(() => {
  if (categoryListRef.value) {
    categoryListRef.value.addEventListener('scroll', handleCategoryScroll);
  }
});

onUnmounted(() => {
  if (categoryListRef.value) {
    categoryListRef.value.removeEventListener('scroll', handleCategoryScroll);
  }
});
</script>

<template>
  <Page>
    <div class="question-bank-container">
      <!-- 左侧题库分类 -->
      <div class="left-panel">
        <div class="panel-header">
          <h2>题库分类</h2>
          <button class="add-btn" @click="openAddCategoryModal">
            添加题目类型
          </button>
        </div>
        <div class="category-list" ref="categoryListRef">
          <!-- @ts-ignore -->
          <ElCard
              v-for="category in categories"
              :key="category.id"
              class="category-card"
              :class="{ active: selectedCategoryId === category.id }"
              @click="selectCategory(category.id)"
              shadow="hover"
            >
            <div class="category-name">{{ category.name }}</div>
            <div class="category-info">
              <span>更新时间: {{ category.updateTime }}</span>
              <span>题库数量: {{ category.count }}</span>
            </div>
            <div class="category-actions">
              <ElButton
                class="edit-category-btn"
                @click.stop="openEditCategoryModal(category)"
                size="small"
              >
                修改
              </ElButton>
              <ElButton
                class="delete-category-btn"
                @click.stop="deleteCategory(category.id)"
                size="small"
                type="danger"
              >
                删除
              </ElButton>
            </div>
          </ElCard>

          <!-- 加载更多提示 -->
          <div v-if="isLoadingCategories" class="loading">加载中...</div>
          <div v-else-if="!hasMoreCategories" class="no-more">没有更多数据了</div>
        </div>
      </div>

      <!-- 右侧题目列表 -->
      <div class="right-panel">
        <div class="panel-header">
          <h2>题目列表</h2>
          <button class="add-btn" @click="openAddQuestionModal">添加题目</button>
        </div>
        <div class="question-list">
          <ElCard
            v-for="question in questions"
            :key="question.id"
            class="question-item"
            shadow="hover"
          >
            <!-- 题目左侧内容 -->
            <div class="question-content">
              <div
                class="question-text"
                :data-type="getQuestionTypeLabel(question.type)"
              >
                {{ question.content }}
              </div>

              <!-- 单选题 -->
              <div v-if="question.type === 'single_choice'" class="options">
                <div
                  v-for="(option, index) in question.options"
                  :key="index"
                  class="option-item"
                >
                  <input
                    type="radio"
                    :id="`q${question.id}_option${index}`"
                    :name="`q${question.id}`"
                  />
                  <label :for="`q${question.id}_option${index}`">{{
                    option
                  }}</label>
                </div>
              </div>

              <!-- 多选题 -->
              <div
                v-else-if="question.type === 'multiple_choice'"
                class="options"
              >
                <div
                  v-for="(option, index) in question.options"
                  :key="index"
                  class="option-item"
                >
                  <input
                    type="checkbox"
                    :id="`q${question.id}_option${index}`"
                  />
                  <label :for="`q${question.id}_option${index}`">{{
                    option
                  }}</label>
                </div>
              </div>

              <!-- 填空题 -->
              <div
                v-else-if="question.type === 'fill_blank'"
                class="fill-blank"
              >
                <div v-html="renderBlankInputs(question.content)"></div>
              </div>

              <!-- 简答题 -->
              <div
                v-else-if="question.type === 'short_answer'"
                class="short-answer"
              >
                <textarea
                  class="answer-input"
                  rows="4"
                  placeholder="请输入答案"
                ></textarea>
              </div>
            </div>

            <!-- 题目右侧内容 -->
            <div class="question-right">
              <div class="answer">
                <span class="answer-label">答案：</span>
                <span class="answer-content">{{ question.answer }}</span>
              </div>

              <div class="question-actions">
                <ElButton class="edit-btn" @click="openEditQuestionModal(question)" size="small">
                  编辑
                </ElButton>
                <ElButton class="quote-btn" size="small" type="primary">引用</ElButton>
                <ElButton class="delete-btn" size="small" type="danger">删除</ElButton>
              </div>
            </div>
          </ElCard>
        </div>
      </div>
    </div>

    <!-- 题目编辑抽屉 -->
     <ElDrawer
        v-model="isModalVisible"
        :title="modalTitle"
        direction="rtl"
        size="60%"
        destroy-on-close>
       <div class="drawer-content">
        <!-- 题目类型表单 -->
        <div v-if="modalTitle.includes('题目类型')" class="category-form">
          <div class="form-item">
            <label class="form-label">题目类型名称</label>
            <ElInput
              v-model="newCategoryName"
              placeholder="请输入题目类型名称（最多50个字）"
              maxlength="50"
              show-word-limit
              @input="validateCategoryName(newCategoryName)"
            />
            <div v-if="categoryError" class="error-message">{{ categoryError }}</div>
            <div class="char-count">{{ newCategoryName.length }}/50</div>
          </div>
        </div>
        <!-- 题目编辑表单 -->
        <div
          v-else-if="modalTitle === '编辑题目' && currentQuestion"
          class="question-form"
        >
          <!-- 题目类型 -->
          <div class="form-item">
            <label class="form-label">题目类型</label>
            <ElTabs v-model="currentQuestion.type" @tab-change="handleQuestionTypeChange">
              <ElTabPane
                v-for="type in QUESTION_TYPES"
                :key="type.value"
                :label="type.label"
                :name="type.value"
              >
              </ElTabPane>
            </ElTabs>
          </div>

          <!-- 题目内容 -->
          <div class="form-item">
            <label class="form-label">题目内容</label>
            <ElInput
              v-model="currentQuestion.content"
              placeholder="请输入题目内容"
              type="textarea"
              rows="4"
            ></ElInput>
          </div>

          <!-- 选项 -->
          <div v-if="currentQuestion.options" class="form-item">
            <label class="form-label">选项</label>
            <div class="options-list">
              <div
                v-for="(option, index) in currentQuestion.options"
                :key="index"
                class="option-item"
              >
                <ElInput
                  v-model="currentQuestion.options![index]"
                  placeholder="请输入选项内容"
                  size="small"
                />
                <ElButton type="danger" size="small" @click="removeOption(currentQuestion, index)" :disabled="currentQuestion.options.length <= 1">
                  删除
                </ElButton>
              </div>
              <ElButton type="primary" size="small" @click="addOption(currentQuestion)">
                + 添加选项
              </ElButton>
            </div>
          </div>

          <!-- 答案 -->
          <div class="form-item">
            <label class="form-label">答案</label>
            <ElInput
              v-model="currentQuestion.answer"
              placeholder="请输入答案"
              type="textarea"
              rows="3"
            ></ElInput>
          </div>
          
          <!-- 解析 -->
          <div class="form-item">
            <label class="form-label">解析</label>
            <ElInput
              v-model="currentQuestion.explanation"
              placeholder="请输入解析（选填）"
              type="textarea"
              rows="3"
            ></ElInput>
          </div>
          
          <!-- 分数 -->
          <div class="form-item">
            <label class="form-label">分数</label>
            <ElInputNumber
              v-model="currentQuestion.score"
              placeholder="请输入分数"
              :min="0"
              step="1"
              style="width: 100%"
            />
          </div>
        </div>

        <!-- 添加题目表单 -->
        <div v-else-if="modalTitle === '添加题目'" class="question-form">
          <!-- 题目类型选择 -->
          <div class="form-item">
            <label class="form-label">选择题目类型</label>
            <div class="type-tabs">
              <ElButton type="primary" size="small" plain v-for="type in QUESTION_TYPES" :key="type.value" @click="addNewQuestion(type.value as QuestionType)">
                  {{ type.label }}
                </ElButton>
            </div>
          </div>

          <!-- 所有题目编辑区域 -->
          <div v-if="newQuestions.length > 0" class="all-questions">
            <div
              v-for="(question, qIndex) in newQuestions"
              :key="qIndex"
              class="question-item-container"
            >
              <div class="question-header">
                <h4>
                  题目{{ qIndex + 1 }} {{ getQuestionTypeLabel(question.type) }}
                </h4>
                <ElButton type="danger" size="small" @click="newQuestions.splice(qIndex, 1)">
                  删除题目
                </ElButton>
              </div>

              <div class="form-item">
                <label class="form-label">题目内容</label>
                <ElInput
                  v-model="question.content"
                  placeholder="请输入题目内容"
                  type="textarea"
                  rows="3"
                ></ElInput>
              </div>

              <!-- 选项 -->
              <div v-if="question.options" class="form-item">
                <label class="form-label">选项</label>
                <div class="options-list">
                  <div
                    v-for="(option, optIndex) in question.options"
                    :key="optIndex"
                    class="option-item"
                  >
                    <ElInput
                  v-model="question.options![optIndex]"
                  placeholder="请输入选项内容"
                  size="small"
                />
                <ElButton type="danger" size="small" @click="removeOption(question, optIndex)" :disabled="question.options.length <= 1">
                  删除
                </ElButton>
                  </div>
                  <ElButton type="primary" size="small" @click="addOption(question)">
                + 添加选项
              </ElButton>
                </div>
              </div>

              <!-- 答案 -->
              <div class="form-item">
                <label class="form-label">答案</label>
                <ElInput
                  v-model="question.answer"
                  placeholder="请输入答案"
                  type="textarea"
                  rows="2"
                ></ElInput>
              </div>
              
              <!-- 解析 -->
              <div class="form-item">
                <label class="form-label">解析</label>
                <ElInput
                  v-model="question.explanation"
                  placeholder="请输入解析（选填）"
                  type="textarea"
                  rows="3"
                ></ElInput>
              </div>
              
              <!-- 分数 -->
              <div class="form-item">
                <label class="form-label">分数</label>
                <ElInputNumber
                  v-model="question.score"
                  placeholder="请输入分数"
                  :min="0"
                  step="1"
                  style="width: 100%"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="drawer-footer">
          <ElButton @click="closeModal">取消</ElButton>
          <ElButton
            type="primary"
            @click="
              modalTitle.includes('题目类型')
                ? saveCategory()
                : modalTitle.includes('编辑')
                  ? saveSingleQuestion()
                  : saveAllQuestions()
            "
          >
            确定
          </ElButton>
        </div>
      </template>
     </ElDrawer>
    

  </Page>
</template>

<style lang="scss" scoped>
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.question-bank-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  height: calc(100vh - 120px);
  padding: 0;
  overflow: hidden;
}

.left-panel,
.right-panel {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.panel-header {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.panel-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 保持添加按钮的边距 */
.add-btn {
  margin-left: auto;
}

.category-list,
.question-list {
  height: calc(100vh - 160px);
  padding: 16px;
  overflow-y: auto;
}

.category-card {
  position: relative;
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  background-color: #f5f5f5;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: all 0.3s;

  &:hover {
    background-color: #e6f7ff;
    box-shadow: 0 2px 8px rgb(24 144 255 / 15%);
  }

  &.active {
    background-color: #e6f7ff;
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgb(24 144 255 / 15%);
  }
}

.category-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: none;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}

.category-card:hover .category-actions {
  display: flex;
  opacity: 1;
}

.edit-category-btn,
.delete-category-btn {
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.edit-category-btn {
  color: #1890ff;
  background-color: rgb(24 144 255 / 10%);

  &:hover {
    background-color: rgb(24 144 255 / 20%);
  }
}

.delete-category-btn {
  color: #ff4d4f;
  background-color: rgb(255 77 79 / 10%);

  &:hover {
    background-color: rgb(255 77 79 / 20%);
  }
}

.category-name {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.category-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #666;
}

.loading,
.no-more {
  padding: 12px;
  font-size: 14px;
  color: #999;
  text-align: center;
}

/* 题目列表样式 */
.question-item {
  display: flex;
  margin-bottom: 16px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  transition: box-shadow 0.3s;

  &:hover {
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  }
}

.question-content {
  flex: 1;
  padding: 16px;
  border-right: 1px solid #e8e8e8;
}

.question-text {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;

  /* 添加题型标签 */
  &::after {
    padding: 2px 8px;
    margin-left: 8px;
    font-size: 12px;
    color: #1890ff;
    content: attr(data-type);
    background-color: #e8f4ff;
    border-radius: 4px;
  }
}

.options {
  display: flex;
  gap: 50px;
}

.option-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.fill-blank {
  margin-top: 8px;

  .blank-input {
    width: 100px;
    padding: 4px 8px;
    margin: 0 4px;
    font-size: 14px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
  }
}

.short-answer {
  margin-top: 8px;

  .answer-input {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    resize: vertical;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
  }
}

.question-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 300px;
  padding: 16px;
  background-color: #fafafa;
}

.answer {
  margin-bottom: 16px;

  .answer-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
  }

  .answer-content {
    font-size: 14px;
    color: #666;
    word-break: break-word;
  }
}

.question-actions {
  display: flex;
  gap: 8px;
}

.edit-btn,
.quote-btn,
.delete-btn {
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

/* 题目操作按钮间距 */
.question-actions {
  display: flex;
  gap: 8px;
}

/* 滚动条样式优化 */
.category-list::-webkit-scrollbar,
.question-list::-webkit-scrollbar,
.modal::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.category-list::-webkit-scrollbar-track,
.question-list::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.category-list::-webkit-scrollbar-thumb,
.question-list::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.category-list::-webkit-scrollbar-thumb:hover,
.question-list::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 移除不再使用的抽屉样式 */


/* 题目类型表单样式 */
.category-form {
  padding: 20px 0;
}

.form-item {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  transition: all 0.3s;

  &:focus {
    border-color: #1890ff;
    outline: none;
    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
  }
}

.form-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  font-size: 14px;
  resize: vertical;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  transition: all 0.3s;

  &:focus {
    border-color: #1890ff;
    outline: none;
    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
  }
}

.error-message {
  margin-top: 8px;
  font-size: 12px;
  color: #ff4d4f;
}

.error-message-popup {
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #ff4d4f;
  background-color: rgb(255 77 79 / 10%);
  border-radius: 4px;
}

.char-count {
  margin-top: 8px;
  font-size: 12px;
  color: #999;
  text-align: right;
}

/* 删除确认对话框样式 */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / 50%);
}

.modal-content {
  width: 400px;
  max-width: 90%;
  padding: 24px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

.modal-content h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 18px;
  color: #333;
}

.modal-content p {
  margin-bottom: 24px;
  color: #666;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.modal-actions .cancel-btn {
  padding: 8px 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.modal-actions .cancel-btn:hover {
  background-color: #e8e8e8;
}

.modal-actions .confirm-btn {
  padding: 8px 16px;
  font-size: 14px;
  color: white;
  cursor: pointer;
  background-color: #ff4d4f;
  border: 1px solid #ff4d4f;
  border-radius: 4px;
}

.modal-actions .confirm-btn:hover {
  background-color: #ff7875;
}

/* 题目类型标签样式 */
.type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.type-tab {
  padding: 8px 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  transition: all 0.3s;

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

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

/* 所有题目样式 */
.all-questions {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.question-item-container {
  padding: 16px;
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.question-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.delete-question-btn {
  padding: 6px 12px;
  font-size: 14px;
  color: #ff4d4f;
  cursor: pointer;
  background-color: white;
  border: 1px solid #ff4d4f;
  border-radius: 4px;
  transition: all 0.3s;
}

.delete-question-btn:hover {
  background-color: #fff2f0;
}

/* 选项列表样式 */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.options-list .option-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.remove-option-btn {
  padding: 6px 12px;
  font-size: 14px;
  color: #ff4d4f;
  cursor: pointer;
  background-color: #fff1f0;
  border: 1px solid #ffccc7;
  border-radius: 4px;
  transition: all 0.3s;

  &:hover:not(:disabled) {
    background-color: #ffccc7;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

.add-option-btn {
  padding: 6px 0;
  font-size: 14px;
  color: #1890ff;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 4px;
  transition: all 0.3s;

  &:hover {
    color: #40a9ff;
    text-decoration: underline;
  }
}

.drawer-content {
  padding: 20px;
}

.question-form {
  width: 100%;
}

.drawer-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 20px;
  background-color: #fafafa;
  border-top: 1px solid #e8e8e8;
}

.cancel-btn,
.confirm-btn {
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  transition: all 0.3s;
}

.cancel-btn {
  color: #666;
  background-color: white;

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

.confirm-btn {
  color: white;
  background-color: #1890ff;
  border-color: #1890ff;

  &:hover {
    background-color: #40a9ff;
  }
}

/* 动画效果 */
</style>
