<script setup>
// 首先导入必要的依赖
import { Page } from '@vben/common-ui';
import { ref, onMounted, onUnmounted } from 'vue';

// 定义并初始化题库分类数据
const categories = ref([
  { 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([
  {
    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 currentPage = ref(1);
const pageSize = ref(7);
const total = ref(50);

// 填空题替换方法
const replaceBlanks = (content) => {
  return content.replace(/______/g, '<input type="text" class="blank-input" />');
};

// 分页方法
const handlePageChange = (page) => {
  currentPage.value = page;
  // 这里可以添加加载数据的逻辑
};

// 弹窗相关
const isModalVisible = ref(false);
const modalTitle = ref('');
const currentQuestion = ref(null);

// 选中的题库分类
const selectedCategory = ref(1);

// 选择题库分类
const selectCategory = (id) => {
  selectedCategory.value = id;
};

// 获取题型标签
const getQuestionTypeLabel = (type) => {
  const typeMap = {
    'single_choice': '(单项选择题)',
    'multiple_choice': '(多项选择题)',
    'fill_blank': '(填空题)',
    'short_answer': '(简答题)'
  };
  return typeMap[type] || '';
};

// 打开新增题目弹窗
const openAddModal = () => {
  modalTitle.value = '添加题目';
  currentQuestion.value = null;
  isModalVisible.value = true;
};

// 打开编辑题目弹窗
const openEditModal = (question: any) => {
  modalTitle.value = '编辑题目';
  currentQuestion.value = { ...question };
  isModalVisible.value = true;
};

// 关闭弹窗
const closeModal = () => {
  isModalVisible.value = false;
  currentQuestion.value = null;
};

// 滚动加载相关
const categoryListRef = ref<HTMLElement | null>(null);
const isLoading = ref(false);
const hasMore = ref(true);

// 滚动事件处理
const handleScroll = (e: Event) => {
  const target = e.target as HTMLElement;
  const { scrollTop, scrollHeight, clientHeight } = target;
  
  // 当滚动到底部20px内时触发加载
  if (scrollTop + clientHeight >= scrollHeight - 20 && !isLoading.value && hasMore.value) {
    loadMoreCategories();
  }
};

// 加载更多分类
const loadMoreCategories = async () => {
  if (isLoading.value || !hasMore.value) return;
  
  isLoading.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) {
    hasMore.value = false;
  }
  
  isLoading.value = false;
};

// 组件挂载时添加滚动监听
onMounted(() => {
  if (categoryListRef.value) {
    categoryListRef.value.addEventListener('scroll', handleScroll);
  }
});

// 组件卸载时移除滚动监听
onUnmounted(() => {
  if (categoryListRef.value) {
    categoryListRef.value.removeEventListener('scroll', handleScroll);
  }
});

// 显式暴露变量给模板
defineExpose({
  categories,
  selectedCategory,
  selectCategory
});

</script>

<template>
  <Page>
    <div class="question-bank-container">
      <!-- 左侧题库分类 -->
      <div class="left-panel">
        <div class="panel-header">
          <h2>题库分类</h2>
          <button class="add-btn">添加题目类型</button>
        </div>
        <div class="category-list" ref="categoryListRef">
          <div 
            v-for="category in categories"
            :key="category.id" 
            class="category-card"
            :class="{ active: selectedCategory === category.id }"
            @click="selectCategory(category.id)"
          >
            <div class="category-name">{{ category.name }}</div>
            <div class="category-info">
              <span>更新时间: {{ category.updateTime }}</span>
              <span>题库数量: {{ category.count }}</span>
            </div>
          </div>
          
          <!-- 加载更多提示 -->
          <div v-if="isLoading" class="loading">加载中...</div>
          <div v-else-if="!hasMore" class="no-more">没有更多数据了</div>
        </div>
      </div>
      
      <!-- 右侧题目列表 -->
      <div class="right-panel">
        <div class="panel-header">
          <h2>题目列表</h2>
          <button class="add-btn">添加题目</button>
        </div>
        <div class="question-list">
          <div 
            v-for="question in questions" 
            :key="question.id" 
            class="question-item"
          >
            <!-- 题目左侧内容 -->
            <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="replaceBlanks(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">
                <button class="edit-btn" @click="openEditModal(question)">编辑</button>
                <button class="quote-btn">引用</button>
                <button class="delete-btn">删除</button>
              </div>
            </div>
          </div>
          
          <!-- 分页 -->
          <div class="pagination">
            <span class="total">共 {{ total }} 条</span>
            <div class="page-numbers">
              <button class="page-btn" :disabled="currentPage === 1">&lt;</button>
              <button 
                v-for="page in 5" 
                :key="page" 
                class="page-btn" 
                :class="{ active: page === currentPage }"
                @click="handlePageChange(page)"
              >
                {{ page }}
              </button>
              <button class="page-btn">&gt;</button>
            </div>
            <div class="page-input">
              <span>跳至</span>
              <input type="number" class="page-input-box" :value="currentPage" min="1" :max="Math.ceil(total/pageSize)" />
              <span>页</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 弹窗组件 -->
    <div v-if="isModalVisible" class="modal-overlay">
      <div class="modal">
        <div class="modal-header">
          <h3>{{ modalTitle }}</h3>
          <button class="close-btn" @click="closeModal">&times;</button>
        </div>
        <div class="modal-body">
          <!-- 弹窗内容先为空，后续可以根据需要添加表单 -->
          <div class="empty-content">
            <p>题目编辑表单将在这里实现</p>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="closeModal">取消</button>
          <button class="confirm-btn">确定</button>
        </div>
      </div>
    </div>
  </Page>
</template>

<style lang="scss" scoped>
.question-bank-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  padding: 16px;
  height: calc(100vh - 80px);
  overflow: hidden;
}

.left-panel,
.right-panel {
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

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

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

.add-btn {
  padding: 6px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  
  &:hover {
    background-color: #40a9ff;
  }
}

.category-list,
.question-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.category-card {
  background-color: #f5f5f5;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
  
  &:hover {
    background-color: #e6f7ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
  }
  
  &.active {
    background-color: #e6f7ff;
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
  }
}

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

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

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

/* 题目列表样式 */
.question-item {
  display: flex;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
  background-color: #fff;
  transition: box-shadow 0.3s;
  
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

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

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

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

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

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

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

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

.answer {
  margin-bottom: 16px;
  
  .answer-label {
    font-weight: 600;
    color: #333;
    font-size: 14px;
  }
  
  .answer-content {
    color: #666;
    font-size: 14px;
    word-break: break-word;
  }
}

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

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

.edit-btn {
  background-color: #1890ff;
  color: white;
  
  &:hover {
    background-color: #40a9ff;
  }
}

.quote-btn {
  background-color: #52c41a;
  color: white;
  
  &:hover {
    background-color: #73d13d;
  }
}

.delete-btn {
  background-color: #ff4d4f;
  color: white;
  
  &:hover {
    background-color: #ff7875;
  }
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid #e8e8e8;
  margin-top: 16px;
}

.total {
  font-size: 14px;
  color: #666;
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-btn {
  padding: 4px 12px;
  border: 1px solid #d9d9d9;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  
  &:hover {
    border-color: #1890ff;
    color: #1890ff;
  }
  
  &.active {
    background-color: #1890ff;
    color: white;
    border-color: #1890ff;
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    
    &:hover {
      border-color: #d9d9d9;
      color: #666;
    }
  }
}

.page-input {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
  
  .page-input-box {
    width: 50px;
    padding: 4px 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
  }
}

/* 滚动条样式优化 */
.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;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.modal {
  background-color: white;
  border-radius: 8px;
  width: 600px;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  animation: slideUp 0.3s ease;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.modal {
  background-color: white;
  border-radius: 8px;
  width: 600px;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8e8;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
  
  &:hover {
    background-color: #f5f5f5;
    color: #666;
  }
}

.modal-body {
  padding: 20px;
}

.empty-content {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}

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

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

.cancel-btn {
  background-color: white;
  color: #666;
  
  &:hover {
    border-color: #1890ff;
    color: #1890ff;
  }
}

.confirm-btn {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
  
  &:hover {
    background-color: #40a9ff;
  }
}
</style>