<template>

  <div class="app-container">

    <el-row :gutter="24">

      <el-col :span="24">
        <el-card style="margin-bottom: 10px">

          距离考试结束还有：
          <exam-timer v-model="paperData.leftSeconds" @timeout="doHandler()" />

          <el-button :loading="loading" style="float: right; margin-top: -10px" type="primary" icon="el-icon-plus" @click="handHandExam()">
            {{ handleText }}
          </el-button>

        </el-card>
      </el-col>

      <el-col :span="5" :xs="24" style="margin-bottom: 10px">

        <el-card class="content-h">

          <p class="card-title">答题卡</p>
          <el-row :gutter="24" class="card-line" style="padding-left: 10px">
            <el-tag type="info">未作答</el-tag>
            <el-tag type="success">已作答</el-tag>
          </el-row>

          <div v-if="paperData.radioList!==undefined && paperData.radioList.length > 0">
            <p class="card-title">单选题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag v-for="item in paperData.radioList" :type="cardItemClass(item.answered, item.quId)" @click="handSave(item)"> {{ item.sort+1 }}</el-tag>
            </el-row>
          </div>

          <div v-if="paperData.multiList!==undefined && paperData.multiList.length > 0">
            <p class="card-title">多选题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag v-for="item in paperData.multiList" :type="cardItemClass(item.answered, item.quId)" @click="handSave(item)">{{ item.sort+1 }}</el-tag>
            </el-row>
          </div>

          <div v-if="paperData.judgeList!==undefined && paperData.judgeList.length > 0">
            <p class="card-title">判断题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag v-for="item in paperData.judgeList" :type="cardItemClass(item.answered, item.quId)" @click="handSave(item)">{{ item.sort+1 }}</el-tag>
            </el-row>
          </div>

          <div v-if="paperData.programmingList!==undefined && paperData.programmingList.length > 0">
            <p class="card-title">编程题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag v-for="item in paperData.programmingList" :type="cardItemClass(item.answered, item.quId)" @click="handSave(item)">{{ item.sort+1 }}</el-tag>
            </el-row>
          </div>

        </el-card>

      </el-col>

      <el-col :span="19" :xs="24">

        <el-card class="qu-content content-h">
          <p v-if="quData.content">{{ quData.sort + 1 }}.{{ quData.content }}</p>
          <p v-if="quData.image!=null && quData.image!=''">
            <el-image :src="quData.image" style="max-width:100%;" />
          </p>
          <div v-if="quData.quType === 1">
            <el-radio-group v-model="radioValue">
              <el-radio v-for="item in quData.answerList" :label="item.id">{{ item.abc }}.{{ item.content }}
                <div v-if="item.image!=null && item.image!=''" style="clear: both">
                  <el-image :src="item.image" style="max-width:100%;" />
                </div>
              </el-radio>
            </el-radio-group>
          </div>

          <div v-if="quData.quType === 2">
            <el-checkbox-group v-model="multiValue">
              <el-checkbox v-for="item in quData.answerList" :key="item.id" :label="item.id">{{ item.abc }}.{{ item.content }}
                <div v-if="item.image!=null && item.image!=''" style="clear: both">
                  <el-image :src="item.image" style="max-width:100%;" />
                </div>
              </el-checkbox>
            </el-checkbox-group>
          </div>

          <div v-if="quData.quType === 3">
            <el-radio-group v-model="radioValue">
              <el-radio v-for="item in quData.answerList" :label="item.id">{{ item.abc }}.{{ item.content }}
                <div v-if="item.image!=null && item.image!=''" style="clear: both">
                  <el-image :src="item.image" style="max-width:100%;" />
                </div>
              </el-radio>
            </el-radio-group>
          </div>

          <div v-if="quData.quType === 4" class="programming-question">
            <div class="programming-header">
              <div class="title-section">
                <span class="question-number">{{ quData.sort + 1 }}. </span>
                <h3>{{ quData.title || '编程题' }}</h3>
              </div>
              <div class="meta-info">
                <span class="info-tag">
                  <i class="fas fa-memory"></i>
                  内存限制：{{ quData.memoryLimit || 256 }} MB
                </span>
                <span class="info-tag">
                  <i class="fas fa-clock"></i>
                  时间限制：{{ quData.timeLimit || 1000 }}ms
                </span>
              </div>
            </div>

            <div class="problem-content vertical">
              <!-- 题目说明部分 -->
              <div class="problem-description full-width">
                <div class="description-section">
                  <h4>题目描述</h4>
                  <div class="content" v-html="quData.content"></div>
                </div>
                
                <div class="description-section">
                  <h4>输入描述</h4>
                  <div class="content" v-html="quData.inputDesc"></div>
                </div>
                
                <div class="description-section">
                  <h4>输出描述</h4>
                  <div class="content" v-html="quData.outputDesc"></div>
                </div>

                <div class="test-cases">
                  <h4>示例</h4>
                  <div class="test-case-grid">
                    <div class="test-case">
                      <div class="case-item">
                        <div class="case-header">输入示例</div>
                        <pre class="case-content">{{ quData.sampleInput }}</pre>
                      </div>
                      <div class="case-item">
                        <div class="case-header">输出示例</div>
                        <pre class="case-content">{{ quData.sampleOutput }}</pre>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 代码编辑器部分 -->
              <div class="code-section full-width">
                <div class="editor-toolbar">
                  <div class="toolbar-left">
                    <el-select
                      v-model="language"
                      class="language-select"
                      popper-class="language-select-dropdown"
                    >
                      <el-option
                        v-for="lang in languages"
                        :key="lang.value"
                        :label="lang.label"
                        :value="lang.value"
                      >
                        <i class="fas fa-code" style="margin-right: 8px; color: #6b7280;"></i>
                        {{ lang.label }}
                      </el-option>
                    </el-select>
                  </div>
                  <div class="toolbar-right">
                    <button class="toolbar-btn" @click="resetCode">
                      <i class="fas fa-redo"></i>
                      重置
                    </button>
                    <button class="submit-btn" @click="submitProgrammingCode" :loading="submitLoading">
                      <i class="fas fa-paper-plane"></i>
                      提交代码
                    </button>
                  </div>
                </div>

                <CodeEditor 
                  v-model="code"
                  :language="language"
                  class="code-editor"
                />

                <div v-if="codeResult" class="result-panel">
                  <div class="result-header">
                    <i class="fas fa-poll"></i>
                    执行结果
                  </div>
                  <pre class="result-content">{{ codeResult }}</pre>
                </div>
              </div>
            </div>
          </div>

          <div style="margin-top: 20px">
            <el-button v-if="showPrevious" type="primary" icon="el-icon-back" @click="handPrevious()">
              上一题
            </el-button>

            <el-button v-if="showNext" type="warning" icon="el-icon-right" @click="handNext()">
              下一题
            </el-button>

          </div>

        </el-card>

      </el-col>

    </el-row>
  </div>

</template>

<script>
import { paperDetail, quDetail, handExam, fillAnswer } from '@/api/paper/exam'
//import { Loading } from 'element-ui'
import { ElLoading } from 'element-plus'
import ExamTimer from '@/views/paper/exam/components/ExamTimer/index.vue'
import { runCode, submitCode } from '@/api/qu/qu'
import { Codemirror } from 'vue-codemirror'
import { cpp } from '@codemirror/lang-cpp'
import { oneDark } from '@codemirror/theme-one-dark'
import { EditorView, gutter, GutterMarker } from '@codemirror/view'
import { StateField, StateEffect } from '@codemirror/state'
import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'

export default {
  name: 'ExamProcess',
  components: { 
    ExamTimer,
    Codemirror,
    CodeEditor
  },
  data() {
    return {
      // 全屏/不全屏
      isFullscreen: false,
      showPrevious: false,
      showNext: true,
      loading: false,
      handleText: '交卷',
      pageLoading: false,
      // 试卷ID
      paperId: '',
      // 当前答题卡
      cardItem: {},
      allItem: [],
      // 当前题目内容
      quData: {
        answerList: []
      },
      // 试卷信息
      paperData: {
        leftSeconds: 99999,
        radioList: [],
        multiList: [],
        judgeList: [],
        programmingList: []
      },
      // 单选选定值
      radioValue: '',
      // 多选选定值
      multiValue: [],
      // 已答ID
      answeredIds: [],
      language: 'cpp',
      code: '',
      showEditor: true,
      extensions: null,
      defaultCode: {
        cpp: '#include <iostream>\nusing namespace std;\n\nint main() {\n    // 在此编写代码\n    return 0;\n}',
        c: '#include <stdio.h>\n\nint main() {\n    // 在此编写代码\n    return 0;\n}'
      },
      submitLoading: false,
      breakpoints: new Set(),
      editor: null,
      currentQuestion: null,
      codeResult: null,
      languages: [
        { label: 'C++', value: 'cpp' },
        { label: 'C', value: 'c' },
      ]
    }
  },
  created() {
    const id = this.$route.params.id
    if (typeof id !== 'undefined') {
      this.paperId = id
      this.fetchData(id)
    }
  },

  methods: {

    // 答题卡样式
    cardItemClass(answered, quId) {
      if (quId === this.cardItem.quId) {
        return 'warning'
      }

      if (answered) {
        return 'success'
      }

      if (!answered) {
        return 'info'
      }
    },

    /**
     * 统计有多少题没答的
     * @returns {number}
     */
    countNotAnswered() {
      let notAnswered = 0

      this.paperData.radioList.forEach(function(item) {
        if (!item.answered) {
          notAnswered += 1
        }
      })

      this.paperData.multiList.forEach(function(item) {
        if (!item.answered) {
          notAnswered += 1
        }
      })

      this.paperData.judgeList.forEach(function(item) {
        if (!item.answered) {
          notAnswered += 1
        }
      })

      this.paperData.programmingList.forEach(function(item) {
        if (!item.answered) {
          notAnswered += 1
        }
      })

      return notAnswered
    },

    /**
     * 下一题
     */
    handNext() {
      const index = this.cardItem.sort + 1
      this.handSave(this.allItem[index])
    },

    /**
     * 上一题
     */
    handPrevious() {
      const index = this.cardItem.sort - 1
      this.handSave(this.allItem[index])
    },

    doHandler() {
      this.handleText = '正在交卷，请等待...'
      this.loading = true

      const params = { id: this.paperId }
      handExam(params).then(() => {
        this.$message({
          message: '试卷提交成功，即将进入试卷详情！',
          type: 'success'
        })

        this.$router.push({ name: 'ShowExam', params: { id: this.paperId }})
      })
    },

    // 交卷操作
    handHandExam() {
      const that = this

      // 交卷保存答案
      this.handSave(this.cardItem, function() {
        const notAnswered = that.countNotAnswered()

        let msg = '确认要交卷吗？'

        if (notAnswered > 0) {
          msg = '您还有' + notAnswered + '题未作答，确认要交卷吗?'
        }

        that.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.doHandler()
        }).catch(() => {
          that.$message({
            type: 'info',
            message: '交卷已取消，您可以继续作答！'
          })
        })
      })
    },

    // 保存答案
    handSave(item, callback) {
      if (item.id === this.allItem[0].id) {
        this.showPrevious = false
      } else {
        this.showPrevious = true
      }

      // 最后一个索引
      const last = this.allItem.length - 1

      if (item.id === this.allItem[last].id) {
        this.showNext = false
      } else {
        this.showNext = true
      }

      const answers = this.multiValue
      if (this.radioValue !== '') {
        answers.push(this.radioValue)
      }

      const params = { paperId: this.paperId, quId: this.cardItem.quId, answers: answers, answer: '' }
      fillAnswer(params).then(() => {
        // 必须选择一个值
        if (answers.length > 0) {
          // 加入已答列表
          this.cardItem.answered = true
        }

        // 最后一个动作，交卷
        if (callback) {
          callback()
        }

        // 查找详情
        this.fetchQuData(item)
      })
    },

    // 获取题目详情
    async fetchQuData(item) {
      if (!item) return
      
      const loading = ElLoading.service({
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      try {
        this.cardItem = item
        this.showPrevious = item.sort > 0
        this.showNext = item.sort < this.allItem.length - 1

        // 重置编辑器
        this.showEditor = false
        this.code = ''

        const params = { paperId: this.paperId, quId: item.quId }
        const response = await quDetail(params)
        this.quData = response.data

        // 如果是编程题，设置默认代码
        if (this.quData.quType === 4) {
          await this.$nextTick()
          this.code = this.defaultCode[this.language]
          this.showEditor = true
        }

        loading.close()
      } catch (error) {
        console.error('加载题目失败:', error)
        this.$message.error('加载题目失败')
        loading.close()
      }
    },

    // 试卷详情
    fetchData(id) {
      const params = { id: id }
      paperDetail(params).then(response => {
        // 试卷内容
        this.paperData = response.data

        // 获得第一题内容
        if (this.paperData.radioList && this.paperData.radioList.length>0) {
          this.cardItem = this.paperData.radioList[0]
        } else if (this.paperData.multiList && this.paperData.multiList.length>0) {
          this.cardItem = this.paperData.multiList[0]
        } else if (this.paperData.judgeList && this.paperData.judgeList.length>0) {
          this.cardItem = this.paperData.judgeList[0]
        } else if (this.paperData.programmingList && this.paperData.programmingList.length>0) {
          this.cardItem = this.paperData.programmingList[0]
        }

        const that = this

        this.paperData.radioList.forEach(function(item) {
          that.allItem.push(item)
        })

        this.paperData.multiList.forEach(function(item) {
          that.allItem.push(item)
        })

        this.paperData.judgeList.forEach(function(item) {
          that.allItem.push(item)
        })

        this.paperData.programmingList.forEach(function(item) {
          that.allItem.push(item)
        })

        // 当前选定
        this.fetchQuData(this.cardItem)
      })
    },

    initExtensions() {
      // 创建行号和断点的装饰器
      const breakpointGutter = gutter({
        class: "breakpoint-gutter",
        renderElement: () => {
          const marker = document.createElement("div")
          marker.className = "gutter-element"
          return marker
        }
      })

      const lineNumberGutter = gutter({
        class: "line-number-gutter",
        lineMarker: (view, line) => {
          const lineNo = view.state.doc.lineAt(line.from).number
          const marker = document.createElement("div")
          marker.textContent = lineNo
          marker.className = "line-number"
          if (this.breakpoints.has(lineNo)) {
            marker.classList.add("has-breakpoint")
          }
          return new class extends GutterMarker {
            toDOM() { return marker }
          }
        },
        domEventHandlers: {
          click: (view, line) => {
            const lineNo = view.state.doc.lineAt(line.from).number
            if (this.breakpoints.has(lineNo)) {
              this.breakpoints.delete(lineNo)
            } else {
              this.breakpoints.add(lineNo)
            }
            view.dispatch({})
            return true
          }
        }
      })

      this.extensions = [
        cpp(),
        oneDark,
        EditorView.lineWrapping,
        lineNumberGutter,
        breakpointGutter,
        EditorView.theme({
          "&": { height: "100%" },
          ".cm-content": { padding: "0" },
          ".cm-line": { padding: "0 8px", height: "20px" },
          ".cm-gutters": { minHeight: "100%" }
        })
      ]
    },

    onReady(editor) {
      this.editor = editor
      this.initExtensions()
    },

    clearBreakpoints() {
      this.breakpoints.clear()
      if (this.editor) {
        this.editor.dispatch({})
      }
    },

    // 修改语言切换处理
    async handleLanguageChange(newVal) {
      this.code = this.defaultCode[newVal]
      await this.$nextTick()
      this.initExtensions()
    },

    handleCodeChange(value) {
      this.code = value
      // 更新行数，并确保与编辑器内容同步
      this.$nextTick(() => {
        this.lineCount = value.split('\n').length
        // 同步滚动位置
        if (this.editor) {
          const scrollInfo = this.editor.getScrollInfo()
          this.$refs.gutter.scrollTop = scrollInfo.top
        }
      })
    },

    runProgrammingCode() {
      this.runLoading = true
      runCode({
        quId: this.quData.quId,
        language: this.language,
        code: this.code
      }).then(response => {
        this.runResult = response.data
        this.runLoading = false
      }).catch(() => {
        this.runLoading = false
      })
    },

    // 提交编程题代码
    async submitProgrammingCode() {
      if (!this.code.trim()) {
        this.$message.warning('请输入代码')
        return
      }

      this.submitLoading = true

      try {
        const response = await submitCode({
          paperId: this.paperId,
          quId: this.quData.quId,
          language: this.language,
          code: this.code
        })

        if (response.data.success) {
          this.cardItem.answered = true
          this.$message.success('代码提交成功！')
        } else {
          this.$message.warning(response.data.message || '代码提交失败，请检查您的代码')
        }
      } catch (error) {
        console.error('提交代码失败:', error)
        this.$message.error('提交失败，请稍后重试')
      } finally {
        this.submitLoading = false
      }
    },

    resetCode() {
      if (this.currentQuestion && this.currentQuestion.type === 'programming') {
        this.currentQuestion.userAnswer = this.currentQuestion.template || 
          '// 在这里编写你的代码\nfunction solution() {\n  \n}';
      }
    },

  },

  watch: {
    language: {
      handler: 'handleLanguageChange',
      immediate: true
    }
  },

  beforeUnmount() {
    if (this.editor) {
      this.editor.dispose()
    }
  }
}
</script>

<style scoped>

  .qu-content div{
    line-height: 30px;
    width: 100%;
  }

  .el-checkbox-group label,.el-radio-group label{
    width: 100%;
  }

  .content-h{
    height: calc(100vh - 110px);
    overflow-y: auto;
  }

  .card-title{
    background: #eee;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
  }
  .card-line{
    padding-left: 10px
  }
  .card-line span {
    cursor: pointer;
    margin: 2px;
  }

  ::v-deep
  .el-radio, .el-checkbox{
    padding: 9px 20px 9px 10px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    margin-bottom: 10px;
    width: 100%;
  }

  .is-checked{
    border: #409eff 1px solid;
  }

  .el-radio img, .el-checkbox img{
    max-width: 200px;
    max-height: 200px;
    border: #dcdfe6 1px dotted;
  }

  ::v-deep
  .el-checkbox__inner {
    display: none;
  }

  ::v-deep
  .el-radio__inner{
    display: none;
  }

  ::v-deep
  .el-checkbox__label{
    line-height: 30px;
  }

  ::v-deep
  .el-radio__label{
    line-height: 30px;
  }

  .problem-description {
    margin-bottom: 10px;
  }

  .problem-description h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 500;
    color: #303133;
  }

  .problem-description pre {
    background-color: #f5f7fa;
    padding: 10px;
    border-radius: 4px;
    overflow: auto;
  }

  .code-container {
    margin-top: 20px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 500px;
  }

  .toolbar {
    padding: 6px 8px;
    border-bottom: 1px solid #dcdfe6;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f5f7fa;
  }

  .editor-container {
    flex: 1;
    min-height: 400px;
    background: #1e1e1e;
    overflow: hidden;
  }

  :deep(.cm-editor) {
    height: 100%;
    font-family: Consolas, Monaco, monospace;
    font-size: 14px;
  }

  :deep(.cm-gutters) {
    display: flex;
    background: #1e1e1e;
    border-right: 1px solid #404040;
    user-select: none;
  }

  :deep(.breakpoint-gutter) {
    width: 20px;
    background: #1e1e1e;
  }

  :deep(.line-number-gutter) {
    min-width: 35px;
    padding-right: 3px;
    background: #1e1e1e;
  }

  :deep(.gutter-element) {
    position: relative;
    height: 20px;
  }

  :deep(.line-number) {
    text-align: right;
    padding: 0 8px;
    color: #858585;
    cursor: pointer;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    position: relative;
  }

  :deep(.line-number.has-breakpoint) {
    color: #d64040;
  }

  :deep(.line-number.has-breakpoint::before) {
    content: "⬤";
    position: absolute;
    left: -14px;
    font-size: 12px;
    color: #d64040;
  }

  :deep(.line-number:hover) {
    background-color: rgba(255, 255, 255, 0.1);
  }

  :deep(.cm-activeLineGutter) {
    background-color: #2d3139 !important;
  }

  :deep(.cm-activeLine) {
    background-color: #2d3139;
  }

  :deep(.cm-line) {
    padding: 0 8px;
    line-height: 20px;
    font-family: Consolas, Monaco, monospace;
  }

  /* 优化滚动条 */
  :deep(.cm-scroller::-webkit-scrollbar) {
    width: 10px;
    height: 10px;
  }

  :deep(.cm-scroller::-webkit-scrollbar-track) {
    background: #1e1e1e;
  }

  :deep(.cm-scroller::-webkit-scrollbar-thumb) {
    background: #404040;
    border-radius: 5px;
  }

  :deep(.cm-scroller::-webkit-scrollbar-corner) {
    background: #1e1e1e;
  }

  .action-buttons {
    padding: 6px 8px;
    border-top: 1px solid #dcdfe6;
    background: #f5f7fa;
    display: flex;
    justify-content: flex-end;
  }

  .qu-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
  }

  .problem-description {
    flex: 0 0 auto;
  }

  .code-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 500px;
  }

  .cm-editor {
    height: 100%;
  }

  .cm-scroller {
    overflow: auto;
  }

  .code-textarea {
    width: 100%;
    height: 100%;
    padding: 10px;
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    border: none;
    resize: none;
    background: #1e1e1e;
    color: #d4d4d4;
  }

  .code-textarea:focus {
    outline: none;
  }

  :deep(.cm-editor) {
    height: 100%;
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    font-size: 14px;
  }

  :deep(.cm-scroller) {
    overflow: auto;
    padding: 8px;
  }

  :deep(.cm-content) {
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
  }

  :deep(.cm-line) {
    padding: 0 4px;
    line-height: 1.6;
  }

  :deep(.cm-focused) {
    outline: none;
  }

  :deep(.cm-theme-dark) {
    background-color: #1e1e1e;
  }

  :deep(.cm-gutters) {
    border-right: 1px solid #404040;
    background-color: #1e1e1e;
  }

  :deep(.cm-activeLineGutter) {
    background-color: #2c313a;
  }

  :deep(.cm-activeLine) {
    background-color: #2c313a;
  }

  .code-textarea {
    display: none;
  }

  .breakpoint-line::before {
    content: "●";
    color: #ff4444;
    position: absolute;
    left: -20px;
    font-size: 20px;
    line-height: 1;
  }

  :deep(.cm-gutterElement) {
    cursor: pointer;
    position: relative;
  }

  :deep(.cm-gutterElement:hover) {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .breakpoint-line {
    background-color: rgba(255, 68, 68, 0.1);
  }

  .programming-section {
    margin: 20px 0;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }

  .question-content {
    max-width: 1200px;
    margin: 0 auto;
  }

  .question-info {
    display: flex;
    gap: 12px;
    margin: 16px 0;
  }

  .info-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 14px;
    color: #64748b;
    transition: all 0.2s;
  }

  .info-tag i {
    margin-right: 8px;
    color: #3b82f6;
  }

  .description {
    margin: 20px 0;
    line-height: 1.6;
    color: #1a202c;
  }

  .test-cases-section {
    margin: 24px 0;
  }

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

  .section-header h4 {
    margin: 0;
    font-size: 18px;
    color: #1a202c;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .section-header h4 i {
    color: #3b82f6;
  }

  .case-count {
    font-size: 14px;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 16px;
  }

  .test-cases {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .test-case-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s;
  }

  .test-case-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .test-case-header {
    padding: 12px 16px;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .case-number {
    font-weight: 500;
    color: #64748b;
  }

  .test-case-content {
    padding: 16px;
  }

  .test-input, .test-output {
    margin: 8px 0;
  }

  .label {
    font-weight: 500;
    color: #475569;
    margin-bottom: 4px;
  }

  code {
    display: block;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    color: #334155;
    border: 1px solid #e2e8f0;
  }

  .editor-section {
    margin: 24px 0;
  }

  .editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 8px 0;
  }

  .editor-tabs {
    display: flex;
    gap: 2px;
  }

  .tab {
    padding: 8px 16px;
    font-size: 14px;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .tab.active {
    background: #f1f5f9;
    color: #3b82f6;
    font-weight: 500;
  }

  .editor-actions {
    display: flex;
    gap: 12px;
  }

  .action-btn {
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
  }

  .action-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .submit-btn {
    padding: 8px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
  }

  .submit-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
  }

  .code-editor-wrapper {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    height: 600px;
  }

  .result-section {
    margin: 24px 0;
    padding: 20px;
    background: #f8fafc;
    border-radius: 10px;
  }

  .result-content {
    margin: 0;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.5;
  }

  @media (max-width: 1024px) {
    .question-info {
      flex-wrap: wrap;
    }
    
    .programming-section {
      padding: 16px;
    }
  }

  .programming-question {
    background: #fff;
    border-radius: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .programming-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
  }

  .title-section {
    display: flex;
    align-items: baseline;
    margin-bottom: 12px;
  }

  .question-number {
    font-size: 18px;
    font-weight: 500;
    color: #374151;
    margin-right: 8px;
  }

  .title-section h3 {
    font-size: 18px;
    font-weight: 500;
    color: #111827;
    margin: 0;
  }

  .meta-info {
    display: flex;
    gap: 12px;
  }

  .info-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 13px;
    color: #4b5563;
  }

  .info-tag i {
    margin-right: 6px;
    color: #6b7280;
  }

  .problem-content {
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 20px;
    gap: 20px;
  }

  .problem-description {
    flex: 0 0 40%;
    overflow-y: auto;
    padding-right: 20px;
  }

  .description-section {
    margin-bottom: 24px;
  }

  .description-section h4 {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    margin: 0 0 12px 0;
  }

  .content {
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
  }

  .test-cases {
    margin-top: 24px;
  }

  .test-cases h4 {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    margin: 0 0 12px 0;
  }

  .test-case {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
  }

  .case-item {
    padding: 12px;
  }

  .case-item:not(:last-child) {
    border-bottom: 1px solid #e5e7eb;
  }

  .case-header {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 8px;
  }

  .case-content {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 12px;
    margin: 0;
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
  }

  .code-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
  }

  .editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
  }

  .toolbar-left, .toolbar-right {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .language-select {
    width: 120px;
  }

  .language-select :deep(.el-input__wrapper) {
    background-color: #f8fafc;
    box-shadow: 0 0 0 1px #e5e7eb;
    border-radius: 4px;
    padding: 0 8px;
  }

  .language-select :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #3b82f6;
  }

  .language-select :deep(.el-input__inner) {
    font-size: 13px;
    color: #374151;
    height: 32px;
  }

  .language-select :deep(.el-select__caret) {
    color: #6b7280;
    font-size: 12px;
  }

  /* 下拉菜单样式 */
  .el-select-dropdown.el-popper {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .el-select-dropdown__item {
    font-size: 13px;
    color: #374151;
    height: 32px;
    line-height: 32px;
  }

  .el-select-dropdown__item.hover, 
  .el-select-dropdown__item:hover {
    background-color: #f3f4f6;
  }

  .el-select-dropdown__item.selected {
    background-color: #eff6ff;
    color: #3b82f6;
    font-weight: 500;
  }

  .toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #ffffff;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .toolbar-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
  }

  .submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    background: #3b82f6;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
  }

  .submit-btn:hover {
    background: #2563eb;
  }

  .code-editor {
    flex: 1;
    min-height: 0;
  }

  .result-panel {
    border-top: 1px solid #e5e7eb;
  }

  .result-header {
    padding: 12px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .result-content {
    margin: 0;
    padding: 12px;
    background: #ffffff;
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
    max-height: 200px;
    overflow-y: auto;
  }

  /* 自定义滚动条样式 */
  .problem-description::-webkit-scrollbar,
  .result-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .problem-description::-webkit-scrollbar-track,
  .result-content::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  .problem-description::-webkit-scrollbar-thumb,
  .result-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
  }

  .problem-description::-webkit-scrollbar-thumb:hover,
  .result-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
  }

  /* 修改布局相关的样式 */
  .problem-content.vertical {
    flex-direction: column;
    gap: 24px;
    padding: 24px;
  }

  .full-width {
    width: 100%;
  }

  .problem-description {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
  }

  .test-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 16px;
  }

  .code-section {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    height: 600px; /* 增加代码编辑器的高度 */
  }

  /* 其他样式保持不变 */
  .code-editor {
    height: calc(100% - 48px); /* 减去工具栏的高度 */
    min-height: 400px;
  }

  /* 调整工具栏样式 */
  .editor-toolbar {
    height: 48px;
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

</style>

