<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="$emit('update:modelValue')">
      <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>
  