<script setup>
import { computed, ref } from 'vue';
import LedgerPager from '@/components/common/LedgerPager.vue';
import StatusBadge from '@/components/common/StatusBadge.vue';
import { useLedger } from '@/composables/useLedger';

const props = defineProps({ group: { type: Object, required: true }, busy: { type: Boolean, default: false } });
const emit = defineEmits(['save', 'bulk']);
const selected = ref([]);
const sourceRows = computed(() => props.group.qualificationStatus?.rows || []);
const ledger = useLedger(sourceRows, {
  searchText: row => [row.name, row.registrationNumber, row.specialtyLabel].join(' '),
  filters: {
    status: (row, value) => value === 'unconfirmed' ? !row.confirmed : value === 'eligible' ? row.confirmed && row.eligible : row.confirmed && !row.eligible,
    specialty: (row, value) => row.specialtyLabel === value
  }
});
const specialties = computed(() => [...new Set(sourceRows.value.map(row => row.specialtyLabel).filter(Boolean))].sort((a, b) => a.localeCompare(b, 'zh-CN')));
const pageIds = computed(() => ledger.rows.map(row => row.userId));
const allPageSelected = computed(() => pageIds.value.length > 0 && pageIds.value.every(id => selected.value.includes(id)));
function togglePage() {
  if (allPageSelected.value) selected.value = selected.value.filter(id => !pageIds.value.includes(id));
  else selected.value = [...new Set([...selected.value, ...pageIds.value])];
}
function applyBulk(eligible) {
  if (!selected.value.length) return;
  emit('bulk', { userIds: [...selected.value], eligible });
  selected.value = [];
}
</script>

<template>
  <section class="record-panel qualification-ledger-vue">
    <header>
      <div><h2>{{ group.exam?.name || group.name }}</h2><p>已确认 {{ group.qualificationStatus?.confirmed || 0 }} / {{ group.qualificationStatus?.total || 0 }} 人；全部确认后系统自动公示。</p></div>
      <StatusBadge :value="group.qualificationStatus?.complete ? 'approved' : 'pending'" />
    </header>
    <div class="ledger-toolbar ledger-toolbar--wide">
      <label><span>关键词</span><input v-model="ledger.query" placeholder="姓名、报名号、特长类型"></label>
      <label><span>确认状态</span><select v-model="ledger.filters.status"><option value="">全部状态</option><option value="unconfirmed">待确认</option><option value="eligible">有资格</option><option value="ineligible">无资格</option></select></label>
      <label><span>特长类型</span><select v-model="ledger.filters.specialty"><option value="">全部类型</option><option v-for="item in specialties" :key="item" :value="item">{{ item }}</option></select></label>
      <button class="table-action" type="button" @click="ledger.clear">清除筛选</button>
    </div>
    <div class="ledger-bulk"><label><input type="checkbox" :checked="allPageSelected" @change="togglePage"> 选择当前页</label><strong>已选 {{ selected.length }} 人</strong><button class="table-action" :disabled="!selected.length || busy" @click="applyBulk(false)">批量无资格</button><button class="table-action table-action--primary" :disabled="!selected.length || busy" @click="applyBulk(true)">批量有资格</button></div>
    <div class="table-scroll"><table><thead><tr><th>选择</th><th>考生</th><th>报名号</th><th>特长</th><th>确认状态</th><th>当前资格</th><th>确认</th></tr></thead><tbody><tr v-for="item in ledger.rows" :key="item.userId"><td><input v-model="selected" type="checkbox" :value="item.userId" :aria-label="`选择 ${item.name}`"></td><td>{{ item.name }}</td><td>{{ item.registrationNumber }}</td><td>{{ item.specialtyLabel || '普通生' }}</td><td>{{ item.confirmed ? '已确认' : '待确认' }}</td><td><StatusBadge :value="!item.confirmed ? 'pending' : item.eligible ? 'approved' : 'rejected'" /></td><td><button class="table-action" @click="emit('save', { item, eligible: false })">无资格</button><button class="table-action table-action--primary" @click="emit('save', { item, eligible: true })">有资格</button></td></tr><tr v-if="!ledger.rows.length"><td class="table-empty" colspan="7">没有符合当前条件的考生</td></tr></tbody></table></div>
    <LedgerPager v-model:page="ledger.page" v-model:page-size="ledger.pageSize" :total="ledger.total" />
  </section>
</template>
