<template>
  <div class="result-container">
    <el-card>
      <template #header>
        <page-header>
          <el-button @click="getBack">
            <el-icon><Back /></el-icon>
          </el-button>
          用户 {{ user.username }} 的成绩列表
        </page-header>
      </template>
      <el-table :data="result.commits">
        <el-table-column prop="id" label="#" width="200" />
        <el-table-column label="提交时间">
          <template #default="scope">
            <span>{{ formatTimestamp(scope.row.created_at) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="300">
          <template #default="scope">
            <span>{{ scope.row.finished ? '运行结束' : '等待或运行中' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="成绩" width="200" />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
                type="primary"
                size="mini"
                @click="openCommitDetail(scope.row.id)"
            >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

  <el-dialog width="80%" v-model="commitDetailVisible" title="运行详情">
    <CommitDetail :commit-id="this.commitId" :exam-id="this.examId"></CommitDetail>
  </el-dialog>

</template>

<script>
import {ElMessage} from "element-plus";
import PageHeader from "@/components/PageHeader.vue";
import CommitDetail from "@/views/CoderPage/ResultPage/CommitPage/CommitDetail";
import {formatTimestamp} from "@/utils/coder-utils";

export default {
  name: "ResultDetail",
  components: {PageHeader,CommitDetail},
  props: {
    resultId: {
      type: Number,
      required: true
    },
    examId: {
      type: Number,
      required: true
    },
  },
  data(){
    return {
      result: {},
      user: {},
      commitDetailVisible:false,
      commitId:0
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    formatTimestamp,
    fetchData() {
      console.log("resultId",this.resultId);
      this.$apis.getResultByResultId(this.resultId)
          .then(_res => {
            this.result = _res.data.res ?? {};
            this.user = this.result.owner;
          }).catch(_err => {
            ElMessage.error(_err);
      });
    },
    getBack() {
      this.$router.go(-1);
    },
    openCommitDetail(id){
      this.commitId = id;
      this.commitDetailVisible=true;
    }
  }
};
</script>

<style lang="scss" scoped>
.result-container {
  margin: 10px 0 10px 0;
  //min-height: calc(100vh - 400px);
}
</style>
