<template>
  <div class="flex direction-column full group-monitoring-view">
    <div class="p-l-base p-r-base p-t-medium-base fill-blank">
      <base-form size="small" :label-width="'60px'" :disabled="loading" :model="model" :items="items">
        <template #form-item-button-group>
          <el-button :loading="loading" type="primary" @click="onSearch">刷新</el-button>
        </template>
      </base-form>
    </div>
    <div class="flex-1 p-base">
      <div class="radius-base p-l-base p-r-base p-t-mini fill-blank p-b-mini">
        <base-table border stripe size="small" :columns="columns" :data="result"></base-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="AnalysisGroupMonitoring">
/** 小组监控 */
import { useRouter } from 'vue-router'
import { ElButton } from 'element-plus'
import BaseForm from '@/components/element/BaseForm.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import useFetch from '@/hooks/useFetch'
import useVW from '@/hooks/useVW'
import useFormFilter from './hooks/useFormFilter'
import { reactive } from 'vue'
import type { EpTableColumn } from 'global-type'
import type { ExtractApiResponse } from '@/api/api'
const jumpParams = reactive<any>({
  subjectCode: '',
  questionMainNumber: void 0,
})
const { push } = useRouter()

const { model, formModel, items, onOptionInit } = useFormFilter()

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

const columns: EpTableColumn<ExtractArrayValue<ExtractApiResponse<'getGroupMonitor'>>>[] = [
  { label: '组长', prop: 'markingGroupLeader', fixed: 'left' },
  {
    label: '已浏览试卷总数',
    prop: 'totalCount',
    minWidth: 138,
    sortable: true,
    formatter(row) {
      return (
        <ElButton type="primary" link onClick={() => viewMonitoringDetail(row, 'VIEW')}>
          {row.totalCount}
        </ElButton>
      )
    },
  },
  {
    label: '已给分试卷总数',
    prop: 'totalReScoreCount',
    minWidth: 138,
    sortable: true,
    formatter(row) {
      return (
        <ElButton type="primary" link onClick={() => viewMonitoringDetail(row, 'MARK')}>
          {row.totalReScoreCount}
        </ElButton>
      )
    },
  },
  { label: '已浏览系统抽查卷数', prop: 'sysCheckCount', minWidth: 160, sortable: true },
  { label: '已给分系统抽查卷数', prop: 'sysCheckReScoreCount', minWidth: 160, sortable: true },
  { label: '打回量', prop: 'rejectCount', minWidth: 85, sortable: true },
  { label: '主动抽查次数', prop: 'initiativeCheckCount', minWidth: 120, sortable: true },
  { label: '主动抽查给分次数', prop: 'initiativeCheckReScoreCount', minWidth: 150, sortable: true },

  { label: '已浏览问题卷数', prop: 'problemCount', minWidth: 138, sortable: true },
  { label: '已给分问题卷数', prop: 'problemReScoreCount', minWidth: 138, sortable: true },
  { label: '已浏览自定义抽查卷数', prop: 'customCheckCount', minWidth: 178, sortable: true },
  { label: '已给分自定义抽查卷数', prop: 'customCheckReScoreCount', minWidth: 178, sortable: true },
]

/** 刷新按钮 */
function onSearch() {
  let markingGroupNumbers: any = formModel.value.markingGroupNumbers
  if (
    !markingGroupNumbers ||
    (Array.isArray(markingGroupNumbers) && markingGroupNumbers.length !== markingGroupNumbers.filter((v) => !!v).length)
  ) {
    markingGroupNumbers = []
  }
  getGroupMonitor({ ...formModel.value, markingGroupNumbers }).then(() => {
    jumpParams.subjectCode = formModel.value.subjectCode
    jumpParams.questionMainNumber = formModel.value.questionMainNumber
  })
}

/** 查看抽查详情 */

function viewMonitoringDetail(
  row: ExtractArrayValue<ExtractApiResponse<'getGroupMonitor'>>,
  operateType: 'VIEW' | 'MARK'
) {
  push({
    name: 'AnalysisGroupDetail',
    query: {
      operateType,
      headerId: row.markingGroupLeaderId,
      source: '组长监控',
      subjectCode: jumpParams.subjectCode,
      questionMainNumber: jumpParams.questionMainNumber,
    },
  })
}

onOptionInit(onSearch)
</script>

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