<script setup lang="ts">
import { getDrawLotStudentList, getStudentDrawLotInfo } from '../api'
import DrawLotsPrint from '@/components/DrawLotsPrint.vue'

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

// 列表配置
const listOptions = {
  hasPagination: false,
  remote: {
    httpRequest: getDrawLotStudentList,
    params: { draw_rule_id: props.data.id, student_name: '' }
  },
  filters: [{ type: 'input', prop: 'student_name', label: '选手姓名', placeholder: '请输入选手姓名' }],
  columns: [
    { label: '序号', type: 'index', width: 60 },
    { label: '选手姓名', prop: 'student_name' },
    { label: '参赛ID', prop: 'account' },
    { label: '身份证号', prop: 'id_number' },
    { label: '桌号', prop: 'table_number' },
    { label: '更新时间', prop: 'updated_time' },
    { label: '操作', slots: 'table-x', width: 80 }
  ]
}

const exportUrl = $computed(() => {
  return `/api/resource/v1/backend/competition-draw/export-student-draw-list?draw_rule_id=${props.data.id}`
})

const rowData = ref()
const drawLotsPrintRef = ref<InstanceType<typeof DrawLotsPrint> | null>(null)
async function handlePrint(row: any) {
  const res = await getStudentDrawLotInfo({ draw_rule_id: props.data.id, student_id: row.student_id })
  rowData.value = res.data
  nextTick(() => {
    drawLotsPrintRef.value?.print()
  })
}
</script>

<template>
  <el-dialog title="抽签选手列表">
    <AppList v-bind="listOptions">
      <template #header-buttons>
        <a :href="exportUrl" target="_blank">
          <el-button type="primary">导出</el-button>
        </a>
      </template>

      <template #table-x="{ row }">
        <el-button link round type="primary" @click="handlePrint(row)">打印</el-button>
      </template>
    </AppList>
    <el-row justify="center">
      <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
    </el-row>
    <DrawLotsPrint :data="rowData" ref="drawLotsPrintRef" v-if="rowData"></DrawLotsPrint>
  </el-dialog>
</template>
