<template>
  <view v-if="slot.default">
    <slot></slot>
  </view>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { useTableInject } from './useTable'

const props = defineProps<{
  prop: string
  label: string
  width?: string
  align?: 'left' | 'center' | 'right'
  colClass?: string
}>()

const { addColumn } = useTableInject()
const slot = useSlots()

onMounted(() => {
  addColumn({
    prop: props.prop,
    label: props.label,
    width: props.width,
    align: props.align,
    colClass: props.colClass,
    slot: slot,
  })
})
</script>

<style scoped>
.table-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx;
  font-size: 20rpx;
  color: #333333;
  border-right: 1px solid #ddd;
}

.table-cell:last-child {
  border-right: none;
}

.text-left {
  justify-content: flex-start;
}

.text-center {
  justify-content: center;
}

.text-right {
  justify-content: flex-end;
}
</style>
