import { reactive, computed, watch } from 'vue'
import useFetch from '@/hooks/useFetch'
import useForm from '@/hooks/useForm'
import useOptions from '@/hooks/useOptions'
import useVW from '@/hooks/useVW'

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

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

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

  const model = reactive<ExtractApiParams<'getTrainingMonitor'> & { diffShow: string[] }>({
    subjectCode: dataModel.subject || '',
    mainNumber: dataModel.question,
    markingGroupNumber: dataModel.group,
    markStage: 'SAMPLE_A',
    forceGroupNumber: void 0,
    diffShow: [],
  })

  const diffShow = computed(() => {
    return !!model.diffShow.length
  })

  const forceGroupListParams = computed(() => {
    return {
      subjectCode: model.subjectCode,
      questionMainNumber: model.mainNumber,
    }
  })

  const { fetch: getForceCheckGroupList, result: forceCheckGroupListResult } = useFetch('getForceCheckGroupList')

  const forceCheckGroup = computed(() =>
    forceCheckGroupListResult?.value?.map((group) => {
      return { ...group, value: group.forceGroupNumber, label: `第${group.forceGroupNumber}组` }
    })
  )

  watch(
    forceGroupListParams,
    () => {
      if (model.subjectCode && model.mainNumber) {
        getForceCheckGroupList({ subjectCode: model.subjectCode, mainNumber: model.mainNumber })
      }
    },
    { immediate: true }
  )

  watch(
    dataModel,
    () => {
      model.subjectCode = dataModel.subject || ''
      model.mainNumber = dataModel.question
      model.markingGroupNumber = dataModel.group
    },
    { deep: true }
  )

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

  const items = computed<EpFormItem[]>(() => {
    return [
      OneRowSpan5({
        label: '科目',
        prop: 'subjectCode',
        slotType: 'select',
        labelWidth: useVW(72),
        slot: {
          options: subjectList.value,
          onChange: changeModelValue('subject'),
          disabled: true,
        },
      }),
      OneRowSpan5({
        prop: 'mainNumber',
        label: '大题',
        slotType: 'select',
        slot: {
          options: mainQuestionList.value,
          onChange: changeModelValue('question'),
          disabled: true,
        },
      }),
      OneRowSpan5({
        prop: 'markingGroupNumber',
        label: '小组',
        slotType: 'select',
        slot: {
          options: groupListWithAll.value,
          onChange: changeModelValue('group'),
        },
      }),
      OneRowSpan5({
        labelWidth: 20,
        slotName: 'operation',
      }),
      TwoRowSpan5({
        label: '试卷类型',
        slotType: 'select',
        prop: 'markStage',
        labelWidth: useVW(60),
        slot: {
          placeholder: '试卷类型',
          options: [
            { label: 'SAMPLE_A', value: 'SAMPLE_A' },
            { label: 'SAMPLE_B', value: 'SAMPLE_B' },
            { label: '强制考核卷', value: 'FORCE' },
          ],
        },
      }),
      model.markStage === 'FORCE'
        ? TwoRowSpan5({
            label: '强制考核组',
            slotType: 'select',
            prop: 'forceGroupNumber',
            slot: {
              placeholder: '强制考核组',
              options: forceCheckGroup.value,
            },
          })
        : null,
      TwoRowSpan5({
        label: '差值展示',
        slotType: 'checkbox',
        prop: 'diffShow',
        slot: { options: [{ label: '是' }] },
      }),
    ].filter(Boolean) as EpFormItem[]
  })

  return {
    formRef,
    elFormRef,
    model,
    diffShow,
    items,
    onOptionInit,
  }
}

export default useFormFilter
