<template>
  <div class="app-container">
    <el-card class="programming-container">
      <div slot="header" class="clearfix">
        <span>{{ programmingData.title }}</span>
        <div class="header-right">
          <el-tag v-if="programmingData.level === '1'" type="success">简单</el-tag>
          <el-tag v-else-if="programmingData.level === '2'" type="warning">中等</el-tag>
          <el-tag v-else-if="programmingData.level === '3'" type="danger">困难</el-tag>
          <span class="time-limit">时间限制: {{ programmingData.timeLimit }}ms</span>
          <span class="memory-limit">内存限制: {{ programmingData.memoryLimit }}MB</span>
        </div>
      </div>

      <div class="problem-description">
        <h3>题目描述</h3>
        <div v-html="programmingData.content"></div>
        
        <h3>输入描述</h3>
        <div v-html="programmingData.inputDesc"></div>
        
        <h3>输出描述</h3>
        <div v-html="programmingData.outputDesc"></div>
        
        <h3>示例输入</h3>
        <pre>{{ programmingData.sampleInput }}</pre>
        
        <h3>示例输出</h3>
        <pre>{{ programmingData.sampleOutput }}</pre>
      </div>

      <el-divider></el-divider>

      <div class="code-container">
        <div class="language-selector">
          <el-select v-model="language" placeholder="选择编程语言">
            <el-option label="C" value="c"></el-option>
            <el-option label="C++" value="cpp"></el-option>
          </el-select>
        </div>
        
        <code-editor v-model="code" :language="language" height="400px" />
        
        <div class="action-buttons">
          <el-button type="primary" @click="runCode" :loading="runLoading">运行代码</el-button>
          <el-button type="success" @click="submitCode" :loading="submitLoading">提交代码</el-button>
          <el-button type="info" @click="returnToExam">返回试卷</el-button>
        </div>
      </div>

      <div v-if="runResult" class="run-result">
        <h3>运行结果</h3>
        <el-alert
          :title="runResult.status"
          :type="runResult.success ? 'success' : 'error'"
          :description="runResult.message"
          show-icon
        ></el-alert>
        
        <div v-if="runResult.output" class="output-container">
          <h4>输出:</h4>
          <pre>{{ runResult.output }}</pre>
        </div>
        
        <div v-if="runResult.expectedOutput" class="expected-output-container">
          <h4>预期输出:</h4>
          <pre>{{ runResult.expectedOutput }}</pre>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { fetchProgrammingDetail, runCode, submitCode } from '@/api/qu/qu'
import CodeEditor from '@/components/CodeEditor'

export default {
  name: 'ProgrammingExam',
  components: { CodeEditor },
  data() {
    return {
      programmingData: {},
      language: 'cpp',
      code: '// 请在此编写代码\n#include <iostream>\n\nint main() {\n  // 在此编写代码\n  return 0;\n}',
      runLoading: false,
      submitLoading: false,
      runResult: null,
      paperId: '',
      quId: ''
    }
  },
  created() {
    this.paperId = this.$route.params.paperId
    this.quId = this.$route.params.quId
    console.log('加载编程题:', this.paperId, this.quId)
    this.fetchData()
  },
  methods: {
    fetchData() {
      fetchProgrammingDetail(this.quId).then(response => {
        this.programmingData = response.data
      })
    },
    runCode() {
      this.runLoading = true
      runCode({
        quId: this.quId,
        language: this.language,
        code: this.code
      }).then(response => {
        this.runResult = response.data
        this.runLoading = false
      }).catch(() => {
        this.runLoading = false
      })
    },
    submitCode() {
      this.submitLoading = true
      submitCode({
        paperId: this.paperId,
        quId: this.quId,
        language: this.language,
        code: this.code
      }).then(response => {
        this.runResult = response.data
        this.submitLoading = false
        
        if (response.data.success) {
          this.$notify({
            title: '成功',
            message: '代码提交成功！',
            type: 'success',
            duration: 2000
          })
        } else {
          this.$notify({
            title: '提示',
            message: '代码提交失败，请检查您的代码',
            type: 'warning',
            duration: 2000
          })
        }
      }).catch(() => {
        this.submitLoading = false
      })
    },
    returnToExam() {
      this.$router.push(`/exam/start/${this.paperId}`)
    }
  }
}
</script>

<style scoped>
.programming-container {
  margin-bottom: 20px;
}

.header-right {
  float: right;
  display: flex;
  align-items: center;
}

.time-limit, .memory-limit {
  margin-left: 15px;
  color: #606266;
  font-size: 14px;
}

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

.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;
}

.language-selector {
  margin-bottom: 10px;
}

.action-buttons {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

.run-result {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.output-container, .expected-output-container {
  margin-top: 15px;
}

.output-container pre, .expected-output-container pre {
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
  overflow: auto;
}
</style> 