<template>
  <!--  <el-descriptions class="commit-description">-->
  <!--    <el-descriptions-item-->
  <!--        label-class-name="label-bold"-->
  <!--        label="编号:">{{ commit.id }}</el-descriptions-item>-->
  <!--    <el-descriptions-item-->
  <!--        :width="600"-->
  <!--        label-class-name="label-bold"-->
  <!--        label="提交时间:">{{ formatTimestamp(commit.createdAt) }}</el-descriptions-item>-->
  <!--    <el-descriptions-item-->
  <!--        :width="200"-->
  <!--        label-class-name="label-bold"-->
  <!--        label="分数:">{{ commit.score }}</el-descriptions-item>-->
  <!--    <el-descriptions-item-->
  <!--        label-class-name="label-bold"-->
  <!--        label="Git Commit ID:" :span="2">{{ commit.hash }}</el-descriptions-item>-->
  <!--  </el-descriptions>-->

  <el-card
    class="son-card" border
    style="background:none ; box-shadow: none; border: none">
    <!--    <template #header>-->
    <!--      <page-header>-->
    <!--        <span style="font-size: 24px;font-family: 'Inter',sans-serif;margin-left: 10px">提交列表</span>-->
    <!--      </page-header>-->
    <!--    </template>-->
    <el-table :data="commit.records">
      <el-table-column label="题目">
        <template #default="scope">
          <span>{{ scope.row.problem.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="380">
        <template #default="scope">
        <span
          :style="{color: buildStatusToColor(buildStatusToTagType(scope.row.status))}">
          {{ buildStatusToTagContent(scope.row.status) }}
        </span>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="分数" width="220"/>
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button
            type="text"
            @click="this.openRecordDetail(scope.row.id)"
          >详情
          </el-button>
          <el-divider direction="vertical"/>
          <el-button type="text" class="stop-record-button"
                     :disabled="scope.row.status!==`RUNNING`"
                     @click="handleStopRecordButtonClick(scope.row.id)">
            停止
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog width="80%" v-model="recordDetailVisible" title="运行详情">
    <RecordDetail :exam-id="this.examId" :record-id="this.selectedRecordId"></RecordDetail>
  </el-dialog>

</template>

<script>
import {formatTimestamp, buildStatusToTagType, buildStatusToTagContent} from "@/utils/coder-utils";
import RecordDetail from "@/views/CoderPage/ResultPage/CommitPage/RecordPage/RecordDetail";

export default {
  name: "CommitBoard",
  components: {RecordDetail},
  props: {
    commitId: {
      type: Number,
      required: true
    },
    examId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      commit: {},
      dialog: {
        stop: -1
      },
      loading: false,
      recordDetailVisible: false,
      selectedRecordId: 0
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.$apis.getCommitByCommitId(this.commitId)
        .then(_res => {
          this.commit = _res.data.res;
        }).catch(_err => {
        console.log(_err);

      });
    },
    openRecordDetail(id) {
      console.log("jumpToRecordDetail!");
      this.selectedRecordId = id;
      console.log("examId", this.examId);
      console.log("recordId", this.selectedRecordId);
      this.recordDetailVisible = true;
      // this.$router.push(`${this.$route.path}/commit/${this.commitId}/record/${id}`);
    },
    formatTimestamp,
    buildStatusToTagType,
    buildStatusToTagContent,
    buildStatusToColor(status) {
      switch (status) {
        case "success":
          return this.$color.ElEMENT_COLOR.successColor;
        case "warning":
          return this.$color.ElEMENT_COLOR.warningColor;
        case "danger":
          return this.$color.ElEMENT_COLOR.errorColor;
        case "info":
          return this.$color.ElEMENT_COLOR.primaryColor;
        case "":
          return "black";
      }
    },
    // 点击"停止"按钮，停止当前提交的运行;
    async handleStopRecordButtonClick(recordId) {
      const response = await this.$apis.stopRecordById(recordId);
      if (response.data.res) {
        this.$message.success(`记录${recordId}被用户手动停止`);
        setTimeout(() => this.fetchData(), 0);
      } else {
        this.$message.error(response.data);
      }
    },
  }
};
</script>

<style lang="scss" scoped>
:deep .el-descriptions__body {
  font-size: 16px;
  background-color: #F8F9FB; //样式穿透，覆盖原本的样式
}

:deep .label-bold {
  font-weight: 500;
  font-size: 16px;
}

:deep .el-card__header {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.stop-record-button {
  color: var(--el-color-danger);
}

.stop-record-button:hover {
  color: rgba(245, 108, 108, 75%);
}
</style>
