<template>
  <div class="arbitrate-mark">
    <div
      v-for="(markDetail, index) of list"
      :key="index"
      class="arbitrate-mark-item"
    >
      <div class="noun-item">
        <div class="noun-item-title">评卷员</div>
        <div class="noun-item-content">{{ markDetail.userName }}</div>
      </div>
      <div class="noun-item">
        <div class="noun-item-title">时间</div>
        <div class="noun-item-content">
          {{
            markDetail.markTime && $filters.datetimeFilter(markDetail.markTime)
          }}
        </div>
      </div>
      <div class="noun-item">
        <div class="noun-item-title">总分</div>
        <div class="noun-item-content">
          {{ markDetail.totalScore === -1 ? "未选做" : markDetail.totalScore }}
        </div>
      </div>
      <div class="noun-item">
        <div class="noun-item-title">详情</div>
        <div class="noun-item-content">{{ markDetail.scoreList }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";
import { store } from "@/store/store";
import { getArbitrateList } from "@/api/arbitratePage";
import { MarkDetail } from "@/types";

let list: MarkDetail[] = reactive([]);

watch(
  () => store.currentTask,
  async () => {
    if (store.currentTask) {
      const res = await getArbitrateList(
        store.currentTask?.taskId as unknown as string
      );
      if (Array.isArray(res.data)) {
        list.splice(0);
        list.push(...res.data);
      }
    } else {
      list.splice(0);
    }
  }
);
</script>

<style scoped>
.container {
  min-width: 200px;
}
.container .col-1 {
  width: 50px;
  text-align: right;
  margin-right: 8px;
}
.container .col-2 {
  max-width: 140px;
  word-wrap: break-word;
}
</style>
