<template>
  <div class="p-base radius-base fill-blank">
    <base-form size="small" :items="items" :model="model">
      <template #form-item-operation>
        <el-button class="m-l-base" type="primary" @click="onSearch">查询</el-button>
        <el-button
          v-permBtn="'analysis-marking_progress_export'"
          :loading="exportLoading"
          type="primary"
          custom-1
          @click="onExport"
          >导出</el-button
        >
        <el-button
          v-permBtn="'analysis-marking_progress_province_export'"
          :loading="provinceExportLoading"
          custom-1
          type="primary"
          @click="provinceExport"
          >省份进度导出</el-button
        >
      </template>
    </base-form>
    <base-table border stripe size="small" :columns="columns" :data="result"></base-table>
  </div>
</template>

<script setup lang="ts" name="GroupProgress">
/** 组员进度 */
import { reactive, ref, watch, computed } 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 useFetch from '@/hooks/useFetch'
import useOptions from '@/hooks/useOptions'
import useVW from '@/hooks/useVW'

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

const {
  subjectList,
  mainQuestionList,
  groupListWithAll,
  dataModel,
  changeModelValue,
  onOptionInit,
  isExpert,
  isLeader,
} = useOptions(['subject', 'question', 'group'])

const model = reactive<ExtractApiParams<'getMarkProgressByMarker'>>({
  subjectCode: dataModel.subject || '',
  questionMainNumber: dataModel.question,
  markingGroupNumber: dataModel.group,
})

const { fetch, result } = useFetch('getMarkProgressByMarker')

const onSearch = () => {
  fetch({ ...model })
}

const { fetch: exportStatistics, loading: exportLoading } = useFetch('exportMarkProgressByMarker', 'get')
const { fetch: exportProvince, loading: provinceExportLoading } = useFetch('getProvinceProcess', 'get')

const onExport = () => {
  exportStatistics(model)
}
const provinceExport = () => {
  exportProvince({ subjectCode: model.subjectCode, questionMainNumber: model.questionMainNumber })
}

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

onOptionInit(onSearch)

const { defineColumn, _ } = useForm()

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

const items = computed<EpFormItem[]>(() => [
  OneRow({
    labelWidth: '52px',
    label: '科目',
    slotType: 'select',
    prop: 'subjectCode',
    slot: { options: subjectList.value, onChange: changeModelValue('subject'), disabled: !isExpert.value },
  }),
  OneRow({
    labelWidth: '52px',
    slotType: 'select',
    label: '大题',
    prop: 'questionMainNumber',
    slot: {
      placeholder: '选择大题',
      options: mainQuestionList.value,
      onChange: changeModelValue('question'),
      disabled: !isExpert.value && !isLeader.value,
    },
  }),
  OneRow({
    labelWidth: '52px',
    label: '小组',
    slotType: 'select',
    prop: 'markingGroupNumber',
    slot: { options: groupListWithAll.value, onChange: changeModelValue('group') },
  }),
  OneRow8({ slotName: 'operation' }),
])

const dateTimes = computed(() => {
  const times = result?.value?.reduce((total, cur) => {
    total.push(...cur.dayFinishCounts.map((v) => v.date))
    return total
  }, [] as string[])
  return [...new Set(times)]
})

type TableColumn = EpTableColumn<ExtractArrayValue<ExtractApiResponse<'getMarkProgressByMarker'>>>
const columns = computed<TableColumn[]>(() => {
  return [
    {
      label: '序号',
      type: 'index',
      width: 64,
      align: 'center',
      fixed: 'left',
      index(index) {
        return index < result?.value?.length - 1 ? index + 1 : (void 0 as unknown as number)
      },
    },
    { label: '评卷员', prop: 'markerName', align: 'center', minWidth: 120, fixed: 'left' },
    ...dateTimes.value.map((d) => {
      return {
        label: d,
        align: 'center',
        formatter(row) {
          return row.dayFinishCounts.find((v) => v.date === d)?.count ?? ''
        },
        minWidth: 125,
        sortable: true,
        sortMethod: function (a, b) {
          let aCount = a.dayFinishCounts.find((v) => v.date === d)?.count ?? 0
          let bCount = b.dayFinishCounts.find((v) => v.date === d)?.count ?? 0
          return aCount - bCount
        },
      } as TableColumn
    }),
    { label: '合计', prop: 'totalFinishCount', align: 'center', minWidth: 100, sortable: true, fixed: 'right' },
  ]
})
</script>

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