<template>
  <base-table border stripe size="small" height="100%" :columns="columns" :data="filterData"></base-table>
</template>

<script setup lang="ts" name="MarkerSetting">
/** 任务设置 - 按评卷员设置 */
import { watch, computed } 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 | string
  markingGroupNumber?: number
  subjectCode?: string
  filterUsers?: any
}>()

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

const { fetch: getUserList, result: userList } = useFetch('getUserList')
const filterData = computed(() => {
  if (!props.filterUsers?.length) {
    return []
  } else {
    let res = userList?.value?.result || []
    return res.filter((item: any) => !!props.filterUsers?.find((v: any) => v == item.id))
  }
})
const columns: EpTableColumn[] = [
  { label: '评卷员代码', prop: 'loginName' },
  { label: '任务量', prop: 'markTotalCount' },
  { label: '每日任务量', prop: 'markDayCount' },
]

watch(
  [() => props.mainNumber, () => props.subjectCode],
  () => {
    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>
