import { useDraggable } from 'vue-draggable-plus'
// 定义源数据的结构类型
interface Option {
  id: number
  name: string
}

interface Category {
  typeName: string
  typeId: number
  options: Option[]
}

type CategoryDataMock = Category[]

// 定义目标数据的结构类型
interface TargetData {
  serialNo: string
  name: string
  sale: string
  img: string
  num: number
  amount: string
}

export const generateTargetData = (categoryData: CategoryDataMock): TargetData[] => {
  const result: TargetData[] = []
  const optionGroups: Option[][] = categoryData.map((category) => category.options)

  // 使用递归生成所有可能的组合
  const combine = (index: number, current: Option[]) => {
    if (index === optionGroups.length) {
      const serialNo = current.map((opt) => opt.id.toString()).join('-')
      const name = current.map((opt) => opt.name).join('-')
      result.push({
        serialNo,
        name,
        sale: '',
        num: 0,
        img: '',
        amount: ''
      })
      return
    }
    for (const option of optionGroups[index]) {
      combine(index + 1, [...current, option])
    }
  }

  combine(0, [])
  return result
}

// 添加类目
export const useCategoryAddOption = (categoryData: any) => {
  const inputVisibles = ref(Array.from({ length: categoryData.value.length }, (_) => false))

  const InputRefs = ref()
  const inputValue = ref('')
  const onAddCategoryDataOption = (index: number) => {
    inputVisibles.value[index] = true
    nextTick(() => {
      InputRefs.value[index].input!.focus()
    })
  }
  const handleInputConfirm = (index: number) => {
    if (inputValue.value) {
      categoryData.value[index].options.push({
        id: inputValue.value,
        name: inputValue.value,
        isAdd: true
      })
    }
    inputVisibles.value[index] = false
    inputValue.value = ''
  }
  return { inputVisibles, InputRefs, inputValue, onAddCategoryDataOption, handleInputConfirm }
}

export const colors = ['primary', 'success', 'warning', 'danger', 'info']

export const useDrag = (list: any) => {
  const dragRef = ref()
  const createDrag = () => {
    const { start } = useDraggable(dragRef, list, {
      animation: 150,
      ghostClass: 'ghost',
      onStart() {
        console.log('start')
      },
      onUpdate() {
        console.log('update')
      }
    })
  }
  return { dragRef, createDrag }
}
