<template>
  <div class="result-container">
    <el-card>
      <template #header>
        <page-header>
<!--          <el-button @click="backward" type="text">-->
<!--            <el-icon size="20"><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="$router.push(`${$route.path}/commit/${scope.row.id}`)"
            >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import PageHeader from "@/components/PageHeader";
import {formatTimestamp} from "@/utils/coder-utils";

export default {
  name: "ResultDetail",
  components: {PageHeader},
  data(){
    return {
      result: {},
      user: {},
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    formatTimestamp,
    fetchData() {
      const {resultId} = this.$route.params;
      this.$apis.getResultByResultId(resultId)
          .then(_res => {
            this.result = _res.data.res ?? {};
            this.user = this.result.owner;
          }).catch(_err => {
            ElMessage.error(_err);
      });
    },
    backward() {

    }
  }
};
</script>

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