<script lang="ts" setup>
import type { PropType } from 'vue'
import { computed, toRaw, unref } from 'vue'
import { Table } from 'ant-design-vue'
import { cloneDeep } from 'lodash-es'
import type { ColumnType } from 'ant-design-vue/es/table/interface'
import type { BasicColumn } from '../types/table'
import { INDEX_COLUMN_FLAG } from '../const'
import { useTableContext } from '../hooks/useTableContext'
import { propTypes } from '@/utils/propTypes'
import { isFunction } from '@/utils/is'

defineOptions({ name: 'BasicTableFooter' })

const props = defineProps({
  summaryFunc: {
    type: Function as PropType<Fn>,
  },
  summaryData: {
    type: Array as PropType<Recordable[]>,
  },
  scroll: {
    type: Object as PropType<Recordable>,
  },
  rowKey: propTypes.string.def('key'),
})
const SUMMARY_ROW_KEY = '_row'
const SUMMARY_INDEX_KEY = '_index'

const table = useTableContext()

const getDataSource = computed((): Recordable[] => {
  const { summaryFunc, summaryData } = props
  if (summaryData?.length) {
    summaryData.forEach((item, i) => (item[props.rowKey] = `${i}`))
    return summaryData
  }
  if (!isFunction(summaryFunc))
    return []

  let dataSource = toRaw(unref(table.getDataSource()))
  dataSource = summaryFunc(dataSource)
  dataSource.forEach((item, i) => {
    item[props.rowKey] = `${i}`
  })
  return dataSource
})

const getColumns = computed(() => {
  const dataSource = unref(getDataSource)
  const columns: BasicColumn[] = cloneDeep(table.getColumns())
  const index = columns.findIndex(item => item.flag === INDEX_COLUMN_FLAG)
  const hasRowSummary = dataSource.some(item => Reflect.has(item, SUMMARY_ROW_KEY))
  const hasIndexSummary = dataSource.some(item => Reflect.has(item, SUMMARY_INDEX_KEY))

  if (index !== -1) {
    if (hasIndexSummary) {
      columns[index].customRender = ({ record }) => record[SUMMARY_INDEX_KEY]
      columns[index].ellipsis = false
    }
    else {
      Reflect.deleteProperty(columns[index], 'customRender')
    }
  }

  if (table.getRowSelection() && hasRowSummary) {
    const isFixed = columns.some(col => col.fixed === 'left')
    columns.unshift({
      width: 60,
      title: 'selection',
      key: 'selectionKey',
      align: 'center',
      ...(isFixed ? { fixed: 'left' } : {}),
      customRender: ({ record }) => record[SUMMARY_ROW_KEY],
    })
  }
  return columns as unknown as ColumnType[]
})
</script>

<template>
  <Table
    v-if="summaryFunc || summaryData"
    :show-header="false"
    :bordered="false"
    :pagination="false"
    :data-source="getDataSource"
    :row-key="(r) => r[rowKey]"
    :columns="getColumns"
    table-layout="fixed"
    :scroll="scroll"
  />
</template>
