<script setup lang="ts">
import { Pie } from "vue-chartjs"
import { DIFFICULTY, JUDGE_STATUS } from "utils/constants"
import { getACRate, getTagColor, parseTime } from "utils/functions"
import { isDesktop } from "~/shared/composables/breakpoints"
import { Problem } from "utils/types"

interface Props {
  problem: Problem
}
const props = defineProps<Props>()

const data = computed(() => {
  const status = props.problem.statistic_info
  const labels = []
  for (let i in status) {
    if (status[i] !== 0) {
      // @ts-ignore
      labels.push(JUDGE_STATUS[i]["name"])
    }
  }
  return {
    labels,
    datasets: [{ data: Object.values(status), hoverOffset: 4 }],
  }
})

const options = {
  plugins: {
    title: { text: "提交结果的比例", display: true, font: { size: 20 } },
  },
}
</script>

<template>
  <n-descriptions bordered label-placement="left" :column="isDesktop ? 3 : 1">
    <n-descriptions-item label="编号">
      {{ problem._id }}
    </n-descriptions-item>
    <n-descriptions-item label="出题人">
      {{ problem.created_by.username }}
    </n-descriptions-item>
    <n-descriptions-item label="创建时间">
      {{ parseTime(problem.create_time) }}
    </n-descriptions-item>
    <n-descriptions-item label="难度">
      <n-tag :type="getTagColor(problem.difficulty)">
        {{ DIFFICULTY[problem.difficulty] }}
      </n-tag>
    </n-descriptions-item>
    <n-descriptions-item label="时间限制">
      {{ problem.time_limit }}毫秒
    </n-descriptions-item>
    <n-descriptions-item label="内存限制">
      {{ problem.memory_limit }}MB
    </n-descriptions-item>
    <n-descriptions-item label="提交正确">
      {{ problem.accepted_number }}次
    </n-descriptions-item>
    <n-descriptions-item label="提交错误">
      {{ problem.submission_number - problem.accepted_number }}次
    </n-descriptions-item>
    <n-descriptions-item label="正确率">
      {{ getACRate(problem.accepted_number, problem.submission_number) }}
    </n-descriptions-item>
    <n-descriptions-item :span="3" label="标签">
      <n-space>
        <n-tag type="info" v-for="tag in problem.tags" :key="tag">
          {{ tag }}
        </n-tag>
      </n-space>
    </n-descriptions-item>
  </n-descriptions>
  <div class="pie" v-if="problem.submission_number > 0">
    <Pie :data="data" :options="options" />
  </div>
</template>
<style scoped>
.pie {
  width: 100%;
  max-width: 500px;
  margin: 24px auto;
}
</style>
