import { reactive, computed, watch } from 'vue'
import { omit } from 'lodash-es'
import useForm from '@/hooks/useForm'
import useOptions from '@/hooks/useOptions'
import useVW from '@/hooks/useVW'

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

type FormMode = Omit<
  ExtractApiParams<'getStatisticsByGroup'>,
  'endTime' | 'startTime' | 'hasJudge' | 'markingGroupNumbers'
> & {
  time: string[]
  hasJudge: string[]
  expand: string[]
  markingGroupNumbers?: number
}

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

  const model = reactive<FormMode>({
    subjectCode: dataModel.subject || '',
    questionMainNumber: dataModel.question,
    markingGroupNumbers: dataModel.group,
    time: [],
    hasJudge: [],
    expand: [],
  })

  const fetchModel = computed<ExtractApiParams<'getStatisticsByGroup'> & { expand: boolean }>(() => {
    return Object.assign(omit(model, 'time'), {
      startTime: model.time?.[0],
      endTime: model.time?.[1],
      hasJudge: model.hasJudge.length > 0,
      expand: model.expand.length > 0,
      markingGroupNumbers:
        typeof model.markingGroupNumbers === 'number' ? [model.markingGroupNumbers] : model.markingGroupNumbers,
    })
  })

  const { formRef, elFormRef, defineColumn, _ } = useForm()

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

  const rows: EpFormRows = reactive({
    'row-1': {},
    'row-2': {},
  })

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

  const items = computed<EpFormItem[]>(() => [
    OneRowSpan5({
      labelWidth: useVW(52),
      label: '科目',
      prop: 'subjectCode',
      slotType: 'select',
      slot: {
        options: subjectList.value,
        onChange: changeModelValue('subject'),
        disabled: true,
      },
    }),
    OneRowSpan5({
      prop: 'questionMainNumber',
      label: '大题',
      slotType: 'select',
      slot: {
        options: mainQuestionList.value,
        onChange: changeModelValue('question'),
        disabled: true,
      },
    }),
    OneRowSpan5({
      prop: 'markingGroupNumbers',
      label: '小组',
      slotType: 'select',
      slot: {
        options: groupListWithAll.value,
        onChange: changeModelValue('group'),
      },
    }),
    OneRowSpan5({
      labelWidth: useVW(20),
      slotName: 'button-group',
    }),
    TwoRowSpan5({
      labelWidth: useVW(52),
      label: '时间',
      slotType: 'dateTime',
      prop: 'time',
      slot: {
        type: 'datetimerange',
        valueFormat: 'YYYYMMDDHHmmss',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间',
      },
    }),
    TwoRowSpan3({
      prop: 'expand',
      label: '展开明细',
      slotType: 'checkbox',
      slot: {
        options: [{ label: '按人员展开' }],
      },
    }),
    TwoRowSpan3({
      prop: 'hasJudge',
      label: '仲裁',
      slotType: 'checkbox',
      slot: {
        options: [{ label: '含仲裁' }],
      },
    }),
  ])

  return {
    formRef,
    elFormRef,
    model,
    fetchModel,
    items,
    rows,
    onOptionInit,
  }
}

export default useStatisticsFilter
