<script setup lang="ts">
import type { ContestScoreItem } from '../types'
import { ElMessage } from 'element-plus'
import { publishScore } from '../api'

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

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

// 发布
function handleSubmit() {
  publishScore({ id: props.data.id }).then(() => {
    ElMessage.success('发布成功')
    emit('update')
    emit('update:modelValue', false)
  })
}
</script>

<template>
  <el-dialog title="发布成绩" width="500px" :close-on-click-modal="false" @update:modelValue="value => $emit('update:modelValue', value)">
    <div class="content">
      <p>请确认赛项成绩之后再进行发布成绩！</p>
      <p>
        赛项名称：<b>{{ data.name }}</b>
      </p>
      <br />
      <p>
        <span>报名人数：{{ data.all_competitor_count }}</span>
        <span>完赛人数：{{ data.complete_competitor_count }}</span>
        <span>已评分人数：{{ data.checked_competitor_count }}</span>
      </p>
      <br />
      <p>请确认是否发布成绩！</p>
    </div>
    <el-row justify="center" style="margin-top: 40px">
      <el-button type="primary" round auto-insert-space @click="handleSubmit">发布</el-button>
      <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
    </el-row>
  </el-dialog>
</template>

<style lang="scss" scoped>
.content {
  text-align: center;
  p {
    margin: 10px 0;
  }
  b {
    color: var(--main-color);
  }
  span + span {
    margin-left: 40px;
  }
}
</style>
