<script setup lang="ts">
import qs from "query-string"
import { getSubmission } from "oj/api"
import { JUDGE_STATUS, LANGUAGE_FORMAT_VALUE } from "utils/constants"
import {
  parseTime,
  submissionMemoryFormat,
  submissionTimeFormat,
  utoa,
} from "utils/functions"
import { Submission } from "utils/types"
import SubmissionResultTag from "~/shared/components/SubmissionResultTag.vue"

const props = defineProps<{
  submissionID: string
  problemID?: string
  submission?: Submission
  hideList?: boolean
}>()

const router = useRouter()

const submission = ref<Submission>()

async function init() {
  submission.value = props.submission
  if (submission.value) return
  const res = await getSubmission(props.submissionID)
  submission.value = res.data
}

const columns: DataTableColumn<Submission["info"]["data"][number]>[] = [
  { title: "测试用例", key: "test_case" },
  {
    title: "测试状态",
    key: "result",
    render: (row) => h(SubmissionResultTag, { result: row.result }),
  },
  {
    title: "占用内存",
    key: "memory",
    render: (row) => submissionMemoryFormat(row.memory),
  },
  {
    title: "执行耗时",
    key: "real_time",
    render: (row) => submissionTimeFormat(row.real_time),
  },
]

function copyToCat() {
  const lang = LANGUAGE_FORMAT_VALUE[submission.value!.language]
  const data = {
    lang,
    code: submission.value!.code,
    input: "",
  }
  const base64 = utoa(JSON.stringify(data))
  const url = qs.stringifyUrl({
    url: import.meta.env.PUBLIC_CODE_URL,
    query: {
      share: base64,
    },
  })
  window.open(url, "_blank")
}

function copyToProblem() {
  router.push({
    name: "problem",
    params: {
      contestID: submission.value!.contest,
      problemID: props.problemID,
    },
  })
}

onMounted(init)
</script>

<template>
  <n-flex vertical v-if="submission" :size="24">
    <n-flex justify="space-between">
      <n-alert
        style="flex: 1"
        :type="JUDGE_STATUS[submission.result]['type']"
        :title="JUDGE_STATUS[submission.result]['name']"
      >
        <n-flex>
          <span>提交时间：{{ parseTime(submission.create_time) }}</span>
          <span>编程语言：{{ submission.language }}</span>
          <span>用户：{{ submission.username }}</span>
        </n-flex>
      </n-alert>
      <n-flex vertical>
        <n-button secondary @click="copyToCat">复制到自测猫</n-button>
        <n-button secondary @click="copyToProblem">回到题目</n-button>
      </n-flex>
    </n-flex>
    <n-card embedded>
      <n-code
        class="code"
        :language="LANGUAGE_FORMAT_VALUE[submission.language]"
        :code="submission.code"
        show-line-numbers
      />
    </n-card>
    <n-data-table
      v-if="!hideList && submission.info && submission.info.data"
      :columns="columns"
      :data="submission.info.data"
    />
  </n-flex>
</template>

<style scoped>
.code {
  font-size: 20px;
  overflow: auto;
}
</style>
