<template>
  <base-table size="small" height="100%" :columns="columns" :data="userList?.result"></base-table>
</template>

<script setup lang="ts" name="MarkerSetting">
/** 任务设置 - 按评卷员设置 */
import { watch } from 'vue'
import useFetch from '@/hooks/useFetch'
import BaseTable from '@/components/element/BaseTable.vue'

import type { EpTableColumn } from 'global-type'
import type { ExtractMultipleApiResponse } from '@/api/api'

const props = defineProps<{
  mainNumber?: number
  markingGroupNumber?: number
  subjectCode?: string
}>()

const emit = defineEmits<{
  (e: 'user-list', list: ExtractMultipleApiResponse<'getUserList'>[]): void
}>()

const { fetch: getUserList, result: userList } = useFetch('getUserList')

const columns: EpTableColumn[] = [
  { label: '评卷员代码', prop: 'loginName' },
  { label: '任务量', prop: 'markTotalCount' },
  { label: '每日任务量', prop: 'markDayCount' },
]

watch(
  props,
  () => {
    if (props.mainNumber && props.subjectCode) {
      getUserList({
        pageNumber: 1,
        pageSize: 9999,
        subjectCode: props.subjectCode,
        mainNumber: props.mainNumber,
        role: 'MARKER',
      })
    }
  },
  { immediate: true }
)

watch(userList, () => {
  emit('user-list', userList.value?.result)
})
</script>

<style scoped lang="scss"></style>
