import { reactive, computed, watch, ref } from 'vue'
import useForm from '@/hooks/useForm'
import useOptions from '@/hooks/useOptions'
import useVW from '@/hooks/useVW'
import useFetch from '@/hooks/useFetch'
import type { EpFormItem } from 'global-type'
import type { ExtractApiParams } from '@/api/api'

const useFormFilter = () => {
  const {
    subjectList,
    mainQuestionList,
    groupListWithAll,
    changeModelValue,
    dataModel,
    onOptionInit,
    isExpert,
    isLeader,
  } = useOptions(['subject', 'question', 'group'], undefined, true, true, true)
  const ROLE_OPTION = ref<any[]>([])
  useFetch('getRoleList')
    .fetch()
    .then((res: any) => {
      ROLE_OPTION.value = res.map((item: any) => {
        return {
          value: item.code,
          label: item.roleName,
        }
      })
    })
  const { formRef, elFormRef, defineColumn, _ } = useForm()

  const model = reactive<
    // Omit<ExtractApiParams<'getGroupMonitor'>, 'markingGroupNumber'> & { markingGroupNumber?: number | string }
    Omit<ExtractApiParams<'getGroupMonitor'>, 'markingGroupNumbers'> & { markingGroupNumbers?: any; roles?: any }
  >({
    subjectCode: dataModel.subject || '',
    markingGroupNumbers: dataModel.group,
    questionMainNumber: dataModel.question,
    roles: [],
  })

  const formModel = computed<any>(() => {
    return {
      subjectCode: model.subjectCode,
      // markingGroupNumber:
      //   typeof model.markingGroupNumber === 'number' ? [model.markingGroupNumber] : model.markingGroupNumber,
      markingGroupNumbers: model.markingGroupNumbers,
      questionMainNumber: model.questionMainNumber,
      roles: model.roles,
    }
  })

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

  const OneRowSpan5 = defineColumn(_, 'row-1', { span: 4 })
  const customGroupChange = (v: any) => {
    if (groupListWithAll.value.find((item: any) => item.value == undefined)) {
      if (model.markingGroupNumbers.includes(undefined)) {
        model.markingGroupNumbers = [void 0]
        changeModelValue('group')(model.markingGroupNumbers)
      } else {
        changeModelValue('group')(v)
      }
    } else {
      changeModelValue('group')(v)
    }
  }
  const transGroupOptions = computed(() => {
    return (model.markingGroupNumbers || []).includes(undefined)
      ? (groupListWithAll.value || []).map((item: any) => {
          item.value != undefined && (item.disabled = true)
          return item
        })
      : groupListWithAll.value.map((item: any) => {
          item.disabled = false
          return item
        })
  })
  const items = computed<EpFormItem[]>(() => [
    OneRowSpan5({
      label: '科目',
      prop: 'subjectCode',
      slotType: 'select',
      slot: {
        disabled: !isExpert.value,
        options: subjectList.value,
        onChange: changeModelValue('subject'),
      },
    }),
    OneRowSpan5({
      prop: 'questionMainNumber',
      label: '大题',
      slotType: 'select',
      slot: {
        disabled: !isExpert.value && !isLeader.value,
        options: mainQuestionList.value,
        onChange: changeModelValue('question'),
      },
    }),
    OneRowSpan5({
      prop: 'markingGroupNumbers',
      label: '小组',
      slotType: 'select',
      slot: {
        options: transGroupOptions.value,
        onChange: customGroupChange,
        multiple: true,
      },
    }),
    OneRowSpan5({
      label: '角色',
      slotType: 'select',
      prop: 'roles',
      slot: {
        options: ROLE_OPTION.value,
        placeholder: '角色',
        multiple: true,
      },
    }),
    OneRowSpan5({
      labelWidth: '20px',
      slotName: 'button-group',
    }),
  ])

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

export default useFormFilter
