import useOptions from '@/hooks/useOptions'
import { omit } from 'lodash-es'
import useForm from '@/hooks/useForm'
import { getCurDayRange, getTodayByDay } from '@/utils/common'
import { reactive, computed, watch } from 'vue'
import useDayList from '@/hooks/useDayList'
const useCompareFilter = () => {
  const {
    subjectList,
    mainQuestionList,
    groupListWithAll,
    changeModelValue,
    dataModel,
    onOptionInit,
    isExpert,
    isLeader,
  } = useOptions(['subject', 'question', 'group'], undefined, true, true, true)
  const curDayRange = getCurDayRange()
  const model = reactive({
    subjectCode: dataModel.subject || '',
    questionMainNumber: dataModel.question,
    markingGroupNumber: dataModel.group,
    // time: [curDayRange[0], curDayRange[1]],
    curDay: getTodayByDay(),
  })
  const { dayOptions } = useDayList(dataModel)
  watch(dayOptions, () => {
    model.curDay = getTodayByDay()
  })

  const fetchModel = computed(() => {
    return Object.assign(omit(model, 'curDay'), {
      // startTime: model.time?.[0],
      // endTime: model.time?.[1],
      curDay: model.curDay,
      // markingGroupNumber:
      //   typeof model.markingGroupNumber === 'number' ? [model.markingGroupNumber] : model.markingGroupNumber,
      markingGroupNumber: model.markingGroupNumber,
    })
  })
  const { formRef, elFormRef, defineColumn, _ } = useForm()
  watch(dataModel, () => {
    model.subjectCode = dataModel.subject || ''
    model.questionMainNumber = dataModel.question
    model.markingGroupNumber = dataModel.group
  })

  const rows = reactive({
    'row-1': {},
  })
  const OneRowSpan6 = defineColumn(_, 'row-1', { span: 6 })
  const OneRowSpan5 = defineColumn(_, 'row-1', { span: 5 })
  const OneRowSpan4 = defineColumn(_, 'row-1', { span: 4 })
  const OneRowSpan3 = defineColumn(_, 'row-1', { span: 3 })
  const OneRowSpan2 = defineColumn(_, 'row-1', { span: 2 })
  const customGroupChange = (v: any) => {
    if (groupListWithAll.value.find((item: any) => item.value == undefined)) {
      if (model.markingGroupNumber.includes(undefined)) {
        model.markingGroupNumber = [void 0]
        changeModelValue('group')(model.markingGroupNumber)
      } else {
        changeModelValue('group')(v)
      }
    } else {
      changeModelValue('group')(v)
    }
  }
  const transGroupOptions = computed(() => {
    return (model.markingGroupNumber || []).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(() => [
    OneRowSpan4({
      labelWidth: '52px',
      label: '科目',
      prop: 'subjectCode',
      slotType: 'select',
      slot: {
        options: subjectList.value,
        onChange: changeModelValue('subject'),
        disabled: !isExpert.value,
      },
    }),
    OneRowSpan4({
      prop: 'questionMainNumber',
      label: '大题',
      slotType: 'select',
      labelWidth: '52px',
      slot: {
        options: mainQuestionList.value,
        onChange: changeModelValue('question'),
        disabled: !isExpert.value && !isLeader.value,
      },
    }),
    OneRowSpan4({
      prop: 'markingGroupNumber',
      label: '小组',
      slotType: 'select',
      labelWidth: '52px',
      slot: {
        options: transGroupOptions.value,
        onChange: customGroupChange,
        multiple: true,
      },
    }),

    // OneRowSpan6({
    //   labelWidth: '52px',
    //   label: '时间',
    //   slotType: 'dateTime',
    //   prop: 'time',
    //   slot: {
    //     type: 'datetimerange',
    //     valueFormat: 'YYYYMMDDHHmmss',
    //     startPlaceholder: '开始时间',
    //     endPlaceholder: '结束时间',
    //   },
    // }),
    OneRowSpan4({
      labelWidth: '52px',
      label: '时间',
      slotType: 'select',
      prop: 'curDay',
      slot: {
        options: dayOptions.value,
      },
    }),
    OneRowSpan3({
      labelWidth: '20px',
      slotName: 'button-group',
    }),
  ])

  return {
    formRef,
    elFormRef,
    model,
    fetchModel,
    items,
    rows,
    onOptionInit,
    changeModelValue,
    groupListWithAll,
  }
}
export default useCompareFilter
