<script setup lang="ts">
import type { ContestantScoreItem, CheckItem } from '../types'

interface Props {
  data: ContestantScoreItem
}
const props = defineProps<Props>()

// 列表配置
const listOptions = $computed(() => {
  const columns = [
    { label: '评分规则', prop: 'name' },
    { label: '分值', prop: 'old_score' },
    { label: '占比（%）', prop: 'ratio' },
    {
      label: '系统评分',
      prop: 'organ_id_name',
      computed({ row }: { row: CheckItem }): string {
        if (row.type === '2') {
          const scoreValues = Object.values(row.score)
          return scoreValues[0] || ''
        } else {
          return '--'
        }
      }
    }
  ]
  props.data.check_details_experts?.forEach(item => {
    columns.push({
      label: item.name + '评分',
      prop: item.sso_id,
      computed({ row }: { row: CheckItem }): string {
        if (row.type === '2') {
          return '--'
        } else {
          return row.score[item.sso_id] || '--'
        }
      }
    })
  })
  const data = props.data.check_details?.map(item => {
    return { ...item, ...item.score }
  })
  return { columns, data }
})
</script>

<template>
  <el-dialog title="评分详情">
    <el-descriptions :column="2">
      <el-descriptions-item label="赛项名称：" :span="2">{{ data.competition_id_name }}</el-descriptions-item>
      <el-descriptions-item label="选手姓名：">{{ data.student_name }}</el-descriptions-item>
      <el-descriptions-item label="选手ID：">{{ data.login_id }}</el-descriptions-item>
      <el-descriptions-item label="评分规则：">{{ data.competition_is_more_status }}</el-descriptions-item>
      <el-descriptions-item label="计算规则：">{{ data.competition_rule_type }}</el-descriptions-item>
    </el-descriptions>
    <AppList v-bind="listOptions"></AppList>
    <p class="result">
      最终得分：<span>{{ data.score_name }}</span>
    </p>
    <el-row justify="center" style="margin-top: 40px">
      <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<style lang="scss" scoped>
.result {
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    padding: 0 10px;
    font-size: 40px;
    color: var(--main-color);
  }
}
</style>
