<script setup lang="ts">
import { getScoreReport, getMyContestList } from '../api'

let eventValue = $ref('')
let eventOption: any = $ref([])

onMounted(() => {
  getMyContestList().then((res: any) => {
    eventOption = res.data.list
    eventValue = eventOption[0]?.id
    if (eventValue) {
      scoreReport()
    }
  })
})

let scoreInfo: any = $ref()
const scoreReport = function () {
  getScoreReport({ competition_id: eventValue }).then((res: any) => {
    scoreInfo = res.data
  })
}

const selectChange = function () {
  scoreReport()
}
</script>
<template>
  <AppCard>
    <h1>2023年全国大学生商业数据分析与应用大赛成绩查询结果</h1>
    <div style="display: flex; align-items: center; padding-top: 30px">
      <span style="margin-right: 10px">赛项</span>
      <el-select style="width: 320px" v-model="eventValue" placeholder="请选择" @change="selectChange">
        <el-option v-for="item in eventOption" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </div>
    <h3>考生基础信息</h3>
    <!-- {{ scoreInfo?.id ? [scoreInfo] : [] }} -->
    <el-table :data="scoreInfo?.id ? [scoreInfo] : []" stripe :header-cell-style="{ background: '#ededed' }">
      <el-table-column prop="student.name" label="选手姓名" />
      <el-table-column prop="id" label="参赛ID" />
      <el-table-column label="性别">
        <template #default="props">
          {{ props.row?.student.gender === 1 ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column prop="org.name" label="学校" />
      <el-table-column prop="specialty.name" label="所在专业" />
      <el-table-column prop="grade" label="所在年级" />
      <el-table-column prop="student.mobile" label="联系电话" />
    </el-table>
    <h3>考生成绩</h3>
    <!-- columns: [
    { label: '评分规则', type: 'name' },
    { label: '评分方法', prop: 'type' },
    { label: '分值', prop: 'old_score' },
    { label: '占比（%）', prop: 'ratio' },
    { label: '实际得分', prop: 'score' }
  ] -->
    <el-table :data="scoreInfo?.score_detail" stripe :header-cell-style="{ background: '#ededed' }">
      <el-table-column prop="name" label="评分规则" />
      <el-table-column label="评分方法">
        <template #default="props">
          {{ props.row?.type === '1' ? '专家评分' : props.row.type === '2' ? '1+x考试' : '线下考试' }}
        </template>
      </el-table-column>
      <el-table-column prop="old_score" label="分值" />
      <el-table-column prop="ratio" label="占比（%）" />
      <el-table-column prop="score" label="实际得分" />
    </el-table>
  </AppCard>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 28px;
  color: rgb(171, 42, 65);
  line-height: 40px;
  text-align: center;
}
h3 {
  padding-top: 40px;
  line-height: 30px;
}
</style>
