<template>
  <view class="table-wrapper" :style="data.length === 0 ? 'height: 100%;' : ''">
    <view class="table-header">
      <view
        v-for="(column, index) in columns"
        :key="index"
        :class="[`text-${column.align || 'center'}`, 'table-cell', 'text-[24rpx]', 'font-semibold']"
        :style="{ width: column.width }"
      >
        <text>{{ column.label }}</text>
      </view>
    </view>
    <view v-for="(item, index) in data" :key="index" class="table-row">
      <view
        v-for="(column, colIndex) in columns"
        :key="colIndex"
        :class="[`text-${column.align || 'center'}`, column.colClass, 'table-cell']"
        :style="{ width: column.width }"
      >
        <text>{{ item[column.prop] }}</text>
      </view>
    </view>

    <view
      class="flex flex-col items-center justify-center text-[24rpx] text-[#333] border-body mt-auto flex-1"
      v-if="data.length === 0"
    >
      <image
        src="data:image/png;base64,[encoded data, 7048 characters]"
        mode="scaleToFill"
        class="w-[240rpx] h-[240rpx]"
      />
      <view class="text-[28rpx] mt-[30rpx] px-[20rpx] text-[#666]">没有数据哦~</view>
    </view>
  </view>
</template>

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

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

const { columns } = useTable()
</script>

<style scoped>
.table-wrapper {
  overflow: hidden;
  width: 100%;

  border: 2rpx solid #eee;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

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

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

.table-row {
  display: flex;
  border-top: 1px solid #ddd;
  font-size: 24rpx;
  width: 100%;
}

.table-row .table-cell {
  text-align: center;
  padding-left: 10rpx;
  padding-right: 10rpx;
}

.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>
