<template>
  <div class="container tw-mt-6 tw-mr-2">
    <div v-for="(markDetail, index) of list" :key="index">
      <div
        class="tw-mb-4 tw-py-2"
        style="background-color: white; border-radius: 5px"
      >
        <div class="tw-flex" style="color: var(--app-small-header-text-color)">
          <div class="col-1">评卷员</div>
          <div class="col-2">{{ markDetail.markerName }}</div>
        </div>
        <div class="tw-flex" style="color: var(--app-bold-text-color)">
          <div class="col-1 tw-font-bold">时间</div>
          <div class="col-2">
            {{
              markDetail.markerTime &&
              $filters.datetimeFilter(markDetail.markerTime)
            }}
          </div>
        </div>
        <div class="tw-flex" style="color: var(--app-bold-text-color)">
          <div class="col-1 tw-font-bold">总分</div>
          <div class="col-2">
            {{
              markDetail.totalScore === -1 ? "未选做" : markDetail.totalScore
            }}
          </div>
        </div>
        <div class="tw-flex" style="color: var(--app-bold-text-color)">
          <div class="col-1 tw-font-bold">详情</div>
          <div class="col-2">{{ markDetail.scoreList }}</div>
        </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?.libraryId 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>
