import type { KeyType } from '../components/ColumnSet/index.vue'
import { tableColumnInGroup } from '../components/ColumnSet/index.vue'

type tableColumnsGroups = {
  groupTitle: string
  children: {
    key: KeyType
    title: string
    width?: number
    headerClass: string
  }[]
}[]

enum Alignment {
  LEFT = 'left',
  CENTER = 'center',
  RIGHT = 'right',
}

const gourpNumber = 3
const groupColumnNumber = 6
const headerClassReflect = ['bg-yellow', 'bg-green', 'bg-cyan']

export default function useTableData() {
  const tableColumns = ref<tableColumnInGroup[]>([])
  const tableData = ref<{}[]>([])
  const getTableData = () => {
    const groups: tableColumnsGroups = Array.from({ length: gourpNumber }).map(
      (_, groupIndex) => ({
        groupTitle: `group${groupIndex + 1}`,
        children: Array.from({ length: groupColumnNumber }).map(
          (_, columnIndex) => ({
            key: `group${groupIndex}-column${columnIndex}`,
            title: `${groupIndex + 1}组-${columnIndex + 1}列`,
            width: 100,
            headerClass: headerClassReflect[groupIndex] || '',
          })
        ),
      })
    )
    tableColumns.value = groups.reduce(
      (columns: tableColumnInGroup[], group) => {
        columns.push(
          ...group.children.map(({ key, title, width, headerClass }) => ({
            key,
            dataKey: key,
            title,
            width: width ?? 80,
            headerClass,
            align: Alignment.CENTER,
            groupTitle: group.groupTitle,
          }))
        )
        return columns
      },
      []
    )

    tableData.value = Array.from({ length: 20 }).map((_, rowIndex) =>
      tableColumns.value.reduce((rowData, column, columnIndex) => {
        rowData[column.dataKey] = `${rowIndex + 1}行-${
          Math.floor(columnIndex / groupColumnNumber) + 1
        }组-${(columnIndex % groupColumnNumber) + 1}列`

        return rowData
      }, {})
    )
  }
  onMounted(() => {
    getTableData()
  })

  return {
    tableColumns,
    tableData,
  }
}