<template>
  <div class="p-small radius-base fill-blank">
    <base-table
      ref="tableRef"
      size="small"
      :columns="columns"
      :data="tableData"
      :height="useVW(300)"
      highlight-current-row
      @current-change="onCurrentChange"
    >
    </base-table>
  </div>
  <div class="flex justify-between m-t-base">
    <div class="flex-1 p-mini radius-base fill-blank m-r-base chart-box">
      <vue-e-charts class="full" :option="groupSubjectiveChartsOption"></vue-e-charts>
    </div>
    <div class="flex-1 p-mini radius-base fill-blank chart-box">
      <vue-e-charts class="full" :option="groupObjectiveChartsOption"></vue-e-charts>
    </div>
  </div>
</template>

<script setup lang="ts" name="StatisticsGroup">
/** 人员数据统计-按小组 */
import { watch, computed } from 'vue'
import BaseTable from '@/components/element/BaseTable.vue'
import VueECharts from 'vue-echarts'
import useVW, { usePX } from '@/hooks/useVW'
import useFetch from '@/hooks/useFetch'
import useTableCheck from '@/hooks/useTableCheck'

import type { EChartsOption } from 'echarts'
import type { ExtractApiResponse, ExtractApiParams } from '@/api/api'
import type { EpTableColumn } from 'global-type'

const props = defineProps<{
  data: ExtractApiResponse<'getStatisticsByGroup'>
  params: ExtractApiParams<'getStatisticsByGroup'> & { expand: boolean }
}>()

const columns: EpTableColumn<ExtractArrayValue<ExtractApiResponse<'getStatisticsByGroup'>>>[] = [
  {
    label: '小组',
    prop: 'markingGroupNumber',
    width: usePX(52),
    formatter(row) {
      return row.markingGroupNumber === 0 ? '全部' : `${row.markingGroupNumber}`
    },
  },
  {
    label: '评卷员',
    prop: 'markerName',
    minWidth: usePX(84),
    slotName: 'marker',
    formatter(row) {
      return row.markingGroupNumber === 0 ? '题组' : `第${row.markingGroupNumber}组`
    },
  },
  { align: 'center', label: '评卷份数', prop: 'markingPaperCount', width: usePX(72) },
  { align: 'center', label: '客观题0分量', prop: 'objectiveZero', width: usePX(84) },
  { align: 'center', label: '客观平均分', prop: 'objectiveAvg', width: usePX(76) },
  { align: 'center', label: '客观标准差', prop: 'objectiveStd', width: usePX(76) },
  { align: 'center', label: '重评/待确认', prop: 'reMarkUnConfirmCount', width: usePX(106) },
  { align: 'center', label: '抽查量', prop: 'checkCount', width: usePX(52) },
  { align: 'center', label: '抽查改正量', prop: 'checkCorrectCount', width: usePX(76) },
  { align: 'center', label: '相关系数', prop: 'xyRelate', width: usePX(64) },
  { align: 'center', label: '平均分', prop: 'avg', width: usePX(52) },
  { align: 'center', label: '标准差', prop: 'std', width: usePX(52) },
  { align: 'center', label: '近5分钟最高分', prop: 'scoreTop', width: usePX(96) },
  { align: 'center', label: '近5分钟最低分', prop: 'scoreLow', width: usePX(96) },
  { align: 'center', label: '近5分钟客主比', prop: 'objSubRate', width: usePX(96) },
  { align: 'center', label: '平均客主比', prop: 'objSubAvgRate', width: usePX(76) },
  { align: 'center', label: '在线', prop: 'online', width: usePX(40) },
  { align: 'center', label: '状态', prop: 'markingStatus', width: usePX(40) },
  { align: 'center', label: '速度', prop: 'markingRate', width: usePX(40) },
  { align: 'center', label: '综合系数', prop: 'integration', width: usePX(64) },
]

const data = computed(() => {
  const arr = props.data?.map((v) => ({ ...v })) || []
  const totalIndex = arr.findIndex((v) => !v.markingGroupNumber)
  if (totalIndex >= 0) {
    const [total] = arr.splice(totalIndex, 1)
    total && arr.push(total)
  }
  return arr
})

const { tableRef, tableData, current, onCurrentChange } = useTableCheck(data)

const { fetch: getStatisticObjectiveByGroup, result: objectiveByGroup } = useFetch('getStatisticObjectiveByGroup')
const { fetch: getStatisticSubjectiveByGroup, result: subjectiveByGroup } = useFetch('getStatisticSubjectiveByGroup')

watch(
  [() => props.params, current],
  () => {
    const { subjectCode, questionMainNumber, startTime = '', endTime = '' } = props.params || {}
    if (subjectCode && questionMainNumber && current.value?.markingGroupNumber) {
      getStatisticObjectiveByGroup({
        subjectCode,
        questionMainNumber,
        markingGroupNumber: current.value.markingGroupNumber,
        startTime,
        endTime,
      })
      getStatisticSubjectiveByGroup({
        subjectCode,
        questionMainNumber,
        markingGroupNumber: current.value.markingGroupNumber,
        startTime,
        endTime,
      })
    }
  },
  { immediate: true, deep: true }
)

type StatisticObjectiveByGroup = ExtractApiResponse<'getStatisticObjectiveByGroup'>

type StatisticObjectiveByGroupValues = StatisticObjectiveByGroup['segmentsByAll']

const getXAxisData = <K extends keyof ExtractArrayValue<StatisticObjectiveByGroupValues>>(
  field: K,
  data?: StatisticObjectiveByGroupValues
) => {
  if (!data) {
    return []
  }
  const getValue = (key: K, item: ExtractArrayValue<StatisticObjectiveByGroupValues>) => {
    return item[key]
  }
  return data?.map((v) => getValue(field, v))
}

const groupSubjectiveChartsOption = computed<EChartsOption>(() => {
  return {
    legend: {
      right: 0,
      itemWidth: 14,
      data: ['小组主观分布', '题组主观分布'],
    },
    xAxis: {
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: {
        align: 'right',
      },
      data: getXAxisData('scoreStart', subjectiveByGroup?.value?.segmentsByAll),
    },
    yAxis: [
      {
        type: 'value',
      },
      {
        type: 'value',
        axisLabel: {
          formatter: `{value}%`,
        },
        splitLine: { show: false },
      },
    ],
    series: [
      {
        name: '小组主观分布',
        type: 'line',
        barWidth: 20,
        itemStyle: {
          color: '#3AD500',
        },
        data: getXAxisData('rate', subjectiveByGroup?.value?.segmentsByGroup),
      },
      {
        name: '题组主观分布',
        type: 'line',
        barWidth: 20,
        itemStyle: {
          color: '#0064FF',
        },
        data: getXAxisData('rate', subjectiveByGroup?.value?.segmentsByAll),
      },
    ],
  }
})

const groupObjectiveChartsOption = computed<EChartsOption>(() => {
  return {
    legend: {
      right: 0,
      itemWidth: 14,
      data: ['小组客观分布', '题组客观分布'],
    },
    xAxis: {
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: {
        align: 'right',
      },
      data: getXAxisData('scoreStart', objectiveByGroup?.value?.segmentsByGroup),
    },
    yAxis: [
      {
        type: 'value',
      },
      {
        type: 'value',
        axisLabel: {
          formatter: `{value}%`,
        },
        splitLine: { show: false },
      },
    ],
    series: [
      {
        name: '小组客观分布',
        type: 'line',
        barWidth: 20,
        itemStyle: {
          color: '#3AD500',
        },
        data: getXAxisData('rate', objectiveByGroup?.value?.segmentsByGroup),
      },
      {
        name: '题组客观分布',
        type: 'line',
        barWidth: 20,
        itemStyle: {
          color: '#0064FF',
        },
        data: getXAxisData('rate', objectiveByGroup?.value?.segmentsByAll),
      },
    ],
  }
})
</script>

<style scoped lang="scss">
.chart-box {
  height: 293px;
}
</style>
