<script lang="ts" setup>
import type { PropType } from 'vue'
import { computed } from 'vue'
import { BasicTitle } from '@/components/Basic'
import { useDesign } from '@/hooks/web/useDesign'
import { isFunction } from '@/utils/is'

defineOptions({ name: 'BasicTableTitle' })

const props = defineProps({
  title: {
    type: [Function, String] as PropType<string | ((data) => string)>,
  },
  getSelectRows: {
    type: Function as PropType<() => any[]>,
  },
  helpMessage: {
    type: [String, Array] as PropType<string | string[]>,
  },
})

const { prefixCls } = useDesign('basic-table-title')

const getTitle = computed(() => {
  const { title, getSelectRows = () => {} } = props
  let tit = title

  if (isFunction(title)) {
    tit = title({
      selectRows: getSelectRows(),
    })
  }
  return tit
})
</script>

<template>
  <BasicTitle v-if="getTitle" :class="prefixCls" :help-message="helpMessage">
    {{ getTitle }}
  </BasicTitle>
</template>

<style lang="less">
@prefix-cls: ~'@{namespace}-basic-table-title';

.@{prefix-cls} {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
