<template>
  <div class="container tw-pt-6 tw-mr-2">
    <div style="height: calc(100% - 50px); overflow: auto">
      <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">
              <span
                v-for="(item, i) in str2Arr(markDetail.scoreList)"
                :key="item"
                :class="[{ active: isActive(i) }, 'score-single']"
                >{{ item == "-1" ? "/" : item
                }}<span class="split">{{
                  i == str2Arr(markDetail.scoreList).length - 1 ? "" : " , "
                }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="
        font-size: 12px;
        color: red;
        height: 50px;
        padding-left: 10px;
        display: flex;
        align-items: center;
      "
    >
      仲裁给分只能对标红的小题给分
    </div>
  </div>
</template>

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

const props = defineProps<{ arbitrateIndex?: string }>();
let list: MarkDetail[] = reactive([]);

const activeIndex = computed(() => {
  return (
    props.arbitrateIndex ? props.arbitrateIndex?.split(",") || [] : []
  ).map((indexStr: string) => Number(indexStr) - 1);
});

const isActive = (i: number) => {
  return activeIndex.value.indexOf(i) > -1;
};
const str2Arr = (str: string) => {
  return str ? str?.split(",") || [] : [];
};

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 lang="less" scoped>
.container {
  min-width: 200px;
  // height: 100vh;
}
.container .col-1 {
  width: 50px;
  text-align: right;
  margin-right: 8px;
}
.container .col-2 {
  max-width: 140px;
  word-wrap: break-word;
  .score-single {
    &.active {
      color: red;
    }
    .split {
      color: var(--app-main-text-color);
    }
  }
}
</style>
