<script setup lang="ts">
import type { ContestScoreItem } from '../types'
import AppList from '@/components/base/AppList.vue'
import { getContestScoreList } from '../api'
import { useFilterList } from '../composables/useFilterList'

const ScorePublishDialog = defineAsyncComponent(() => import('../components/ScorePublishDialog.vue'))
const route = useRoute()

const { competitions } = useFilterList()

const appList = $ref<InstanceType<typeof AppList> | null>(null)

// 列表配置
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getContestScoreList,
      params: { competition_id: route.query.competition_id || '' }
    },
    filters: [
      {
        type: 'select',
        prop: 'competition_id',
        label: '赛项',
        placeholder: '请选择赛项',
        options: competitions.value,
        labelKey: 'name',
        valueKey: 'id'
      }
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '赛项名称', prop: 'name' },
      { label: '主办单位', prop: 'host_unit_id_name' },
      { label: '赛项类型', prop: 'type_name' },
      { label: '指导老师', prop: 'teachers', slots: 'table-teachers' },
      { label: '报名人数', prop: 'all_competitor_count' },
      { label: '专家人数', prop: 'expert_count' },
      { label: '完赛人数', prop: 'complete_competitor_count' },
      { label: '已评分人数', prop: 'checked_competitor_count' },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x', width: 240 }
    ]
  }
})
let dialogVisible = $ref(false)
const rowData = ref<ContestScoreItem>()
// 发布成绩
function handlePublish(row: ContestScoreItem) {
  rowData.value = row
  dialogVisible = true
}
function onUpdateSuccess() {
  appList?.refetch()
}
</script>

<template>
  <AppCard title="发布成绩">
    <AppList v-bind="listOptions" ref="appList">
      <template #table-teachers="{ row }"> {{ row.teachers.join() }} </template>
      <template #table-x="{ row }">
        <el-button round type="primary" v-permission="'v1-expert-score-competitor-view'">
          <router-link :to="`/admin/contest/score/${row.id}?name=${row.name}`" target="_blank">查看成绩</router-link>
        </el-button>
        <el-button
          round
          type="primary"
          @click="handlePublish(row)"
          v-permission="'v1-expert-score-publish'"
          v-if="row.publish_status !== '1'">
          发布赛项成绩
        </el-button>
      </template>
    </AppList>
  </AppCard>
  <!-- 发布赛项成绩 -->
  <ScorePublishDialog
    :data="rowData"
    v-model="dialogVisible"
    @update="onUpdateSuccess"
    v-if="dialogVisible && rowData"></ScorePublishDialog>
</template>

<style lang="scss" scoped>
.is-success {
  color: #63a103;
}
.is-info {
  color: #b18862;
}
</style>
