<template>
  <div class="record-container">
    <el-card>
      <template #header>
        <page-header>
          <template #actions>
            <el-button disabled>
              查看调用图
            </el-button>
            <el-button disabled>
              查看代码度量
            </el-button>
            <el-button disabled>
              查看质量分析
            </el-button>
            <el-button
                v-if="
            isTeacherGroup ||
              isAdmin ||
              isConsoleOutputShownForStu ||
              isAssistantGroup
          "
                @click="dialog = true"
            >
              查看控制台输出
            </el-button>
          </template>
          运行详情
        </page-header>
      </template>
      <paper style="padding: 20px">
        <el-descriptions>
          <el-descriptions-item label="状态：">
            <el-tag :type="statusTagType"> {{ statusTagContent }} </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="错误用例数：">
            {{ record.failures ? record.failures.length : 0 }}
          </el-descriptions-item>
          <el-descriptions-item label="分数：">
            {{ record.score }}
          </el-descriptions-item>
        </el-descriptions>
      </paper>
      <div class="top-divide fill-card">
        <el-table :data="record.failures" class="failure-table">
          <el-table-column
              v-if="isTeacherGroup || isAdmin || isAssistantGroup"
              type="expand"
          >
            <template #default="scope">
              <pre><code>{{ scope.row.trace }}</code></pre>
            </template>
          </el-table-column>
          <el-table-column label="错误用例" prop="name" />
        </el-table>
      </div>

    </el-card>

    <el-dialog
        v-model="dialog"
        title="控制台输出"
        width="1080px"
        class="console-output-dialog"
    >
      <pre><code class="console-output-code"> {{record.consoleOutput}} </code></pre>
    </el-dialog>
  </div>

</template>

<script>
import PageHeader from "@/components/PageHeader";
import {mapGetters} from "vuex";
import {ElMessage} from "element-plus";
import Paper from "@/views/ProblemPage/components/Paper";
import {buildStatusToTagContent, buildStatusToTagType} from "@/utils/coder-utils";
export default {
  name: "RecordDetail",
  components: {Paper, PageHeader},
  props: {

  },
  data() {
    return {
      record: {},
      dialog: false,
      isConsoleOutputShownForStu: false,
    };
  },
  computed: {
    ...mapGetters([
        "isTeacherGroup",
        "isAdmin",
        "isAssistantGroup"
    ]),
    statusTagType(){
      return buildStatusToTagType(this.record.status);
    },
    statusTagContent(){
      return buildStatusToTagContent(this.record.status);
    },
  },
  mounted() {
    this.fetchData();
    this.checkConsole();
  },
  methods: {
    fetchData() {
      const {recordId} = this.$route.params;
      this.$apis.getRecordByRecordId(recordId)
          .then(_res => {
            this.record = _res.data.res;
          }).catch(_err => {
            ElMessage.error(_err);
      });
    },
    checkConsole() {
      const {examId} = this.$route.params;
      this.$apis.getExamIsShownForStu(examId)
          .then(_res => {
            this.isConsoleOutputShownForStu = _res.data?.res;
          }).catch(_err => {
            ElMessage.error(_err);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
pre code {
  font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
  overflow: auto;
  display: block;
  padding: 10px;
  line-height: 1.428571429;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #e5e5e5;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  white-space: pre;
}
.console-output-code {
  height: 50vh;
  min-height: 480px;
}

.record-container {
  margin: 40px 10vw 80px 10vw;
  min-height: calc(100vh - 100px);
}
</style>
