<template>
  <div class="flex direction-column full">
    <div class="p-l-base p-t-medium-base fill-blank">
      <base-form size="small" :items="items" :model="model" :disabled="loading">
        <template #form-item-operation>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </template>
      </base-form>
    </div>
    <div class="flex-1 p-base">
      <div class="radius-base p-base fill-blank">
        <base-table size="small" :data="result" :columns="columns"></base-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="QualitySpotCheck">
/** 抽查情况统计 */
import { reactive, computed, watch } from 'vue'
import { ElButton } from 'element-plus'
import BaseForm from '@/components/element/BaseForm.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import useForm from '@/hooks/useForm'
import useOptions from '@/hooks/useOptions'
import useFetch from '@/hooks/useFetch'
import useVW from '@/hooks/useVW'

import type { ExtractApiParams, ExtractApiResponse, ExtractMultipleApiResponse } from '@/api/api'
import type { EpFormItem, EpTableColumn } from 'global-type'

const { mainQuestionList, dataModel, onOptionInit, changeModelValue } = useOptions(['question'])

const model = reactive<ExtractApiParams<'statisticCheckOverview'>>({
  subjectCode: dataModel.subject || '',
  questionMainNumber: dataModel.question,
  markingGroupLeaderId: 0,
})

const { defineColumn, _ } = useForm()

watch(dataModel, () => {
  model.subjectCode = dataModel.subject || ''
  model.questionMainNumber = dataModel.question
})

const { fetch: getUserList, result: userList } = useFetch('getUserList')
watch(
  () => model.questionMainNumber,
  () => {
    if (model.questionMainNumber) {
      getUserList({ enable: true, mainNumber: model.questionMainNumber, role: 'DEPUTY', pageNumber: 1, pageSize: 9999 })
    }
  },
  { immediate: true }
)

const OneRowSpan5 = defineColumn(_, 'row-1', { span: 5 })

const transformUserOption = (userInfo: ExtractMultipleApiResponse<'getUserList'>) => {
  const { loginName, name, id } = userInfo
  return {
    label: [loginName, name].filter(Boolean).join('-'),
    value: id,
  }
}

const items = computed<EpFormItem[]>(() => {
  return [
    OneRowSpan5({
      label: '大题',
      prop: 'questionMainNumber',
      slotType: 'select',
      slot: { options: mainQuestionList.value, onChange: changeModelValue('question'), disabled: true },
    }),
    OneRowSpan5({
      label: '组长',
      labelWidth: useVW(72),
      prop: 'markingGroupLeaderId',
      slotType: 'select',
      slot: { options: [{ label: '全部', value: 0 }].concat(userList.value?.result?.map(transformUserOption) || []) },
    }),
    OneRowSpan5({ slotName: 'operation', labelWidth: useVW(20) }),
  ]
})

const columns: EpTableColumn<ExtractArrayValue<ExtractApiResponse<'statisticCheckOverview'>>>[] = [
  {
    label: '评卷员',
    prop: 'markerName',
    formatter(row) {
      return row.markerId === 0 ? '' : row.markerName
    },
  },
  {
    label: '大题名称',
    prop: 'questionMainName',
    formatter(row) {
      return row.markerId === 0 ? '' : row.questionMainName
    },
  },
  { label: '主动抽查次数', prop: 'customCheckCount', align: 'center' },
  { label: '打回量', prop: 'rejectCount', align: 'center' },
  { label: '主动抽查给分次数', prop: 'customCheckReScoreCount', align: 'center' },
  { label: '系统抽查复核次数', prop: 'sysCheckCount', align: 'center' },
  { label: '系统抽查复核给分次数', prop: 'sysCheckReScoreCount', align: 'center' },
]

const { fetch: statisticCheckOverview, result, loading } = useFetch('statisticCheckOverview')

const onSearch = () => {
  statisticCheckOverview({ ...model, markingGroupLeaderId: model.markingGroupLeaderId || void 0 })
}

onOptionInit(onSearch)
</script>

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