<template>
  <view class="table">
    <view class="table-header">
      <view
        v-for="(column, index) in children"
        :key="index"
        class="table-cell"
        :class="[`text-${column.align || 'center'}`]"
        :style="{ width: column.width }"
      >
        <text>{{ column.label }}</text>
      </view>
    </view>
    <view class="table-row">
      <view class="table-cell" :class="[`text-${indexColumn.align || 'center'} w-full`]">
        <TableCol
          v-if="index"
          :prop="indexColumn.prop"
          :label="indexColumn.label"
          :width="indexColumn.width"
          :align="indexColumn.align"
          class="w-full"
        >
          <template #value="{ index }">
            <text>{{ index + 1 }}</text>
          </template>
        </TableCol>
        <slot class="w-full"></slot>
      </view>
    </view>
    <view class="text-center p-[32rpx] text-[28rpx] text-[#aaa]" v-show="data.length === 0">
      暂无数据
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useChildren } from './useChildren'
import { TABLE_KEY } from './types'
import { isObj, uuid } from './utils'
import TableCol from './WXXTableCol.vue'

const props = defineProps<{
  data: any[]
  index?: boolean
}>()

const { children, linkChildren } = useChildren(TABLE_KEY)
linkChildren({ props })

const indexUUID = uuid()
const indexColumn = ref({
  prop: indexUUID,
  label: '序号',
  width: '100rpx',
  sortable: false,
  fixed: false,
  align: 'left',
  ...(isObj(props.index) ? props.index : {}),
})
</script>

<style scoped>
.table {
  overflow: hidden;
  width: 100%;
  border: 2rpx solid #eee;
  box-sizing: border-box;
}

.table-header {
  display: flex;
  background-color: #f5f5f5;
  font-weight: bold;
  min-height: 60rpx;
}

.table-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx;
  font-size: 24rpx;
  width: 100%;
  color: #333333;
  box-sizing: border-box;
}

.table-header .table-cell {
  text-align: center;
}

.table-row {
  display: flex;
  border-top: 1px solid #ddd;
}

.table-row .table-cell {
  text-align: center;
}

.table-row:first-child {
  border-top: none;
}

.table-cell:not(:last-child) {
  border-right: 1px solid #ddd;
}

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

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

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